Humberger Menu 自己流備忘録

某案件のため、(PC　SPの切り替えで要素の移動が激しいソースだった、、、)時に作ったハンバーガーメニュー。作った日の備忘録。

ハンバーガーメニューのコーディングは昔から大嫌いです、、、がよく作らされます。

まず外側の正方形を作る。今回は<p> id="btn"

<a>が付いていないので、cursor: pointer;を忘れずに。

3本線の位置指定のためにposition: relative;も忘れずに。

header #btn{
width: 36px;
height: 36px;
border: 2px solid #91be1e;
border-radius: 4px;
position: relative;
cursor: pointer;
}

[1]で作ったp要素の内側に <span>　id="hum"を作る。

これは三本のうちの真ん中の横棒。

一番上は:before

一番下は:afterで作る。

今回は height を指定せず、border で線幅を決定してみました。

こうしておくと上下の線の位置指定が若干楽かもしれない。（真ん中に対して線対称にするには:beforeのtopと:afterのbottomの値が等しくなるから）

線幅は上下のみ（線の厚みだけ）で、左右はいらないのでborder-width: 2px 0; と指定。

このようにして線幅4pxの横線を作ました。

header p#btn>span#hum{
display: block;
width: 30px;
height: 0px;
border: solid red;
border-width: 2px 0;
border-radius: 2px;
position: absolute;
top:0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
transition: 0.2s;
}
header p#btn>span#hum:before{
display: block;
content: "";
width: 30px;
height: 0px;
border: solid red;
border-width: 2px 0;
border-radius: 2px;
position: absolute;
top:-18px;
bottom: 0;
left: 0;
margin: auto;
transition: 0.2s;
}
header p#btn>#hum:after{
isplay: block;
content: "";
width: 30px;
height: 0px;
border: solid red;
border-width: 2px 0;
border-radius: 2px;
position: absolute;
top:0;
right: 0;
bottom: -18px;
left: 0;
margin: auto;
transition: 0.2s;
}

jqueryで

$('#btn').on('click',function(){
$('#hum').toggleClass('click');

と「.click」クラスを付与するので、以下のように記述。

このとき上の「赤」と「下」の青が一致していないとうまく動きません。

セレクトの書き方を共通にしておくこと。（ロスタイム15分、、、）

header p#btn>#hum.click {
border-color: white;
}
header p#btn>#hum.click:before {
top:0;
transform: rotate(45deg);
}
header p#btn>#hum.click:after {
bottom: 0px;
transform: rotate(135deg);
}

globalNavは最初、見えないようにしておくので　display: none;

headerバーの高さ分だけ下に表示したいので、position: fixedで　top :(header barの高さの)で指定する。

#globalNav{
display: none;
width: 100%;
overflow: hidden;
position: fixed;
top:72px;
left: 0;
right: 0;
background-color: #fff;
z-index: 100;
}

最後にJSのソースを記録しておきます。

display: noneで初めからナビゲーションは表示されていない。

だから$('#globalNav').hideはいらないと思う。

#btnをクリックするたびに、、、

1. #humにclick クラスが付いたり外されたりのトグル、と

2. #globalNavがslideDownとslideUpのトグルが起きる。

これが前半。

globalNavのliを選択してクリックすると

1. #humのclick クラスが外される。

2.#globalNavがslideUpする。

これが後半。

ちなみにHTMLは、、、

<div class="sp right upperRight">

<p id="btn" class="sp">
<span id="hum"></span>
</p>

</div>

<ul id="globalNav" class="sp">
<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>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>