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は
- <div class="jmenu">要素を書く
- 上記内に<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は大丈夫です。
なんでだろう。
ちらつきの原因究明に結構悩みました。