ボタンをハンバーガーメニューにする

モバイルサイズのトグルメニューのボタンを、よく見かける3本線のハンバーガーメニューにデザインします。
今回はwebアイコンフォントのfontawesomeを使用して実現します。

– 完成図 –
ハンバーガーメニュー

なお基本のレイアウトは前回紹介したトグルメニューの作成方法の記事をそのまま引き継いでいますので、全体のソースコードはそちらをご確認ください。

headタグ内にfontawesomeのcdnを読み込んでアイコンフォントが使えるようにする。
fontawesome CDNのリンク
– HTML –

fontawesomeページ内でiconを「humburger」で検索する。
こちらのフォントが良さそうなので左下のiタグのソースをコピーする。

コピーしたiタグをHTMLのbuttonタグの中に貼り付ける。
– HTML –

アイコンを含んだボタンにスタイルを適用していきます。

– CSS –

① MENUの文字列を非表示にする
音声ブラウザを考慮してMENUの文字列が入ってるspanタグごと残しておく。
字下げを指定するtext-indentプロパティを利用して文字列を画面の外へ隠す。

② アイコンの色と大きさを変更する

③ ボタンのデザインを整える
※ボタンの表示位置に関してはこちらの記事で記しています
・内側の余白を調整する
・外枠をつける。
・背景色を指定する
・四隅を角丸にする
・カーソルを重ねた時に指のアイコンにする。

④ カーソルを重ねた時の色を変える
今回はopacityプロパティで値を0.8として半透明にしている。

⑤ Google Chromeでの閲覧時にクリックした時に表示される青色の枠線を削除する
※青枠が表示されている状態

ボタンに青枠が表示されている

Follow me!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください