jQuery たった7行でできる、シンプルな階層型メニュー

jQuery

Webサイトで階層型メニューはよく使われる手法のひとつといえます。でもやり方は人それぞれ。CSSだけで実装する手法もありますが、JavaScriptライブラリとして最も浸透しているであろう jQuery を使って階層型メニューを作ってみました。しかも、たった7行!見た目はCSSで調整してもらえれば、汎用性もばっちりだと思うので参考にしてみてください。

1、jQuery を読込む

まずはjQueryを読込んでください。
ダウンロードするなり、なんなり好きなやり方でどうぞ。
jQuery

2、HTMLを書く

とりあえずこんな感じで。

3、CSSを書く

見た目の調整はここでします。
とりあえず今回はこんな感じで。

*{
    margin:0;
    padding:0;
    list-style:none;
}
ul.main li{
    float:left;
    width:150px;
    height:40px;
    position:relative;
}
ul.main li a{
    display:block;
    width:100%;
    height:100%;
    text-decoration:none;
    text-indent:30px;
    line-height:40px;
    background-color:#336699;
    color:#FFFFFF;
}
ul.main li a:hover{
    text-decoration:none;
    background-color:#003366;
    color:#FFFFFF;
}
/**/ul.sub,
ul.sub ul.sub{
    display:none;
}
ul.sub li ul.sub{
    position:absolute;
    top:0;
    left:150px;
}
/*clearfix*/
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix {
    display: inline-table;
    min-height: 1%;
}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */
/*clearfix*/

4、Javascriptを書く

たった7行!

$(function(){
    $('ul.main li').hover(function(){
        $('>ul:not(:animated)',this).slideDown('fast')
    },function(){
        $('>ul',this).slideUp('fast');
    });
});

ポイント

ポイントは3行目・5行目の、

        $('>ul:not(:animated)',this).slideDown('fast')
        $('>ul',this).slideUp('fast');

の部分。
$(‘>ul’,this)でマウスオーバーした要素の子要素を指定する事ができるようです。
この書き方を知っておくだけで色んな事が、簡単にかけるようになると思います。

5、デモ

こんな感じになります。

以上です。前でも書きましたが、CSSで見た目を調整すれば汎用性がかなりきくと思いますので、参考にしてみてください。
ではでは。

タイトルとURLをコピーしました