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

角丸に対応したハンバーガーメニュー

前回,前々回ではborder-radiusを自由に使えないため、3本全てが角丸になったハンバーガーメニューを作ることができませんでした。なので今回は試行錯誤の末たどり着いた解決策をご紹介します。

影を使って実装してみる

某バスケット漫画に出てくる光と影って表現を参考に…
影が主役でもいいじゃないということで作っていこうと思います。
あと、

HTML

ここは前々回の投稿と同じにします。

チェックボックスの削除

ここもとりあえず前々回の投稿と同じにしておきましょう。

影の力を借りて三本線を作る

前2回ではボーダーを使っていましたが、今回は使いません。

.menuopen:before,.menuopen:after{  
    position: absolute;
    content: "";
    display: block;
    width: 40px;
    height: 4px;
    background: black;
    border-radius: 2px;
}
.menuopen:before{
    top: 0;
}
.menuopen:after{    
    top: 18px;
    box-shadow: 0px 18px 0px black;
}

かなりシンプルになってますね、今回はボーダーの力に頼らずに背景と影で作る方式に変えてみました。

閉じるボタンを作る

こちらもちょっとだけ短くなっています

.menuopen:checked:before, .menuopen:checked:after {
    top: 20px;
    box-shadow: 0px 0px 0px black;
}

.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:before,.menuopen:after{  
    -webkit-transition: 0.5s transform 0s, 0.2s top 0.5s,0.2s box-shadow 0.5s;
    -moz-transition: 0.5s transform 0s, 0.2s top 0.5s,0.2s box-shadow 0.5s;
    transition: 0.5s transform 0s, 0.2s top 0.5s,0.2s box-shadow 0.5s;
}
.menuopen:checked:before, .menuopen:checked:after {
    -webkit-transition: 0.5s transform 0.5s, 0.2s top 0s,0.2s box-shadow 0s;
    -moz-transition: 0.5s transform 0.5s, 0.2s top 0s,0.2s box-shadow 0s;
    transition: 0.5s transform 0.5s, 0.2s top 0s,0.2s box-shadow 0s;
}

もう解説もいらないレベルですね

メニューが開閉しない問題

メニューの開閉を上の2本以外でやろうと思っても動きません。
前までのものは背景が透明なだけで線と線の間にもちゃんと背景があったのですが、今回はオブジェクトと影がつながっていないのでクリックしても反応できないのです。
これまでも閉じるボタンで同様のバグは生まれますが正直指でタップすればわからない程度だったので気づく人も少なく…ないかもしれませんね。

メニューの開閉がうまくいかない解決策

要は選択可能な範囲を縦横40pxで固定してあげればいいのでlabelタグを使えば確かに簡単に解決できます。ですが、それではなんか負けた気がするのでCSSで解決します。

そもそもなぜinput要素の縦横幅を0にしないといけないのか？
それは前々回にあなたが言ったことでしょうと

この状態だと確かに一見チェックボックスは見えませんが、ボックスがあるはずのところをiOSでタップするとチェックマークの黒い点が出てきます。それでは色々面倒なのでこの点も消します。

こういうことでしたよね
ということは縦横サイズを変えずに黒い点を消せば解決可能ということになります。
黒い点はなぜ出てくるのか…

どうやら黒い点は背景色として出てくるらしく、背景をなくすと消えることが判明!
チェックボックスを消すCSSに間違いがあることが判明したのでチェックボックスを消すCSSを書き換えます。

.menuopen{
position: absolute;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-width: 0;
    width: 40px;
    height: 40px;
    background: none;
}
.menuopen:focus{outline:0;}

これでメニューの開閉問題も解決しました。

まとめ

今回のCSSをまとめるとこんな感じになります

.menuopen{
    position: absolute;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-width: 0;
    width: 40px;
    height: 40px;
    background: none;
}
.menuopen:focus{outline:0;}
.menuopen:before,.menuopen:after{  
    position: absolute;
    content: "";
    display: block;
    width: 40px;
    height: 4px;
    background: black;
    border-radius: 2px;
    -webkit-transition: 0.5s transform 0s, 0.2s top 0.5s,0.2s box-shadow 0.5s;
    -moz-transition: 0.5s transform 0s, 0.2s top 0.5s,0.2s box-shadow 0.5s;
    transition: 0.5s transform 0s, 0.2s top 0.5s,0.2s box-shadow 0.5s;
}
.menuopen:before{
    top: 0;
}
.menuopen:after{    
    top: 18px;
    box-shadow: 0px 18px 0px black;
}
.menuopen:checked:before, .menuopen:checked:after {
    top: 20px;
    box-shadow: 0px 0px 0px black;
    -webkit-transition: 0.5s transform 0.5s, 0.2s top 0s,0.2s box-shadow 0s;
    -moz-transition: 0.5s transform 0.5s, 0.2s top 0s,0.2s box-shadow 0s;
    transition: 0.5s transform 0.5s, 0.2s top 0s,0.2s box-shadow 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)
}