梅梅.com

型月と東方と時雨にはまってる

ブログメニューを作ってみた

このブログのサイドバーに、カテゴリー別記事とプロフィール(はてな)ページのリンクを1つのモジュールにまとめたブログメニューを作りました。

f:id:umesann:20160831171440p:plain 

f:id:umesann:20160831171349p:plain 縦スライド式になっています。

 

コードはこちら。サイドバーのモジュール追加欄の中から、htmlを選択して入力してください。

("#"にはそれぞれのカテゴリ別記事一覧のurlが入ります)

 

<nav class="global-area global-menu-normal">
<div class="menu-instance">
<div id="toggle">Menu<br><i class="blogicon-list lg"></i></div>
<ul>
<li><a href="#"></a></li>
<li>
<a href="#" class="dropdown">カテゴリー</a>
<ul>
<li><a href="#">カテゴリー1(以下K◎と省略)</a></li>
<li><a href="#">K2</a></li>
<li><a href="#">K3</a></li>
<li><a href="#">K4</a></li> 
</ul>
</div>
</nav>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(function(){
$("#toggle").on("click", function() {
$(this).next().slideToggle();
});
$(window).resize(function(){
var windowWidth = $(window).width();
var p = 767;
if(windowWidth > p){
$(".global-menu-normal > .menu-instance > ul").show();
} else {
$(".global-menu-normal > .menu-instance > ul").hide();
}
});
});
</script/>

 

皆さんも是非お試しあれ

 

white noise(初回生産限定盤A)(Blu-ray Disc付)

white noise(初回生産限定盤A)(Blu-ray Disc付)