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

ドロワーメニュー、または三本線の形状からハンバーガーメニューとも呼ばれている開閉式のボタン。

Movable Typeの公式テンプレートに標準装備されていた機能だが、三本線表示が画像だったのを、スタイルシートだけで実装。

• 参考：JavaScript不要！CSSだけでハンバーガーメニューを実装する方法 - 株式会社アーティス

当サイトでは、以下の例より色などの変更もあるが、右上に表示中。

テンプレート

三行目の<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>
<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-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-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%;
   }
}

パソコンなど大画面表示時。

タブレットやスマートフォンなど狭い画面での表示。

大体こんな感じ。

@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;
   }
}