Question

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.

Answer 1

shown here on this FIDDLE 😀

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>