jQuery: クリックして止まるドロップダウンメニュー

jQuery を使うとメニューを比較的エレガントに実装できます。

slideDown() / slideUp() などの関数を利用すると任意のコンポーネントを表示または非表示に設定できます。

さらに、マウスクリックでメニューを固定するなどいう指定が可能です。

固定されたメニューは画面いずれかの場所でクリック数すると解除されます。

以下、jQueryの部分です。

$(document).ready(function(){
    // 1 when any menu is shown
    var menuOn=0;

    $("ul#menu > li").click(function(){
        // hide all menu items
        $("ul#menu > li").each(function(){
            $(this).find('ul').css("display","none");
          });
        $(this).find('ul').css("display","block");
        menuOn=1;
      });
              
    // hide/show menu items
    $("ul#menu > li").hover(function(){// show menu when the cursor is over
        if(menuOn==0)
          {
            $(this).find('ul').css("display","block");
          }
      },      
      function(){// hide menu when the cursor is off
        if(menuOn==0)
          {
            $(this).find('ul').css("display","none");
          }
      });

    // hide all menus and clear the flag
    $("#canvas").click(function(){
        if(menuOn==1)
          {
            $("ul#menu > li").each(function(){
                $(this).find('ul').css("display","none");
              });
          }
        menuOn=0;
      });
  });

スタイルシートです。

ul#menu,
ul#menu ul
{
    list-style:none;
    z-index:1;
    position:relative;
}
ul#menu ul li 
{
    line-height:25px;
    width:100px;
    height:25px;
    background:#2D435A;
}
ul#menu ul li a
{
    text-decoration:none;
    color:#cccccc;
    margin-left:10px;
    font-size:14px;
    text-align:none;
}
ul#menu ul li#heading a,
table#submenu a#heading
{
    color:white;
    font-size:16px;
    margin-left:0px;
}
ul#menu ul
{
    display:none;  
}
ul#menu,
ul#menu li,
ul#menu ul,
ul#menu ul li
{
    margin:0px;
    padding:0px;
}
ul#menu li, 
ul#menu ul li 
{
    color:white;
}

div#menubar
{
    width:100%;
    background-image:url('../../../../images/topNav_bkgd.jpg');background-repeat:x-repeat;
}

ul#menu
{
    width:960px;
    margin:0px auto;
    padding:0px;
}
ul#menu li
{
    height:25px;
    line-height:25px;
    display:inline-block;
    vertical-align:top;
    color:white;
    text-align:center;
    width:130px;
    border:0px;
    *display:inline;
    *zoom:1;
}
ul#menu li ul
{
    width:400px;
    height:400px;
    background:#2D435A;
    opacity:.9;
    filter:alpha(opacity=90);
    -ms-filter:"alpha(opacity=90)";
    -moz-opacity:.9;
    -khtml-opacity:.9;
    text-align:left;
}
ul#menu li ul li
{
    text-align:left;
    border:none;
    padding-top:10px;
    padding-left:10px;
}
table#submenu
{
    margin:0px;
    margin-top:10px;
    margin-left:10px;
    border:0px;
    border-collapse:collapse;
    width:400px;
}
table#submenu td
{
    text-align:left;
    vertical-align:top;
}
div#canvas
{
    width:100%;
    text-align:center;
}
div#position
{
    width:960px;
    margin:0px auto;  
    text-align:left;
}

HTMLの部分を示します。

<div id="menu">
<ul>
<li>Home
    <ul>
<li><a href="http://www.blogger.com/default.htm" title="Noritake VFD">Home</a>
      </li>
</ul>
</li>
</ul>
</div>