ドロワーメニュー、または三本線の形状からハンバーガーメニューとも呼ばれている開閉式のボタン。当サイトでは常に右上に表示。
Movable Typeの公式テンプレートに標準装備されていた機能だが、パソコン表示時はカテゴリーがずらりと並ぶ仕様で、カテゴリー数が多いとメニューがごちゃごちゃになるのが難点であった。また、タブレットやスマートフォンだと三本線表示だが画像使用で、そもそも常時これでいいのだ。
というわけで、画像不使用、スタイルシートだけで実装。参考にしたのは以下サイト様。
テンプレート
三行目の<div id="menu">から最後から二行目の</div>がメニュー部分。大体こんな感じでheaderに収めてある。
<header> <h1><a href="<mt:BlogURL>" title="<mt:BlogName>"><mt:BlogName></a></h1> <div id="menu"> <input type="checkbox" id="menu-btn-check"> <label for="menu-btn-check" id="menu-btn"><span></span></label> <span id="menu-label">menu</span> <nav id="menu-content"> <ul> <mt:TopLevelCategories><mt:If tag="CategoryCount"> <li><a href="<mt:CategoryArchiveLink>"><mt:CategoryLabel></a></li> </mt:If></mt:TopLevelCategories> </ul> </nav> </div> </header>
checkboxは機能上必要なだけで、スタイルシートで非表示に。空の<span></span>で三本線を出力。「menu」の文字が不要ならば、その行は不要。menu-content内にカテゴリーリンクを収納。
スタイルシート
濃い背景色（灰色 #999999）のheaderにボタンという前提で配色して、大体こんな感じ。
#menu-btn{
cursor: pointer;
z-index: 90;
position: fixed;
display: flex;
top: 10px;
right: 20px;
height: 40px;
width: 40px;
justify-content: center;
align-items: center;
background-color: #f5f5f5;
border-radius: 5px;
}
#menu-btn span, #menu-btn span:before, #menu-btn span:after{
position: absolute;
display: block;
width: 24px;
height: 3px;
background-color: #999999;
border-radius: 3px;
content: '';
}
#menu-btn span:before{
bottom: 8px;
}
#menu-btn span:after{
top: 8px;
}
#menu-btn-check{
display: none;
}
#menu-btn-check:checked ~ #menu-btn span{
background-color: rgba(255, 255, 255, 0);
}
#menu-btn-check:checked ~ #menu-btn span::before{
bottom: 0;
transform: rotate(45deg);
}
#menu-btn-check:checked ~ #menu-btn span::after{
top: 0;
transform: rotate(-45deg);
}
#menu-label{
position: fixed;
top: 55px;
right: 20px;
color: #ffffff;
font-size: 0.9em;
}
#menu-content{
z-index: 80;
position: fixed;
top: 0;
right: 100%;
overflow: auto;
width: 400px;
max-height: 100%;
background-color: #ffffff;
opacity: 0.9;
padding: 30px 20px 3px 20px;
}
#menu-content ul li{
display: block;
padding: 3px;
border-bottom: solid 1px #cccccc;
font-size: 0.9em;
text-align: left;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-webkit-text-overflow: ellipsis;
}
#menu-content ul li a{
display: block;
}
#menu-btn-check:checked ~ #menu-content{
right: 0;
box-shadow: 0 0 7px 7px rgba(0, 0, 0, 0.16);
}
ボタンを開くと、三本線のうち一本を消し、二本をクロスさせて「×」印を描画するという仕組み。元ページの上に被せてあるのを示すため、カテゴリーリンクの背景色は半透明化してある。「z-index」の数値は適宜設定で。
カテゴリーリンク枠について、パソコンでは幅400px指定で右上にちんまり表示させているが、タブレット以下では画面幅いっぱいに表示されるよう設定。
@media(max-width:768px) {
#menu-content{
width: 100%;
}
}
パソコンなど大画面表示時。
タブレットやスマートフォンなど狭い画面での表示。
また、スマートフォン表示のみ、サイト名部分の上部ヘッダーを固定し、「menu」の文字を隠してある。
大体こんな感じ。
@media(max-width:480px) {
body{
padding-top: 60px;
}
header{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 60px;
padding: 14px 0px;
z-index: 1000;
}
#menu-label{
display: none;
}
}
Java Script（任意）
例えば、Aカテゴリーページを表示中にメニューを開き、カテゴリーリンクに載せてあるAカテゴリーへ移動する場合、つまり同ページなので移動になっていないので、カテゴリーリンクが画面に残ってしまう。「×」でメニューを閉じれば良いが、それを自動的に閉じたい場合はJava Scriptで対応。
以下を記したファイル「menu.js」を作成。既存のjsファイルに追記するも可。
$(function() {
$('#menu-content a').click(function() {
$('#menu-checkbox').removeAttr('checked').prop('checked', false).change();
});
});