CODEWITHSUNDEEP
javascriptjquery
Step
Step

Reputation:

Horizontal Accordion for multilevel UL

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>

Upvotes: 0

Views: 1559

Answers (4)

Elliott Regan
Elliott Regan

Reputation: 11

I was using $(this).outerWidth() to calculate how far $sub should move over, but it doesn’t seem to work with this example. Not too helpful, but it might point you in the right direction. (also, you’ve hopefully solved this issue by now)

Upvotes: 1

stapler
stapler

Reputation: 201

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?

Upvotes: 0

stapler
stapler

Reputation: 201

"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)

Upvotes: 0

hunter
hunter

Reputation: 63522

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;
      }
   });
});

Upvotes: 1

Related Questions