ハンバーガーメニューを実装してみた

運営サイトにハンバーガーメニューを実装させてみました。

ゼロから作るスキルは無いので、参考になるサイトを探して、それをマネする形で導入です。

参考にしたサイト

saruwakakun.com

CSSだけで実装できるのが〇

実装したサイト

www.shiragazome-tori-tomento.net

スマホ表示にすると、サイドバーのメニューが最下部になるんですね。

グローバルメニューを導入するとしても横幅が足りませんし。

サイトの使い勝手を向上させたくて、いろいろ考えた結果、ハンバーガーメニューの導入となりました。

どう実装したか

自分のサイトに合わせてサルワカさんの記事のコードを元にカスタムします。

HTML

<div id="sidearea">
<div id="nav-drawer">
<input id="nav-input" type="checkbox" class="nav-unshown">
<label id="nav-open" for="nav-input"><span></span></label>
<label class="nav-unshown" id="nav-close" for="nav-input"></label>
<div id="nav-content">実装サイトのサイドバーのHTMLをそのまま内包</div>
</div>
</div>

サルワカさんのコードだとheader要素で囲んでますが、自分の場合はdivタグに新規のID要素を付与して囲みました。

そして、実装元のサイドバーのHTMLを ID属性「nav-content」内に記述します。

CSS

@media screen and (max-width:767px) {
#sidearea{
position:absolute;
top:0;
right:0;
}
#nav-drawer {
position: relative;
}
/*チェックボックス等は非表示に*/
.nav-unshown {
display:none;
}
/*アイコンのスペース*/
#nav-open {
display: inline-block;
width: 32px;
height: 40px;
vertical-align: middle;
background:#fff;
padding:6px;
}
/*ハンバーガーアイコンをCSSだけで表現*/
#nav-open span, #nav-open span:before, #nav-open span:after {
position: absolute;
height: 4px;/*線の太さ*/
width: 30px;/*長さ*/
border-radius: 3px;
background: #555;
display: block;
content: '';
cursor: pointer;
}
#nav-open span:before {
bottom: -8px;
}
#nav-open span:after {
bottom: -16px;
}
/*閉じる用の薄黒カバー*/
#nav-close {
display: none;/*はじめは隠しておく*/
position: fixed;
z-index: 99;
top: 0;/*全体に広がるように*/
left: 0;
width: 100%;
height: 100%;
background: black url("/img/baseline_cancel_white_18dp.png") no-repeat left top;
opacity: 0;
transition: .3s ease-in-out;
}
/*中身*/
#nav-content {
overflow: auto;
position: fixed;
top: 0;
right: 0;
z-index: 9999;/*最前面に*/
width: 90%;/*右側に隙間を作る(閉じるカバーを表示)*/
max-width: 220px;/*最大幅(調整してください)*/
height: 95%;
background: #fff;/*背景色*/
transition: .3s ease-in-out;/*滑らかに表示*/
-webkit-transform: translateX(215%);
transform: translateX(215%);/*左に隠しておく*/
}
/*チェックが入ったらもろもろ表示*/
#nav-input:checked ~ #nav-close {
display: block;/*カバーを表示*/
opacity: .5;
}
#nav-input:checked ~ #nav-content {
-webkit-transform: translateX(0%);
transform: translateX(0%);/*中身を表示(右へスライド)*/
box-shadow: 6px 0 25px rgba(0,0,0,.15);
}
}

ハンバーガーメニューの表示

ディスプレイの幅が767px以下になったら表示されます。ipadminiの縦表示(768px)より狭くなったらメニューを表示します。

ハンバーガーメニューの配置

sideareaセレクタで、positionプロパティを記述して右上に表示されるように絶対配置で指定します。

ハンバーガーメニューの大きさ

nav-openセレクタで、ハンバーガーメニューのアイコン表示のスペースを指定。運営サイトでは、サルワカさんのコードより大きめのピクセルを指定。

ハンバーガーアイコンの線の太さ

セレクタ「#nav-open span, #nav-open span:before, #nav-open span:after」にて指定します。ここも、サルワカさんのコードより大きい数値を指定。

ハンバーガーメニューの中身

nav-contentセレクタで指定します。widthプロパティはサイドバーの中身によって調整します。自分の場合は220pxで指定。

heightプロパティは、サルワカさんのコードのように100%が良いと思います。

ディスプレイサイズが小さいスマホの表示で、メニューが表示しきれない場合があるからです。

運営サイトはサイドメニューの縦幅が大きくないのでheightプロパティの値を90%にしました。

ハンバーガーメニューのスライド方向

こちらもnav-contentセレクタ内で指定します。

サルワカさんのコードを引用

-webkit-transform: translateX(-105%);
transform: translateX(-105%);/*左に隠しておく*/

運営サイトの場合

-webkit-transform: translateX(215%);
transform: translateX(215%);/*左に隠しておく*/

ディスプレイの左端を0として、

  • 左に隠すなら、-100%以上
  • 右に隠すなら、200%以上

の数値を指定します。運営サイトは右に隠したので後者です。

数値指定だけだと、右に隠しているのに左からハンバーガーメニューがスライドするかと思ったんですが、ちゃんと右からスライドしました。

ハンバーガーメニューを閉じる薄黒カバー

ハンバーガーメニューが展開した後の余白は薄黒カバーになるんですが、運営サイトの場合、閉じることが分かるようにアイコンを表示させました。

nav-closeセレクタ内のbackgroundプロパティにコードを追加しています。

background: black url("/img/baseline_cancel_white_18dp.png") no-repeat left top;

アイコンはこちらからダウンロードしました。

material.io

CSSの調整

スタイルシート内で指定する数値は実機の表示を見ながら設定しました。

実際に使ったのは、iphone4、iphone5、GalaxyS10(SC-03L)、VAIO Phone (VA-10J)、ipad mini5の5種類。

Chromeのデベロッパーツールで確認してもいいと思うんですけど、実機の動作でチェックしました。

iphone5で表示に問題がないかどうかが自分的な合格の基準です。

実装を終えて

運営サイトの元HTMLを変更せずに実装できたので良かったです。

CSSだけで実装できるのでサイト表示速度にも影響が少ないですし、運営サイトの使い勝手が向上したと思います。

コメント