メニューの三本線アイコンを HTML と CSS だけで実装する方法

更新日: 公開日:2016/01/18
CSSでハンバーガーメニューのアイコンを実装

スマートフォンで Web ページを閲覧している時に見かける三本線のアイコン。その見た目から通称「ハンバーガーメニュー」と呼ばれ、メニューの表示を意味しています。シンプルなアイコンで場所を取らないため、モバイル用のページでは頻繁に利用されています。

大手サイトを見ると、画像で対応しているケースが多いです。しかしこの程度であれば、わざわざ画像を用意しなくても HTML と CSS で実装することができます。大きさや色合いを自由に変更することができるので、どんなサイトにも簡単に導入できます。

Font Awesome のような Web アイコンフォントを使うのも悪くありませんが、画面表示時に読み込みのタイムラグが発生します。ページの構造上、ファーストビューに表示されることが多いので、CSS で実装する方がスマートではないかと思います。

では実装サンプルをご覧ください。

ハンバーガーメニューのアイコンを HTML と CSS で実装する

ハンバーガーメニューの実装【サンプル1】

ハンバーガーメニュー サンプル1【HTML】
<div id="humberger">
  <div></div>
  <div></div>
  <div></div>
</div>

内側の div タグがそれぞれ線になるイメージです。

ハンバーガーメニュー サンプル1【CSS】
#humberger {
  position: relative;
  height: 24px;
  width: 24px;
  display: inline-block;
  box-sizing: border-box;
}
#humberger div {
  position: absolute;
  left: 0;
  height: 4px;
  width: 24px;
  background-color: #444;
  border-radius: 2px;
  display: inline-block;
  box-sizing: border-box;
}
#humberger div:nth-of-type(1) {
  top: 0;
}
#humberger div:nth-of-type(2) {
  top: 10px;
}
#humberger div:nth-of-type(3) {
  bottom: 0;
}

外側の要素に vertical-align を設定している理由は、ハンバーガーメニューに続いて「メニュー」等の文字を設定した際に 上下中央寄せ にするためです。アイコンのみ表示する場合は設定不要です。

ハンバーガーメニュー【サンプル1 出力イメージ】

では HTML 上に出力したイメージをご覧ください。

画像ファイルを使用していないので、拡大してもぼやけたりしません。また HTML で読み込まれるので、処理速度も高速です。

ハンバーガーメニューの実装【サンプル2】

CSS の設定を変えれば、このハンバーガーメニューに外枠を付けることもできます。HTML はそのままです。

ハンバーガーメニュー サンプル2【CSS】
#humberger {
  position: relative;
  height: 36px;
  width: 36px;
  display: inline-block;
  box-sizing: border-box;
  background-color: #fff;
  border: 2px solid #444;
  border-radius: 4px;
}
#humberger div {
  position: absolute;
  left: 4px;
  height: 4px;
  width: 24px;
  background-color: #444;
  border-radius: 2px;
  display: inline-block;
  box-sizing: border-box;
}
#humberger div:nth-of-type(1) {
  top: 4px;
}
#humberger div:nth-of-type(2) {
  top: 14px;
}
#humberger div:nth-of-type(3) {
  bottom: 4px;
}

ハンバーガーメニュー【サンプル2 出力イメージ】

外枠が付いただけで印象が変わります。

ハンバーガーメニューの実装【サンプル3】

前項の枠線の設定を変更すれば、丸枠にすることもできます。四角い枠よりもサイズが大きくなるため、設置場所が制限されてしまうことがあります。

ハンバーガーメニュー サンプル3【CSS】
#humberger {
  position: relative;
  height: 42px;
  width: 42px;
  display: inline-block;
  box-sizing: border-box;
  background-color: #fff;
  border: 2px solid #444;
  border-radius: 50%;
}
#humberger div {
  position: absolute;
  left: 7px;
  height: 4px;
  width: 24px;
  background-color: #444;
  border-radius: 2px;
  display: inline-block;
  box-sizing: border-box;
}
#humberger div:nth-of-type(1) {
  top: 7px;
}
#humberger div:nth-of-type(2) {
  top: 17px;
}
#humberger div:nth-of-type(3) {
  bottom: 7px;
}

ハンバーガーメニュー【サンプル3 出力イメージ】

丸い枠はポップな印象になりますね。

3つのサンプルをご覧いただきましたが、ベースはこのまま CSS の設定を変更するだけで、様々な大きさやカラーバリエーションに展開することができます。ぜひサイトに合ったデザインに変更して活用いただければと思います。

以上、ハンバーガーメニューのアイコンを HTML と CSS だけで実装する方法でした。

最新の更新情報は、Twitter、Facebook、Freedly にてお届け!

NJ-CLUCKER RSS

このブログの運営者

NJ

元システムエンジニアから、個人事業主として独立。Web サイト運営、動画制作など活動の場を広げています。このブログでは、困ってたどり着いた人に、分かりやすく答えを提供できるように心掛けています。

更新情報は、Twitter や Facebook ページを参照ください。フォローお待ちしています。