開閉式メニューをCSSのみで作る

ドロワーメニュー、または三本線の形状からハンバーガーメニューとも呼ばれている開閉式のボタン。当サイトでは常に右上に表示。

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();
   });
});

テンプレート

スタイルシート

Java Script（任意）

recommend