jQueryを使った階層型メニューの作り方

f:id:aquarius999:20181029021405j:plain

ブログ記事のカテゴリ名をメニュー名にするのですが、

そのカテゴリの更に詳細なカテゴリ名もメニューに表示したいと思うことがあります。

例えば、プログラミングのカテゴリの中には、C言語やC++などありますが、

C言語やC++もメニューに表示したい場合には、階層型メニューがわかりやすいです。

ここでは、jQueryを作った階層型メニューの作り方を書いていきたいと思います。

jQueryを使うための準備
階層型メニューのHTMLの書き方
階層型メニューのCSSの書き方
階層型メニューのjQueryコードの書き方
階層型メニューの実際の動作
最後に

１．jQueryを使うための準備

使い方は、以下のコードをheaderタグ内に記述します。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

これを記述しないと、そもそもjQueryが動作しません。

詳細説明や記述場所は、

はてなブログでjQueryを使ったアコーディオンメニューの作り方 - 水瓶座列車

この記事を参考にしてください。

２．階層型メニューのHTMLの書き方

階層型メニューのHTMLコードは、すごく簡単でリストタグを階層化するだけです。

注意が必要な事は、jQueryでメニューを動作させるときにクラス名が必要なので、

メインメニューとサブメニューにクラス名を付けておきます。

最初から見えている項目がメインメニュー、隠れている項目はすべてサブメニューです。

参考コードを載せておきます。

<ul class="main">
　　<li><a href="#">Main-1</a></li>
　　<li><a href="#">Main-2</a>
　　　　<ul class="sub">
　　　　　　<li><a href="#">Sub-1</a>
　　　　　　　　<ul class="sub">
　　　　　　　　　　<li><a href="#">Sub-Sub-1</a></li>
　　　　　　　　　　<li><a href="#">Sub-Sub-2</a></li>
　　　　　　　　</ul>
　　　　　　</li>
　　　　　　<li><a href="#">Sub-2</a>
　　　　　　　　<ul class="sub">
　　　　　　　　　　<li><a href="#">Sub-Sub-3</a></li>
　　　　　　　　　　<li><a href="#">Sub-Sub-4</a></li>
　　　　　　　　　　<li><a href="#">Sub-Sub-5</a>
　　　　　　　　　　　　<ul class="sub">
　　　　　　　　　　　　　　<li><a href="#">Sub-Sub-Sub-1</a></li>
　　　　　　　　　　　　　　<li><a href="#">Sub-Sub-Sub-2</a></li>
　　　　　　　　　　　　　　<li><a href="#">Sub-SUb-Sub-3</a></li>
　　　　　　　　　　　　</ul>
　　　　　　　　　　</li>
　　　　　　　　</ul>
　　　　　　</li>
　　　　　　<li><a href="#">Sub-3</a></li>
　　　　</ul>
　　</li>
　　<li><a href="#">Main-3</a>
　　　　<ul class="sub">
　　　　　　<li><a href="#">Sub-6</a></li>
　　　　　　<li><a href="#">Sub-7</a></li>
　　　　</ul>
　　</li>
</ul>

３．階層型メニューのCSSの書き方

CSSの参考例は、こんな感じです。


ul.main, ul.sub{
　　margin:0;
　　padding:0;
　　list-style-type:none;
}

ul.main li{
　　float:left;
　　width:150px;
　　height:38px;
　　background-color: #B9DDE8;
　　position:relative;
}

ul.main li a{
　　display:block;
　　width:100%;
　　height:100%;
　　line-height:38px;
　　text-indent:30px;
　　font-weight:bold;
　　text-decoration:none;
}

ul.main li a:hover{
　　background-color: #ffccff;
}

ul.sub li ul.sub{
　　position:absolute;
　　left:150px;
　　top:0;
}

ul.sub{
　　display:none;
}

ul.main:after {
　　content:".";
　　display:block;
　　clear:both;
　　height:0;
　　visibility:hidden;
}

ulタグが階層構造になるように、親子関係を定義する必要があります。

それは、ul.main li {}のposition:relative;とul.sub li ul.sub{}のposition:absolute;で、

親子関係を定義しています。

４．階層型メニューのjQueryコードの書き方

階層型メニューのjQueryの参考コードは、こんな感じです。

<script type="text/javascript">
　　$(function(){
　　　　$("ul.mymain li").hover(function(){
　　　　　　$(">ul:not(:animated)",this).slideDown("fast");
　　　　},
　　　　function(){
　　　　　　$(">ul",this).slideUp("fast");
　　　　})
　　})
</script>

簡単に説明すると、

3行目は、hoverを使ってulタグのmymainクラスにマウスが乗った時と離れているときの処理を指定しています。

4行目は、マウスが乗ったら、子要素をslideDown()を使って表示します。

5行目は、マウスが離れたら、子要素をslideUp()を使って非表示にしています。

このコードは、headerタグ内に記述します。

記述場所は１項で紹介した記事に記載しています。