某案件のため、(PC SPの切り替えで要素の移動が激しいソースだった、、、)時に作ったハンバーガーメニュー。作った日の備忘録。
ハンバーガーメニューのコーディングは昔から大嫌いです、、、がよく作らされます。
1.
まず外側の正方形を作る。今回は<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;
}
2.
[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;
}
3.
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);
}
4.
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;
}
5.
最後にJSのソースを記録しておきます。
display: noneで初めからナビゲーションは表示されていない。
だから$('#globalNav').hideはいらないと思う。
#btnをクリックするたびに 、、、
1. #humにclick クラスが付いたり外されたりのトグル、と
2. #globalNavがslideDownとslideUpのトグルが起きる。
これが前半。
globalNavのliを選択してクリックすると
1. #humのclick クラスが外される。
2.#globalNavがslideUpする。
これが後半。
<script>
$(function() {
$('#btn').on('click',function(){
$('#hum').toggleClass('click');
$('#globalNav').slideToggle(200);
return false;
});
$('#globalNav>li').click(function(){
$('#hum').removeClass('click');
$('#globalNav').slideUp(200);
});
});
</script>
6.
ちなみにHTMLは、、、
<!-- for SP only
------------------------------------------------------------>
<div class="sp right upperRight">
<!-- sp HumbergerMenu-->
<p id="btn" class="sp">
<span id="hum"></span>
</p>
<!-- btn -->
</div>
<!-- sp upperRight -->
<!-- SP globalMenu -->
<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>
<!-- end sp globalMenu -->
追記
header バーもposition: fixed;にして、（値はglobal Navと同じ値）すぐ下にあるbx-sliderとの間に白い隙間ができて時間をかけてしまった。
resetで img:vertical-align: bottom; としていたのが原因らしい。
img: vertical-align: baseline; にしたら解決した。
