jQuery suckerFish

階層リストを帯状のメニューとして表示

• item 1
  • item 1.1
  • item 1.2
  • item 1.3
  • item 1.4
• item 2
  • item 2.1
  • item 2.2
• item 3
  • item 3.1
  • item 3.2
• item 4
  • item 4.1
  • item 4.2
  • item 4.3

$(function () {
    $('#nav1 li').hover( 
      function () { $('ul', this).fadeIn('fast'); }
    , function () { }
    );
    if (document.all) {
        $('#nav1 li').hoverClass('sfHover'); 
    }
});
$.fn.hoverClass = function (c) {
    return this.each(function () {
        $(this).hover( 
          function () { $(this).addClass(c); }
        , function () { $(this).removeClass(c); }
        ); 
    });
};

<ul id="nav1" class="nav">
 <li> <a href="#item1">item 1</a>
  <ul>
   <li> <a href="#item1.1">item 1.1</a> </li>
   <li> <a href="#item1.2">item 1.2</a> </li>
   <li> <a href="#item1.3">item 1.3</a> </li>
   <li> <a href="#item1.4">item 1.4</a> </li>
  </ul>
 </li>
 <li> <a href="#item2">item 2</a>
  <ul>
   <li> <a href="#item2.1">item 2.1</a> </li>
   <li> <a href="#item2.2">item 2.2</a> </li>
  </ul>
 </li>
 <li> <a href="#item3">item 3</a>
  <ul>
   <li> <a href="#item3.1">item 3.1</a> </li>
   <li> <a href="#item3.2">item 3.2</a> </li>
  </ul>
 </li>
 <li> <a href="#item4">item 4</a>
  <ul>
   <li> <a href="#item4.1">item 4.1</a> </li>
   <li> <a href="#item4.2">item 4.2</a> </li>
   <li> <a href="#item4.3">item 4.3</a> </li>
  </ul>
 </li>
</ul>