webデザイナーとshop運営をしています。
このブログでは主に「日々の制作過程」や、「勉強のお話」。
ときどき子育て生活のことを書いてます。
WordPress

ハンバーガーメニュー

ただのお母さん
ただのお母さん
今日のお勉強はハンバーガーメニュー。

後から見返せるように、基本的なものを書き留めます。

左にロゴマーク、右にメニューがあるバージョン

【HTML】

<header class="l-header">
<div class="l-wrapper">
<h1 class="l-header-title">
<span class="screen-reader-text" lang="en">Green</span>
<a href="./">
<img src="images/logo.png" srcset="images/logo.png 1x, images/logo@2x.png 2x"  alt="Green">
</a>
</h1>

<nav class="l-header-nav">
<h2 class="screen-reader-text">サイト内メニュー</h2>
<button type="button" class="button-hamburger" aria-controls="global-nav" aria-expanded="false">
<span class="hamburger">
<span class="screen-reader-text">メニュー開閉</span>
</span>
</button>
<ul id="global-nav" class="l-global-nav" lang="en">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Company</a></li>
<li><a href="#">Contact</a></li>
<ul>
</nav>

</div>
<!--/ .l-wrapper -->
</header>
...

※nav、asideはタイトル省略可。

【CSS】

.l-wrapper {
width: 95%;
max-width: 1200px;
margin: 0 auto;
overflow: hidden;
}

/* header */
.l-header {
position: fixed;
top: 0;
left: 0;
right: 0;
padding: .75em 0;
border-bottom: 1px solid #e0e0e0;
background-color: #fff;
// rightやleftでドロワー表示をしてもいいけど、IE10移行対応であれば
アニメーションを使った方が滑らかな動きをする
transition: transform .3s ease-in-out; /* IE9非対応 */
transform: translateX(100%);
// ベンダープレフィックスがないと動かないものもある
}

.l-header-title {
float: left;
}

.l-header-nav {
float: right;
}

@media screen and (min-width:768px) {
.l-header {
padding: 1.5em 0;
}
}
@media screen and (min-width:1024px) {
.l-header {
padding: 1.75em 0;
}
}

/* gloval nav */
.l-global-nav {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
// 余白
width: 100%;(なくてもいい)
height: 120%;
// 背景

}

.l-global-nav li a {
display: block;(横幅めいいっぱいタップ)
color: #263238;(デフォルトがaに直接青になれと命令してるから)
text-decoration: none;
// 余白とか
}

.l-global-nav li a:hover {
// 背景色
// 文字色
}

@media screen and (min-width: 768px) {
.l-globalnav {
position: static;(fixedをとる staticは初期値)
// 余白とったり、背景色をtransparent;←#fffだと、navの背景色を変えたとき、ここも変えないといけなくなる
transform: translateX(0);
}
.l-globalnav li {
float: left;
}
.l-globalnav li + li {
margin-left: 1em;
}
.l-global-nav li a {
// 余白調整や文字色など
}

/* 
  module
-------------------------------------------*/
/* button */
.button-humburger {
position: absolute;
top: 0;
bottom: 0;
right: 2.5%;(relativeがなく、外に飛び出ている。l-wrapperのwidthに合わせて揃えてしまう。片側2.5%)
width: 24px;
height: 24px;
margin: auto 0;(計算してもいいが、ヘッダーのheightもこの要素のheightも決まっているのでmarginで指定できる)
border: 0;(装飾を消す)
outline: 0;(装飾を消す)
background-color: transparent;(装飾を消す)
cursor: pointer;(装飾を消す)
appearance:none;(装飾を消す)←ベンダープレ必要
}

.hamburger {
position: absolute;
top:0;
left: 0;
right: 0;
bottom: 0;
display: block; (spanはインラインで幅と高さが持てない)
width: 18px;
height: 2px;
margin: auto;
border-radius: 4px;
background-color: #    ;
}

.hamburger: before,
.hamberger after {
content: '';
display; block;
position: absolute;
width: 100%;
height: 100%
border-radius: 4px;
background-color: inherit;(継承)
}
.hamburger: before {
top: -5px;
}
.hamburger: after {
top: 5px;
}

@media screen and (min-width:768px) {
.button-humburger {
display: none;
}
}

position absoluteやfixed 横幅忘れる
left:0 right:0 付けることで幅を教えることができる。
(幅100%と違う。)

ハンバーガーの理屈

buttonとspanが必要。
buttonは押せる範囲(正方形のところ)
中のspanが3本線真ん中。
押せる範囲のwidthとheightが決まっていて、
spanのwidthとheightも決まっている場合。
positionとmargin:auto;でど真ん中に設置できる。
上下の線はspan擬似要素,topで調整する。