webかたつむり ウェブデザインを勉強中 ウェブ初心者のおぼえがき

webかたつむり

ウェブデザインを勉強中

Humberger Menu 自己流備忘録

某案件のため、(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; にしたら解決した。