水瓶座列車

どこまで行けるか、とりあえず発車します。

はてなブログでjQueryを使った階層型メニューの作り方

f:id:aquarius999:20181029021405j:plain

 

 

 

 

はてなブログのメニューをjQueryで作ってみようと思います。

 

 

 

  1.jQueryを使うための準備

 

使い方は以下のコードをはてなブログのheaderに記述します。

 

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

 

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

詳細説明や記述場所は、

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

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

 

  2.HTMLの書き方

 

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

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

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

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

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

 

<ul class="main">
<li><a href="#">TOP</a></li>
<li><a href="#">GALLERY</a>
<ul class="sub">
<li><a href="#">PICTURE</a>
<ul class="sub">
<li><a href="#">PORTRAIT</a></li>
<li><a href="#">STILL LIFE</a></li>
</ul>
</li>
<li><a href="#">PHOTO</a>
<ul class="sub">
<li><a href="#">ART</a></li>
<li><a href="#">EVENT</a></li>
<li><a href="#">NATURE</a>
<ul class="sub">
<li><a href="#">FOREST</a></li>
<li><a href="#">SEA</a></li>
<li><a href="#">SKY</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">OTHER</a></li>
</ul>
</li>
<li><a href="#">GUIDE</a>
<ul class="sub">
<li><a href="#">FAQ</a></li>
<li><a href="#">FORUM</a></li>
</ul>
</li>
</ul>

 

  3.CSSの書き方

 

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


ul.mymain, ul.mysub{
margin:0;
padding:0;
list-style-type:none;
}
ul.mymain li{
float:left;
width:150px;
height:38px;
background-color: #B9DDE8;
position:relative;
}
ul.mymain li a{
display:block;
width:100%;
height:100%;
line-height:38px;
text-indent:30px;
font-weight:bold;
text-decoration:none;
}
ul.mymain li a:hover{
background-color: #ffccff;
}
ul.mysub li ul.mysub{
position:absolute;
    left:150px;
    top:0;
}
ul.mysub{ 
  display:none;
}
ul.mymain:after {
content:".";
    display:block;
    clear:both;
    height:0;
    visibility:hidden;
}

 

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

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

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

 

  4.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に記述します。

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

 

  5.実際の動作

 

1~4までのコードを実際に動作させると、こんな感じになります。

 

 

  6.まとめ

 

メニューは階層型でなくてもリストタグだけで作れますが、

動きのあるメニューもjQueryを使えば簡単に作れます。

階層型メニューは深くなると見にくくなるので、深くても3階層までの方が良いです。

ブログの見栄えが良くなるので、是非トライしてみてください。

 

 

<関連記事>

 

はてなブログでダブルレクタングルを設置したら枠線が出たので消したい件 - 水瓶座列車

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

ブログデザインを自分で劇的に良くできる件 ~ 少しのHTMLタグとCSSの書き方だけ - 水瓶座列車