Horizontal Accordion for multilevel UL

Question

Hi there,

I've been looking at the plethora of horizontal accordion scripts on google.

for example: http://www.leigeber.com/2008/05/horizontal-javascript-accordion-menu/ http://www.nyokiglitter.com/tutorials/horizontal.html http://designreviver.com/tutorials/jquery-examples-horizontal-accordion/

All the scripts seem to be made for displaying content in a static width div/element.

I'm trying to make a fairly straight forward navigation menu. When an element in the top-level UL is clicked, the bottom level UL "slides" out, if you click again if closes. I guess I'd have to calculate the widths "dynamically"... not sure how to proceed.

An example would be this:

    <style type="text/css">
<!--
ul.menu, ul.menu ul{ 
 list-style: none;
 display: inline;
 }
ul.menu li, ul.menu ul li {
 display: inline;
}

a, a:link, a:hover, a:visited, a:active {
 color: black;
 text-decoration: none;
}
-->
</style>


<ul class="menu">
 <li>
  <a href="#">Top-level 1</a>
 </li>
 <li>
  <a href="#">Top-level 2</a>
  <ul>
   <li><a href="#">Bottom Level A1</a></li>
   <li><a href="#">Bottom Level A2</a></li>
   <li><a href="#">Bottom Level A3</a></li>
   <li><a href="#">Bottom Level A4</a></li>
  </ul>
 </li>
 <li>
  <a href="#">Top-level 3</a>
  <ul>
   <li><a href="#">Bottom Level B1</a></li>
   <li><a href="#">Bottom Level B2</a></li>
  </ul>
 </li>
 <li>
  <a href="#">Top-level 4</a>
 </li>
</ul>

Answer 1

I would do this like so:

var $current = null;

$(document).ready(function(){
   $("ul li ul").hide(); // hide submenus by default on load

   $("ul li a").click(function(){
      var $sub = $(this).find("ul"); // could also use $(this).next();

      if ($sub.css("display") == "none")
      {
         if ($current != null)
            $current.slideUp(); // if you want to only show one sub at a time
         $sub.slideDown();
         $current = $sub;
      }
      else
      {
         $sub.slideUp();
         $current = null;
      }
   });
});

Answer 2

"instead of slideUp/slideDown you'll want to use animate()"

I guess that is where I was getting hung up... I'm not sure how to calculate the widths of the bottom-level UL on the fly (if this is even necessary)

Answer 3

For Instance:

   var $current = null;
$(document).ready(function(){
   $("ul li ul").hide(); // hide submenus by default on load

   $("ul li a").click(function(){
      var $sub = $(this).next(); 
      if ($sub.css("display") == "none")
      {
         if ($current != null)
            $current.animate({ width: 'hide' }); // if you want to only show one sub at a time
         $sub.animate({ width: 'show' }); 
         $current = $sub;
      }
      else
      {
         $sub.animate({ width: 'hide' });
         $current = null;
      }
   });
});

I would think this would work, but it just seems like a variant of slide up, it doesn't really work as a "slideRight" "slideLeft" function. Maybe its the css?