jqueryでスライドメニュー


jqueryを使ってスライドメニューを作ってみました。
結構、応用の効くものだと思います。


こんな感じで動きます。
展開中


展開後


下のソースをコピーしてエディタに貼り付け、menu.htmlという名前で保存して、
ブラウザで開いてみてください。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style  type="text/css"><!--
.jmenu {
}
.jmenu ul{
list-style: none;
}
.jmenu ul li{
border-bottom: 1px solid #111;
}
.jmenu  a {
color: #00f;
text-decoration: none;
}
.jmenu  a:hover {
color: #f00;
text-decoration: underline;
}
//-->
</style>
<script src="http://www.google.com/jsapi"></script>
<script><!--
google.load("jquery", "1.2.6");
//-->
</script>
<script><!--
$(function(){ 
  $(".jmenu > ul").each(function(){ 
    $("li > a", this).each(function(i){
      $(this).next().hide();
      $(this).click(function(){ 
        $(this).next().children("li:last").css({borderBottom: "none"});
        $(this).next().toggle('slow').parent().siblings().children("ul:visible").toggle('slow'); 
      }); 
      $(this).hover(
        function(){$(this).parent().css({backgroundColor: "#eee"})},
        function(){$(this).parent().css({backgroundColor: ""})}
      ); 
    }); 
  }); 
}); 
//-->
</script>
</head>
<body>
  <div class="jmenu">
    <ul>
      <li><a href="#">Directory 1</a>
        <ul>
          <li><a href="#">Directory 1.1</a>
            <ul>
            <li><a href="#">Theme 1.1.1</a></li>
            <li><a href="#">Theme 1.1.2</a></li>
            <li><a href="#">Theme 1.1.3</a></li>
            </ul>
          </li>
          <li><a href="#">Directory 1.2</a>
            <ul>
            <li><a href="#">Theme 1.2.1</a></li>
            <li><a href="#">Theme 1.2.2</a></li>
            <li><a href="#">Directory 2.2.3</a>
            <ul>
                <li><a href="#">Theme 1.2.3.1</a></li>
                <li><a href="#">Theme 1.2.3.2</a></li>
            </ul>
            </li>
            <li><a href="#">Theme 1.2.4</a></li>
            </ul>
          </li>
          <li><a href="#">Theme 1.3</a></li>
          <li><a href="#">Theme 1.4</a></li>
        </ul>
      </li>
      <li><a href="#">Directory 2</a>
        <ul>
          <li><a href="#">Theme 2.1</a></li>
          <li><a href="#">Theme 2.2</a></li>
          <li><a href="#">Theme 2.3</a></li>
        </ul>
      </li>
      <li><a href="#">Directory 3</a>
        <ul>
          <li><a href="#">Theme 3.1</a></li>
          <li><a href="#">Theme 3.2</a></li>
          <li><a href="#">Theme 3.3</a></li>
        </ul>
      </li>
    </ul>
  </div>
</body>
</html>


「Directory」という名前が付くリンクのみ子要素を持っています。


htmlは

  1. <div class="jmenu">要素を書く
  2. 上記内に<ul>と<li>でリンクを書く

それだけです。
<ul><li>の入れ子にも対応しています。


先頭の

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

を消すと、IE7ではスライドの動きにちらつきが出ます。


Firefox3.3、Opera9.6.2は大丈夫です。
なんでだろう。
ちらつきの原因究明に結構悩みました。