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

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

今回の投稿では単純にハンバーガーメニューのボタンを作成しようと思います
こんな感じのやつですね

まずはHTML

HTMLはこれだけです。
<input type="checkbox" class="menuopen">

　チェックボックスを消す

ハンバーガーメニューにしたいのでデフォルトのチェックボックスは消します。

.menuopen {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-width: 0;
}

iOSの場合、ボーダーを消さないとしつこく生き残るのでご注意ください(多分他のreset.cssとかで消してると思うけど)
…でここから更に注意点がひとつ
この状態だと確かに一見チェックボックスは見えませんが、ボックスがあるはずのところをiOSでタップするとチェックマークの黒い点が出てきます。それでは色々面倒なのでこの点も消します。

.menuopen {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-width: 0;
    width: 0;
    height: 0;
}

縦横共に0を指定することで完全に消えました。

投稿した後で気づいたのですが、このままではAndroidで見た時にアウトラインが生成されます。
なのでフォーカス時にアウトラインが生成されないように以下のCSSを追記します

.menuopen:focus{outline:0;}

3本線を作る

作り方は簡単!
擬似要素(before,after)に上下のボーダーを付けるだけです。
今回は縦横40pxぐらいで作りました。
次からの説明を楽にするためボーダーの色を赤と青で分けてみました。

.menuopen{position:absolute;}
.menuopen:before,.menuopen:after{  
    position: absolute;
    content: "";
    display: block;
    height: 12px;
    width: 40px;
    border-top-style: solid;
    border-bottom-style: solid;
}
.menuopen:before{
    top: 4px;
    border-top-width: 4px;
    border-bottom-width: 2px;
    border-color: red;
}
.menuopen:after{    
    top: 22px;
    border-top-width: 2px;
    border-bottom-width: 4px;
    border-color: blue;
}

真ん中の線は二つの擬似要素のボーダーが触れ合うことで表現します。

閉じるボタンを作る

先ほどのハンバーガを変形させて（CSSの上書きで）閉じるボタンを作ります。
以下のコードで擬似要素の高さをなくし、位置を同じ位置にし、回転させてXを作ります

.menuopen:checked:before, .menuopen:checked:after {
    top: 20px;
    height: 0;
}

.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)
}

これでチェックを入れると閉じるボタンを作れるようになりました。

アニメーションを加える

お待たせいたしました！あとはアニメーションを加えれば完成ですね。
ではまずは展開時のアニメーションを展開後のcssに書きます
これはメニューの開閉でアニメーションが2つ必要であり、通常時の方に書いたアニメーションは展開時にもう一つのアニメーションで消されるからです。

.menuopen:checked:before, .menuopen:checked:after {
    -webkit-transition: 0.5s transform 0.5s, 0.2s height 0s, 0.25s top 0s;
    -moz-transition: 0.5s transform 0.5s, 0.2s height 0s, 0.25s top 0s;
    transition: 0.5s transform 0.5s, 0.2s height 0s, 0.25s top 0s;
}

解説すると最初に高さと位置の調節を0.25秒間で行います。二つの秒数が異なるのは、なんとなくです。そこらへんを細かく指定するとなると、色々面倒なのでここでは省略します。あとは完全に重なってから少し時間を空けて回転させてあげれば完成です。
メニューを閉じる時は先ほどの逆になるので
.menuopen:before,.menuopen:after{
-webkit-transition: 0.5s transform 0s, 0.2s height 0.5s, 0.25s top 0.5s;
-moz-transition: 0.5s transform 0s, 0.2s height 0.5s, 0.25s top 0.5s;
transition: 0.5s transform 0s, 0.2s height 0.5s, 0.25s top 0.5s;
}

このような感じになります。
基本的に実行タイミングが変わるだけですね(^^;;

まとめ

今回のコードをまとめるとこうなります

.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;
    height: 12px;
    width: 40px;
    border-color: black;
    border-top-style: solid;
    border-bottom-style: solid;
    -webkit-transition: 0.5s transform 0s, 0.2s height 0.5s, 0.25s top 0.5s;
    -moz-transition: 0.5s transform 0s, 0.2s height 0.5s, 0.25s top 0.5s;
    transition: 0.5s transform 0s, 0.2s height 0.5s, 0.25s top 0.5s;
}
.menuopen:before{
    top: 4px;
    border-top-width: 4px;
    border-bottom-width: 2px;
}
.menuopen:after{    
    top: 22px;
    border-top-width: 2px;
    border-bottom-width: 4px;
}
.menuopen:checked:before, .menuopen:checked:after {
    top: 20px;
    height: 0;
    -webkit-transition: 0.5s transform 0.5s, 0.2s height 0s, 0.25s top 0s;
    -moz-transition: 0.5s transform 0.5s, 0.2s height 0s, 0.25s top 0s;
    transition: 0.5s transform 0.5s, 0.2s height 0s, 0.25s 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)
}