チェックボックスとCSSだけでハンバーガーメニューを実装する ボタン編2

前回の問題点

実は前回のCSSでは元々2本で作ってたので、真ん中のボーダーが被っているため計算が複雑という問題点がありました…
なので今回はその問題を解決しようと思います。

ハンバーガーメニューの作成

今回の考え方

前回は２つのボックスの並べ方を調節してハンバーガーメニューを作成しましたが、今回は具材をパンで挟む考えかたで作りたいと思います。

HTML

ここは前回の投稿と同じです。

チェックボックスの削除

ここも前回の投稿と同じです。

三本線を作る

さあここから変わっていきますよー！
考え方は真ん中にある具材(before)をパン(after)で挟むイメージです。

.menuopen:before,.menuopen:after{  
    position: absolute;
    content: "";
    display: block;
    width: 40px;
    border-color: black;
    border-top-style: solid;
    border-bottom-style: solid;
}
.menuopen:before{
    top: 4px;
    height: 32px;
    border-top-width: 4px;
    border-bottom-width: 4px;
    border-color: #d9a600;
}
.menuopen:after{    
    top: 22px;
    height: 0;
    border-top-width: 2px;
    border-bottom-width: 2px;
    border-top-color: red;
    border-bottom-color: brown;
}

色合いがあんまりハンバーガーっぽくないのはほっといって…
完成イメージがこんな感じですね。

閉じるボタンを作る

こっちは前回からあまり変わらず、違うのはボーダーの幅だけですね。

.menuopen:checked:before, .menuopen:checked:after {
    top: 22px;
    height: 0;
    border-top-width: 2px;
    border-bottom-width: 2px;
    -webkit-transition: 0.5s transform 0.5s, 0.04s border-top-width 0.16s, 0.04s border-bottom-width 0.16s, 0.16s height 0s, 0.16s top 0s;
    -moz-transition: 0.5s transform 0.5s, 0.04s border-top-width 0.16s, 0.04s border-bottom-width 0.16s, 0.16s height 0s, 0.16s top 0s;
    transition: 0.5s transform 0.5s, 0.04s border-top-width 0.16s, 0.04s border-bottom-width 0.16s, 0.16s height 0s, 0.16s top 0s;
}

.menuopen:checked:before {
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    transform: rotate(135deg)
}

.menuopen:checked:after {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg)
}

完成イメージはこんな感じです。
拡大しまくっているので白い線が入ってますが、通常倍率ではでてこないので安心してください(^^;;

アニメーションの作成

前回は高さ,位置,回転で実装していましたが、今回はボーダーの幅も変わるので少し注意が必要です。
開くときの設定はこんな感じ

.menuopen:checked:before, .menuopen:checked:after {
    -webkit-transition: 0.5s transform 0.5s, 0.04s border-top-width 0.16s, 0.04s border-bottom-width 0.16s, 0.16s height 0s, 0.16s top 0s;
    -moz-transition: 0.5s transform 0.5s, 0.04s border-top-width 0.16s, 0.04s border-bottom-width 0.16s, 0.16s height 0s, 0.16s top 0s;
    transition: 0.5s transform 0.5s, 0.04s border-top-width 0.16s, 0.04s border-bottom-width 0.16s, 0.16s height 0s, 0.16s top 0s;
}

高さと位置が変わってからボーダーの幅を変えるので、前回のようなタイミングのズレは発生しません。
ちなみに、閉じるときはこんな感じです

.menuopen:before,.menuopen:after{  
    -webkit-transition: 0.5s transform 0s, 0.04s border-top-width 0.8s, 0.04s border-bottom-width 0.8s, 0.16s height 0.84s, 0.16s top 0.84s;
    -moz-transition: 0.5s transform 0s, 0.04s border-top-width 0.8s, 0.04s border-bottom-width 0.8s, 0.16s height 0.84s, 0.16s top 0.84s;
    transition: 0.5s transform 0s, 0.04s border-top-width 0.8s, 0.04s border-bottom-width 0.8s, 0.16s height 0.84s, 0.16s top 0.84s;
}

下のgifが完成メージです。

コードまとめ

んーやっぱりCSSで書くと結構長くなるなー
次回からSCSS記法で書いていこうと思います。
実はこのハンバーガーメニューも問題点がありまして、線の角を丸くすることができません。
次回の投稿で角丸に対応するのでお楽しみに!

.menuopen{
    position: absolute;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-width: 0;
    width: 0;
    height: 0;
}
.menuopen:focus{outline:0;}
.menuopen:before,.menuopen:after{  
    position: absolute;
    content: "";
    display: block;
    width: 40px;
    border-top-style: solid;
    border-bottom-style: solid;
    -webkit-transition: 0.5s transform 0s, 0.04s border-top-width 0.8s, 0.04s border-bottom-width 0.8s, 0.16s height 0.84s, 0.16s top 0.84s;
    -moz-transition: 0.5s transform 0s, 0.04s border-top-width 0.8s, 0.04s border-bottom-width 0.8s, 0.16s height 0.84s, 0.16s top 0.84s;
    transition: 0.5s transform 0s, 0.04s border-top-width 0.8s, 0.04s border-bottom-width 0.8s, 0.16s height 0.84s, 0.16s top 0.84s;
}
.menuopen:before{
    top: 4px;
    height: 32px;
    border-top-width: 4px;
    border-bottom-width: 4px;
    border-color: #d9a600;
}
.menuopen:after{    
    top: 22px;
    height: 0;
    border-top-width: 2px;
    border-bottom-width: 2px;
    border-top-color: red;
    border-bottom-color: brown;
}
.menuopen:checked:before, .menuopen:checked:after {
    top: 22px;
    height: 0;
    border-top-width: 2px;
    border-bottom-width: 2px;
    -webkit-transition: 0.5s transform 0.5s, 0.04s border-top-width 0.16s, 0.04s border-bottom-width 0.16s, 0.16s height 0s, 0.16s top 0s;
    -moz-transition: 0.5s transform 0.5s, 0.04s border-top-width 0.16s, 0.04s border-bottom-width 0.16s, 0.16s height 0s, 0.16s top 0s;
    transition: 0.5s transform 0.5s, 0.04s border-top-width 0.16s, 0.04s border-bottom-width 0.16s, 0.16s height 0s, 0.16s top 0s;
}

.menuopen:checked:before {
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    transform: rotate(135deg)
}

.menuopen:checked:after {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg)
}