【jQuery】超簡単ハンバーガーメニュー

web制作を勉強していて、ハンバーガーメニューの作成に躓く人に向けて、私の備忘録を兼ねてjQueryを用いたハンバーガーメニューを紹介します

HTML

HTMLは外観なのでサラッと流します。

<header>
  <div class="header">
    <div class="header_list">
      <ul>
        <li>リスト１</li>
        <li>リスト２</li>
        <li>リスト３</li>
        <li>リスト４</li>
        <li>リスト５</li>
        <li>リスト６</li>
      </ul>
    </div>
  </div>
  <div class="humbergur_menu">
    <button class="humbergur_menu_button">
      <span></span>
      <span></span>
      <span></span>
    </button>
  </div>
</header>

前半部分は問題ないと思います。

humbergur_menuクラス以降はハンバーガーメニューを作成するための記述になります。

今回はspanタグを用いて３本線を表現していますが、画像を用いてもOKです。

CSS

.header_list {
	margin-top: 15px;
}

.header_list li {
	float: left;
	margin-top: 10px;
	margin-right: 13px;
	padding-right: 13px; 
	border-right:1px solid #999999;
	vertical-align: middle;
  list-style: none;
}

.header_list .lastList {
	border-right:none;
}

header button{
	display: none;
}

@media (min-width:768px) {
	.header {
		display: inline-block !important;
	}
}

@media (max-width: 767px){
	.header{
		display: none;
	}

	.humbergur_menu {
		position: absolute;
		right: 15px;
		top: 20px;
	 }

	.humbergur_menu_button {
		border: none;
		background: transparent;
	}

	.humbergur_menu_button {
		display: inline-block;
	}

	.humbergur_menu_button {
		position: relative;
		width: 40px;
		height: 33px;
	}

	.humbergur_menu_button span {
		position: absolute;
		left: 0;
		width: 100%;
		height: 3px;
		background-color: #333;
	}

	.humbergur_menu_button span:nth-of-type(1) {
		top: 0;
	}

	.humbergur_menu_button span:nth-of-type(2) {
		top: 14px;
	}

	.humbergur_menu_button span:nth-of-type(3) {
		bottom: 0;
	}
}

基本的には表示しているlistのレイアウトだったり、ハンバーガーメニューロゴの設定です。

基本的なCSSが理解できていれば十分に対応可能だと思いますが、一点注意いて欲しいことがあります。

@media (min-width:768px) {
	.header {
		display: inline-block !important;
	}
}

ここの記述ですが、一見なくても正常に動作するように思いますが必須記述です。

この記述が漏れてしまうと、ハンバーガーメニューでメニューを閉じた後にディスプレイサイズの変更を行なった場合、ヘッダー内容が表示されていない状態となってしまいます。そのため、必ず記述するようにしてください。

jQuery

$(function () {
  $('.humbergur_menu_button').click(function () {
    $('.header').toggle();
  })
})

ここではclick()のtoggle()を用いて表示・非表示の判別を行なっています。

まとめ

googleで「ハンバーガーメニュー　作り方」と検索をかけるとHTML・CSSのみで作成されているものも多く見受けられます。しかし、個人的にはjQueryを用いた方がコードがスッキリと収まる印象ですので是非活用してください。これでハンバーガーメニューの導入が完了したのでCSS,アニメーションなどを活用し、より良いヘッダーを作成してみてください。

今後も私の勉強過程での気づきをどんどん発信していきますので興味があるものはチェックしてみてください。