jQueryで自作アコーデオンメニュー

Posted on2012年1月26日 Edit on2012年3月16日投稿者: toreno

WPならプラグインで簡単に実装できるけど、細かいカスタマイズを考えると自分で作るのが一番。それほど難しくないし。

html

<div id="amenu-list">
<ul>
<li>
<a href="#">メニュー１</a>
<ul>
<li><a href="">サブメニュー</a></li>
<li><a href="">サブメニュー</a></li>
<li><a href="">サブメニュー</a></li>
</ul>
</li>
<li>
<a href="#">メニュー２</a>
<ul>
<li><a href="">サブメニュー</a></li>
<li><a href="">サブメニュー</a></li>
<li><a href="">サブメニュー</a></li>
</ul>
</li>
<li>
<a href="#">メニュー３</a>
<ul>
<li><a href="">サブメニュー</a></li>
<li><a href="">サブメニュー</a></li>
<li><a href="">サブメニュー</a></li>
</ul>
</li>
</ul>
</div>

css

<style type="text/css">
#amenu-list ul, amenu-list li {margin:0; padding:0; list-style-type:none}
#amenu-list li {border:1px solid #CCC}
#amenu-list li a {display:block;background:#00E;color:#FFF}
#amenu-list li a:hover {background:#CCF;color:#00E}
</style>

jQuery

<script type="text/javascript">
$(function(){
 
$('#amenu-list li').hover(
function(){$('>ul',this).slideDown('fast');},
function(){$('>ul',this).slideUp('fast');}
);
 
});
</script>

jQueryを読み込むのを忘れずに。
.slideDown や .slideUp の他にも色々な効果のスクリプトがある。

コメントを残す