CODEWITHSUNDEEP
javascriptjqueryhtmlmenu
Alex
Alex

Reputation: 35831

Automatic menu for a UL tag?

Is there a way to use jQuery to automatically apply a vertical accordion menu (or some other vertical menu type) to a UL tag? So, something like this could become a menu via a JavaScript call:

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

In other words, its LI children would become menu items. It would be great if the menu's height could be constrained. Thanks.

Upvotes: 1

Views: 399

Answers (5)

Wade
Wade

Reputation: 1

I actually use AllWebMenus Pro (Likno Software) to make vertical menus and I'm quite contented.I think it will work for you.

Upvotes: 0

Naftali
Naftali

Reputation: 146310

shown here on this FIDDLE :-D

js:

$('.menu .menu-item').hover(function(){$(this).children('ul').toggle('blind')})
    $('.menu .menu-item ul').hide()

html:

<ul class='menu'>
    <li class='menu-item'> ITEM
       <ul class='sub-menu'>
         <li>Item 1</li>
         <li>Item 2</li>
         <li>Item 3</li>
         <li>Item 4</li>
       </ul>
    </li>
</ul>

Upvotes: 3

Alnitak
Alnitak

Reputation: 339816

There's a new menu class in jQuery UI's github repository that will be in jQuery UI 1.9 that should satisfy your needs.

It's compatible with jQuery UI 1.8, and ThemeRoller too.

It handles nested sub-menus. I've used it on a project recently and it's pretty good.

Upvotes: 1

jessegavin
jessegavin

Reputation: 75650

There are a ton of plugins for this.

Superfish is built off of the Suckerfish (css-only) menus, but adds a bit of javascript to handle some of the yucky quirks of a css-only solution.

Upvotes: 1

konsolenfreddy
konsolenfreddy

Reputation: 9671

you don't even need Javascript(*). use suckerfish: http://htmldog.com/articles/suckerfish/dropdowns/

(* I think only for an unsupported event in IE6)

Upvotes: 1

Related Questions