先日シロマティさんの『Brooklyn』にテーマを変えました。
デザインいい！でも「ドロップダウンメニューにしたいなぁー」とずーっと思ってたんですがなかなかいいのがない。自分でも作れないし…。って思ってたら 発見！！
はてな界のカスタムマスターゆきひーさん！ゴイゴイスー！
しかしこのまま使うとデザイン的に合わない…。
でも大丈夫。
私、CSSを組むことはことはできませんが、これのおかげでいじることはできます！（ドヤ！）
『Brooklyn』用にカスタマイズ
ゆきひーさんの作ったものは文字サイズだったり、色が『Brooklyn』にはちょっと合いません。
ですので、テーマデザインに忠実にカスタムしました。
CSS
これが手を加えたコードです。これをまるっとコピーして【デザイン→デザインCSS】にペーストして下さい。
/*******グローバルナビ********/
.slideButton {
display: none;
}
#slideMenu {
position: relative;
width: 100%;
height: 40px;
background-color: #000000;/*メニューの背景色*/
}
#slideMenu > .slideMenuInner {
list-style-type: none;
width: 960px;/*メニューの横幅を*/
height: 100%;
margin: 0 auto;
padding-left: 0;
}
#slideMenu > .slideMenuInner li {
position: relative;
float: left;
height: 100%;
text-align: center;
}
#slideMenu > .slideMenuInner > li a {
display: block;
position: relative;
z-index: 2;
height: 100%;
padding-right: 40px;/*文字の左の余白*/
padding-left: 40px;/*文字の右の余白*/
background-color: #000000;/*文字の背景色*/
color: #fff;/*文字色*/
font-size: 100%;
text-decoration: none;
line-height: 40px;
}
#slideMenu > .slideMenuInner > li:hover a {
background-color: #555;/*文字の背景色（マウスホバー時）*/
}
/*２階層目*/
#slideMenu > .slideMenuInner > li > ul.second-level {
visibility: hidden;
list-style-type: none;
position: absolute;
z-index: -1;
top: 0;
margin: 0;
padding-left: 0;
}
#slideMenu > .slideMenuInner > li:hover > ul.second-level {
visibility: visible;
z-index: 1;
top: 40px;
transition: all .3s;
}
#slideMenu > .slideMenuInner > li:hover > ul.second-level > li {
width: 200px;
height: 40px;
text-align: center;
}
#slideMenu > .slideMenuInner > li:hover > ul.second-level > li > a {
display: block;
background-color: #000000;/*子メニューの文字の背景色*/
color: #fff;/*子メニューの文字色*/
font-size: 100%;
text-decoration: none;
line-height: 40px;
}
#slideMenu > .slideMenuInner > li:hover > ul.second-level > li > a:hover {
background-color: #555;/*子メニューの背景色（マウスホバー時）*/
}
/*２階層目ここまで*/
/******スライドメニュー*******/
@media screen and (max-width:960px) {/*１*/
#menuButton {
z-index: 10;
width: 100%;
background-color: #000000;/*メニューバーの色*/
}
#menuButtonInner {
position: relative;
width: 100%;
margin: 0 auto;
text-align: right;
}
.slideButton {
display: inline-block;
margin: 5px;
padding: 8px 15px;
background-color: #000000;/*「MENU」の背景色*/
color: #fff;/*「MENU」の文字色*/
font-size: 100%;
text-decoration: none;
cursor: pointer;
}
#slideMenu {
overflow-x: hidden;
overflow-y: auto;
position: absolute;
z-index: 20;
top: 0;
right: -260px;
width: 260px;
height: 100%;
margin: 0;
padding: 0;
box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2);
}
#slideMenu > .slideMenuInner {
position: static;
width: 100%;
height: 100%;
}
#slideMenu > .slideMenuInner > li {
display: block;
position: relative;
float: none;
width: 100%;
height: 40px;
margin: 0 auto;
border-top: 1px solid #eee;
text-align: center;
}
#slideMenu > .slideMenuInner > li a {
display: block;
position: relative;
z-index: 1;
width: 100%;
height: 100%;
padding: 0;
background-color: #fff;/*スライドメニューの背景色*/
color: #333;/*スライドメニューの文字色*/
font-size: 70%;
font-weight: bold;
line-height: 40px;
}
#slideMenu > .slideMenuInner > li:hover a {
background-color: #fff;/*スライドメニューの背景色（マウスホバー時）*/
color: #333;/*スライドメニューの文字色（マウスホバー時）*/
}
#slideMenu > .slideMenuInner > li > a:active {
opacity: .8;
}
#slideMenu > .slideMenuInner > li:hover > ul.second-level {
display: none;
}
.closeArea {
height: 100%;
background-color: #000000;/*クローズエリア（スライドメニューの下の部分）の色*/
cursor: pointer;
}
#layer {
display: none;
position: fixed;
z-index: 10;
top: 0;
width: 100%;
height: 150%;
background-color: #222;/*レイヤーの色*/
opacity: .4;/*レイヤーの透明度*/
cursor: pointer;
}
}
HTML&jQuery
次に以下のコード【デザイン→ヘッダ→タイトル下】にペーストします。
<!--グローバルメニュー-->
<div id="menuButton">
<div id="menuButtonInner">
<span class="slideButton"><i class="blogicon-list lg"></i> MENU<br></span>
</div>
</div>
<div id="slideMenu">
<ul class="slideMenuInner">
<li><a href=''>カテゴリ１</a>
<ul class="second-level">
<li><a href=''>カテゴリ1-1</a></li>
<li><a href=''>カテゴリ1-2</a></li>
<li><a href=''>カテゴリ1-3</a></li>
</ul>
</li>
<li><a href=''>カテゴリ２</a>
<ul class="second-level">
<li><a href=''>カテゴリ2-1</a></li>
<li><a href=''>カテゴリ2-2</a></li>
<li><a href=''>カテゴリ2-3</a></li>
</ul>
</li>
<li><a href=''>カテゴリ３</a>
<ul class="second-level">
<li><a href=''>カテゴリ3-1</a></li>
<li><a href=''>カテゴリ3-2</a></li>
<li><a href=''>カテゴリ3-3</a></li>
</ul>
</li>
<li><a href=''>カテゴリ４</a>
<ul class="second-level">
<li><a href=''>カテゴリ4-1</a></li>
<li><a href=''>カテゴリ4-2</a></li>
<li><a href=''>カテゴリ4-3</a></li>
</ul>
</li>
<li><a href=''>カテゴリ５</a>
<ul class="second-level">
<li><a href=''>カテゴリ5-1</a></li>
<li><a href=''>カテゴリ5-2</a></li>
<li><a href=''>カテゴリ5-3</a></li>
</ul>
</li>
<li><a href=''>カテゴリ６</a>
<ul class="second-level">
<li><a href=''>カテゴリ6-1</a></li>
<li><a href=''>カテゴリ6-2</a></li>
<li><a href=''>カテゴリ6-3</a></li>
</ul>
</li>
<div class="closeArea"></div>
</ul>
</div>
<div style="clear:both;"> </div>
<div id="layer"> </div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(function(){
var menu = $('#slideMenu'),
closeArea = $('.closeArea'),
slideButton = $('.slideButton'),
content = $('body'),
layer = $('#layer'),
menuWidth = menu.outerWidth();
slideButton.click(function(){
slideOpen();
});
layer.click(function(){
slideClose();
});
closeArea.click(function(){
slideClose();
});
function slideOpen(){
menu.animate({'right' : 0 }, 300);
layer.show();
content.addClass('open');
}
function slideClose(){
menu.animate({'right' : -menuWidth }, 300);
layer.hide();
content.removeClass('open');
};
$(window).resize(function(){
var win = $(window).width();
var p = 960;//１
if(win > p){
menu.animate({'right' : 0 }, 300);
}else{
menu.animate({'right' : -menuWidth }, 300);
layer.hide();
}
});
});
</script>
親カテゴリと子カテゴリのアドレスやカテゴリ名を編集
以下の部分を編集します。
<li><a href=''>カテゴリ１</a>
<ul class="second-level">
<li><a href=''>カテゴリ1-1</a></li>
<li><a href=''>カテゴリ1-2</a></li>
<li><a href=''>カテゴリ1-3</a></li>
</ul>
</li>以下のコードの「''」の間にリンク先のアドレスを入れます。
<a href=''>
次に親カテゴリ名と小カテゴリ名を編集します。
あとはいらない部分を削除して終わりです！
その他幅などの変更は、CSSで組んだドロップダウンメニューとスライドメニューを両立させたレスポンシブなメニューの作り方【コピペでOK】 - Yukihy Lifeに詳しく書いてあります。
ゆきひーさん(id:ftmaccho)、シロマティさん(id:shiromatakumi)、ありがとうございました！
最初のほうでいいましたが、僕もこれで勉強中です。素人に優しいめっちゃわかりやすい本です！