CSSのみで背景透過のハンバーガーアイコンを作ってみました

　以前、CSSのみでハンバーガーアイコンを作成したという記事を書きました。

　これは枠ありで背景色を自分で変えることが出来るというものでした。

　今回は上の画像のように枠を無くして背景を透明にし、どんな背景色や背景画像の上に表示しても馴染むようなものを作成してみました。

背景透過のハンバーガーアイコン作成

HTML

　以前紹介したドロップダウンメニューの命令も一緒に書きました。

　ドロップダウンメニューの解説は下の記事に書いたので見ていただければと思います。

　注意：このドロップダウンメニューはページ上部（ヘッダー部分）でしか正常に動作しないので悪しからず。

　1～10行目までがハンバーガーアイコン部分、11行目から下はドロップダウンメニューの命令になっています。

CSS

　46行目までがハンバーガーアイコンのスタイル、そこから下がドロップダウンメニューのスタイルの命令になっています。

　7・8行目でハンバーガーアイコンのサイズ変更が可能です。

　幅の数値はいくつでも問題ないですが、高さに関しては少し注意が必要。

　今回作ったハンバーガーアイコンは5本の線が均等に並んでいる状態なので、高さは5で割り切れる数値にしておく必要があります。

　上の画像だと青、グレー、青、グレー、青で5本ということです。（グレーの部分は実際には透明色）

　高さを変更した場合は16行目を「高さ÷5」の数値、23行目を「高さ÷5×2」の数値に変更します。

　9行目の「rgba(255,0,0,0.0)」は背景を透過させる命令です。

　16行目で三本線の色を変更することが出来ます。

応用編

　前回紹介したヘッダーにアイコンや画像等を重ねて表示する方法と組み合わせて使うことが出来ます。

　↑今回のHTMLコードの1～10行目までを上の記事で紹介したもので囲むことで、ハンバーガーアイコンをヘッダーの横に設置することが可能です。