ボタンをハンバーガーメニューにする
モバイルサイズのトグルメニューのボタンを、よく見かける３本線のハンバーガーメニューにデザインします。
今回はwebアイコンフォントのfontawesomeを使用して実現します。
– 完成図 –
なお基本のレイアウトは前回紹介したトグルメニューの作成方法の記事をそのまま引き継いでいますので、全体のソースコードはそちらをご確認ください。
headタグ内にfontawesomeのcdnを読み込んでアイコンフォントが使えるようにする。
fontawesome CDNのリンク
– HTML –
|
1 |
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous"> |
fontawesomeページ内でiconを「humburger」で検索する。
こちらのフォントが良さそうなので左下のiタグのソースをコピーする。
コピーしたiタグをHTMLのbuttonタグの中に貼り付ける。
– HTML –
|
1 |
<button type="button" id="menubtn"><i class="fa fa-bars"></i><span>MENU</span></button> |
アイコンを含んだボタンにスタイルを適用していきます。
– CSS –
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
/*幅767.98以下のレイアウト*/ @media screen and (max-width:767.98px){ #menu { display: none; } /*①*/ #menubtn span { display:inline-block; text-indent:-9999px; } /*②*/ #menubtn i { color:blue; font-size:18px; } #menubtn { position:absolute; top:17px; right:20px; /*③*/ padding:6px 15px; border:solid 1px blue; background-color:limegreen; border-radius: 5px; cursor: pointer; } /*④*/ #menubtn:hover { opacity:0.8; } /*⑤*/ #menubtn:focus { outline:none; } .logo{ float:none; } .menu { float:none; } li{ float:none; } } |
① MENUの文字列を非表示にする
音声ブラウザを考慮してMENUの文字列が入ってるspanタグごと残しておく。
字下げを指定するtext-indentプロパティを利用して文字列を画面の外へ隠す。
② アイコンの色と大きさを変更する
③ ボタンのデザインを整える
※ボタンの表示位置に関してはこちらの記事で記しています
・内側の余白を調整する
・外枠をつける。
・背景色を指定する
・四隅を角丸にする
・カーソルを重ねた時に指のアイコンにする。
④ カーソルを重ねた時の色を変える
今回はopacityプロパティで値を0.8として半透明にしている。
⑤ Google Chromeでの閲覧時にクリックした時に表示される青色の枠線を削除する
※青枠が表示されている状態
Follow me!
