簡単実装！スマホ用のハンバーガーメニューの作り方
ハンバーガメニューってGoogleで調べると今のところ検索上位に否定的な意見が出てますよね。
たしかにスマホサイトは出た時はただの三本線がメニューを広げるボタンって分かりづらかったと思いますが2017年になる頃にはスマホサイトに対するリテラシーが広がっていて使用に問題ないのではないでしょうか。
今回、簡易的サイトで作る用事があったのでメモ代わりに作り方を記したいと思います。
まずは完成系はこちら↓
まずは下記のようなhtmlとcssを用意しました。
HTML
<header> <div id="header-area"> <h1>◯◯◯◯</h1> <div class="logo"> <a href="toplink_1"><img width="320px" height="42px" src="" alt="ロゴ"></a> </div> <!-- 768px以上で表示されるエリア --> <nav class="button"> <ul> <li><a href="#">◯◯◯◯</a></li> <li><a href="#">◯◯◯◯</a></li> <li><a href="#">◯◯◯◯</a></li> </ul> </nav> <!-- 768px以下で表示されるエリア --> <div class="navOpen"><!-- メニューボタン --></div> <nav class="menu-sp"><!-- jqueryで非表示にする --> <ul> <li><a href="#">◯◯◯◯</a></li> <li><a href="#">◯◯◯◯</a></li> <li><a href="#">◯◯◯◯</a></li> <li><a href="#">◯◯◯◯</a></li> <li><a href="#">◯◯◯◯</a></li> <li><a href="#">◯◯◯◯</a></li> <li><a href="#">◯◯◯◯</a></li> <li><a href="#">◯◯◯◯</a></li> <li><a href="#">◯◯◯◯</a></li> <li><a href="#">◯◯◯◯</a></li> </ul> </nav> </div> </header>
CSS
ol, ul {
list-style:none;
}
img {
max-width: 100%;
border: none;
vertical-align: bottom;
}
/*ヘッダーエリア*/
header {
background-color: #FFF;
/* box-shadow */
box-shadow:rgba(138, 138, 138, 0.2) 1px 1px 4px 0px;
-webkit-box-shadow:rgba(138, 138, 138, 0.2) 1px 1px 4px 0px;
-moz-box-shadow:rgba(138, 138, 138, 0.2) 1px 1px 4px 0px;
}
header:after {
content: '';
display: table;
clear: both;
}
header h1 {
padding-top: 5px;
font-weight: normal;
font-size: 11px;
padding-left: 2%;
padding-right: 2%;
}
header .logo {
margin-left: 2%;
margin-top: 10px;
margin-bottom: 10px;
width: 76%;
float: left;
}
header .button {
display: none;
}
/*スマホ用メニューボタン*/
header .navOpen {
width: 36px;
height: 40px;
float: right;
margin-top: 7px;
margin-right: 5%;
margin-bottom: 5px;
cursor: pointer;
background:url(../images/menu.png) no-repeat 0 0;
background-size: 72px;
}
/*スマホ用メニュー閉じるボタン*/
header .navClose {
background-position: -36px 0; /*ボタンの画像切り替え*/
}
header .menu-sp {
clear: both;
position: relative;
}
header .menu-sp ul {
width: 100%;
position: absolute;
top: 0px;
background-color: rgba(255, 255, 255, 0.9) ;
border-bottom: 3px #ccc solid;
}
header .menu-sp li {
line-height: 1.4;
border-top: 1px #ccc solid;
}
header .menu-sp a {
color: #777;
padding-left: 5%;
padding-right: 5%;
padding-top: 10px;
padding-bottom: 10px;
display: block;
}
/*/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_
メディアクエリによる切り替え
/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_*/
@media only screen and (min-width: 768px) {
/* ヘッダーエリア*/
header {
min-width: 1000px;
}
header #header-area {
width: 1000px;
margin-left: auto;
margin-right: auto;
}
header h1 {
text-align: right;
}
header .logo {
width: auto;
}
/*PC用ヘッダーボタン*/
header .button {
float: right;
display: block;
margin-top: 20px;
}
header .button ul {
}
header .button li {
float: right;
font-size: 12px;
line-height: 1.4;
}
header .button a {
margin-left: 10px;
margin-right: 10px;
padding-top: 5px;
padding-bottom: 7px;
padding-left: 17px;
padding-right: 10px;
display: inline-block;
border-radius: 5px;
border: 1px solid #999;
color: #666;
background: url(../images/arrow1.png) no-repeat 6px center;
background-size: 6px;
}
header .button a:hover {
opacity: 0.7;
}
/*スマホ用メニューボタン非表示*/
header .navOpen {
display: none;
}
}
一番肝心なのは
<div class=”navOpen”></div>
<nav class=”menu-sp”>
<ul>
<!– 省略 –>
</ul>
</nav>
ここの部分ですね。
ボタンにしたい場所にclass=”navOpen”と名付けてcssに下記のコードを書きましょう。
/*スマホ用メニューボタン*/
header .navOpen {
width: 36px;
height: 40px;
float: right;
margin-top: 7px;
margin-right: 5%;
margin-bottom: 5px;
cursor: pointer;
background:url(../images/menu.png) no-repeat 0 0;
background-size: 72px; ←スマホ対応の為オリジナルの画像の二分の一のサイズを指定
}
次にメニューボタンを押したら画像が切り替わるように以下のコードを追加します。
/*スマホ用メニュー閉じるボタン*/
header .navClose {
background-position: -36px 0;
}
実験用に画像はこちらを用意したのでimagesフォルダを作って入れてください。
そして、htmlのhead内に以下のコードを加えてください。
javascript
//<>内に貼り付け
//今回はjquery-3.1.1を使用していますがプロジェクトに合わせてお好みのバージョンを使用。
<script
src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous">
</script>
<script type="text/javascript">
$(function() {
var menu = $('.menu-sp ul'); //ボタンを押して登場させたいクラスを変数にする
menu.css('display','none'); //変数にしたクラスを非表示
$('.navOpen').on('click', function() { //ボタンにするクラスを指定
menu.slideToggle(500); //スライドして出てくる時間を指定
$(this).toggleClass('navClose'); //クリックした後にクラス名を追加する
});
});
<script>
これで画像は綺麗に切り替わると思います。
width:36pxと指定してるのもbackground-position: -36px 0;と指定してるのもこの為ですね。
あとはスライドして出てくるメニューをお好みで装飾するだけです。
今回は下記のようにしています。
ここはサイトデザインに合わせて変えてみてください。
header .menu-sp {
clear: both;
position: relative;
}
header .menu-sp ul {
width: 100%;
position: absolute;
top: 0px;
background-color: rgba(255, 255, 255, 0.9) ;
border-bottom: 3px #ccc solid;
}
header .menu-sp li {
line-height: 1.4;
border-top: 1px #ccc solid;
}
header .menu-sp a {
color: #777;
padding-left: 5%;
padding-right: 5%;
padding-top: 10px;
padding-bottom: 10px;
display: block;
}
以上、ハンバーガーメニューの作り方でした。
この記事をシェアする
