3本バー（グローバルナビのヤツ）の自分流実装

動機

3本バーで呼び方があっているのかよくわからない。

の棒三つの部分みたいなやつ。主にメニューを表示するトリガと使用されることが多いやつです。
起源はよくわからないのだけど、bootstrapが出てきたあたりでかなり使われるようになり今となっては別の表現を選ぶにはそれなりの理由がいるくらいにスタンダードになってしまった。
自分用スタイルガイドっぽいものを作っていて、3本バーも必須の表現だと思うので実装しなければならない。

実装

手っ取り早く確認したい方は
CodePen
をどうぞ

↑こういうのができます。

css

.threebar{
    position:relative;
    padding-top:100%;
    display:block;
    background-color:black;
}
.threebar__body{
    content:"";
    display:block;
    position:absolute;
    top:11.67%;
    left:0;
    width:100%;
    height:10%;
    background-color:white;
    border-radius:0.1em;
}
.threebar__body::before{
    content:"";
    display:block;
    position:absolute;
    top:333.33%;
    left:0;
    width:100%;
    height:100%;
    background-color:white;
    border-radius:0.1em;
}
.threebar__body::after{
    content:"";
    display:block;
    position:absolute;
    top:666.66%;
    left:0;
    width:100%;
    height:100%;
    background-color:white;
    border-radius:0.1em;
}

html

<div style="width:50px;padding:10px;background-color: black;">
  <div class="threebar">
      <a class="threebar__body" href="#"></a>
    </div>
</div>

使い方

外側のdivにwidthを設定して、内側に.threebar .threebar__body を配置する。
border角の丸みを調整したいときは外側のdivのfont-sizeを適当にゴニョってくれい。
外側のdivの幅は10で割り切れるpxを指定したほうが線の太さが綺麗になります。

説明

この3本バーの表現はいろんな実装方法があって、span3つにborderで表現しているパターンをよく見かけた気がするけど今回はその方法は使っていない。
まず、10%の高さのblock要素の背景色を設定し、バーとしている。
これだと1本線しか引けないため:before、:afterでも同じような要素を作成してabsoluteで配置する感じ。
%の指定が謎だと思うけど
threebarのpadding-top:100%は正方形にするおまじないで
:before,:after の top が100%超えとるやんけっていうのは、
親要素の高さが10%なので祖父母要素の大きさに対応するためには10倍する必要があったためです。

font-sizeを調整しないと角の丸みがうまく出ないのは理由があって、border-radiusに%指定すると楕円っぽいカーブになってしまうため、何かしら違う方法で値を設定してあげる必要がある。
じゃあ、font-sizeは親から引き継ぐんでemを利用すればいいんじゃね？ってことでfont-sizeの調整で対応することにしてます。

まとめ

とりあえずできた。

この方法だといろんなサイズに対する3本バーをいろいろ書かなくていいかな（100px ｘ 100pxの3本バーとかもできる）とは思うんだけど、欠点についてはまだ評価できてない。

一応IE11でも動きそう。