Stop jQuery slideUp slideDown madness!

Ever made a jquery slider only to find that when you mouse over your menu items quickly you need to wait until it all catches up with itself? you need to .stop()!

<ul id="nav">
<a href="/about/opening-times">About Us</a>
<ul class="submenu" style="display: none;">
<li><a href="/about/opening-times">Opening Times</a></li>
<li><a href="/about/key-people">Key People</a></li>
<li><a href="/about/awards">Awards</a></li>
<a href="/our-tea/list">Our Tea</a>
<ul class="submenu" style="display: none;">
<li><a href="/our-tea/list">List of our teas</a></li>
<li><a href="/our-tea/tea-guild">Information on the tea guild</a></li>
<li><a href="/our-tea/info">Information on purchase of tea</a></li>
<li><a href="/menus">Menus</a></li>
<a href="/afternoon-tea/history">Afternoon Tea</a>
<ul class="submenu" style="display: none;">
<li><a href="/afternoon-tea/history">History of afternoon tea</a></li>
<li><a href="/afternoon-tea/our-offerings">Our offerings</a></li>
<li><a href="/afternoon-tea/menus">Menus</a></li>
<li><a href="/events">Events</a></li>
<li><a href="/gallery">Gallery</a></li>
<li><a href="/private-hire">Private Hire</a></li>
<li><a href="/testimonials">Testimonials</a></li>
<script type="text/javascript">
$('ul#nav li').hover(function()
$(this).find('ul.submenu').stop(true, true).slideDown('slow'); }, 
function() {$(this).parent().find('ul.submenu').stop(true, true).slideUp('slow');

And that should take care of it!


Navigation, Breadcrumbs, & Sitemap with Zend Framework

Let Zend Framework do all the work when it comes to your Navigation, and stop hard coding stuff in either layouts or view files!

First up, in the configs folder, create an XML file called navigation.xml :

<?xml version="1.0" encoding="UTF-8"?>
       <label>About Us</label>
       <label>Contact Us</label>
       <label>Site Map</label>
       <label>Privacy Policy</label>
       <label>Terms of Use</label>

Stick this _init method into your bootstrap :

protected function _initNavigation()
 $layout = $this->getResource('layout');
 $view = $layout->getView();
 $config = new Zend_Config_Xml(APPLICATION_PATH.'/configs/navigation.xml','nav');
 $nav = new Zend_Navigation($config);

This loads the XML into a Zend Config, which gets passed to Zend_Navigate, and finally to the view. To get this stuff displaying on your pages, go into your layout.phtml and add this:

echo $this->navigation()->menu();

For breadcrumbs, put this into your Controllers _init method. This figures out where in the XML tree we are:

$uri = $this->getRequest()->getPathInfo();
if (($activeNav = $this->view->navigation()->findByHref($uri)) !== null) 
 $activeNav->active = true;
else if (($activeNav = $this->view->navigation()->findByUri($uri)) !== null) 
 $activeNav->active = true;

And back in the layout, add this:

echo $this->navigation()->breadcrumbs()->setMinDepth(0)->setLinkLast(false)->setSeparator(' | ');

The setLinkLast false makes the last breadcrumb non linkable (I mean we’re on that page!), and setSeparator can contain any HTML.

Finally, to get a sitemap that Google can accept, in your sitemap’s controller action, we only need to add this :

 echo $this->view->navigation()->sitemap();

And thats us! Nice n easy! Bonus brownie points for anyone who posts a reply showing how to separate footer links from the nav!