WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

ハンバーガーメニューの実装

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>スクロールすると固定になるナビ</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/nav.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="nav2.js"></script>
</head>

<body>
<div id="container">
<header>
<a href="#"><h1>Bloomingville</h1></a>
<nav>
<p id="btn"><span id="hum"></span></p>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Shop</a></li>
<li><a href="#">Collections</a></li>
<li><a href="#">Design philosophy</a></li>
<li><a href="#">Press</a></li>
<li><a href="#">About</a></li>
</ul>
</nav>
</header><!--/header-->
<div id="content"></div>
</div>
</body>
</html>

スタイルシート

@charset "utf-8";
/* CSS Document */

/* reset */
html, body, div, h1, h2, h3, h4, h5, h6,p,ul, ol, li {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo, 
    sans-serif;
}
ul {
  list-style: none; /* マーカーを消す */
}
a {
  text-decoration: none; /* 下線を消す */
}
img {
  border: 0;
  vertical-align: bottom;
}


#container {
    background:#f0ede7;
}
header {
  width:100%;
  padding-top: 30px;
  background:#e4dfd6;
}
header > a {
  display: block;
  width: 500px;
  margin: 0 auto;
}
h1 {
  background: url(../img/logo.svg) no-repeat center center/contain;
  height: 100px;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  margin-bottom: 30px;
  display: block;
}
nav {
  width:100%;
  height: 50px;
  background:#f0ede7;
	transition:0.1s;
}
nav ul {
  width:70%;
  margin:0 auto;
  overflow: hidden;
}
nav li {
  float:left;
  width:calc(100% / 6);
}
nav li a {
  display: block;
  padding-top:20px;
  padding-bottom:16px;
  font-size: 14px;
  text-align:center;
  color:#222;
}
nav li a:hover {
  border-bottom: 4px solid #96F;
  padding-bottom:12px;
}


#content {
height: 2000px;
background: #D9C0BC;
}

/*ナビゲーションのスクロール*/

header.fixed > #nav {
  position:fixed;
  left:0;
  top:0;
}

header.fixed h1 {
  background:url(../img/logo-small.svg) no-repeat center center/contain;
  width: 140px;
  height: 50px;
  position: fixed;
  left: 20px;
  top: 0;
  z-index: 100;
}





@media screen and (max-width:767px){



header {
  width:100%;
  height: 40px;
  background:#e4dfd6;
  position: fixed;
  top: 0;
  left: 0;
  padding: 10px 10px 10px 0;
}
header > a {
  display: block;
  width: 200px;
  float: right;
}
h1 {
  background:url(../img/logo-small.svg) no-repeat center center/contain;
  height: 40px;
  margin-bottom: 0;

}
nav {
  background:#e4dfd6;
}
#btn {
width: 40px;
height: 40px;
border: 1px solid #000;
border-radius: 4px;
position: relative;
margin-left: 20px;
}
#hum {
  display: block;
  width: 30px;
  height: 2px;
  background: #000;
  position: absolute;
  top:0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  transition: 0.2s;
}
#hum:before {
  display: block;
  content: "";
  width: 30px;
  height: 2px;
  background: #000;
  position: absolute;
  top:-20px;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  transition: 0.2s;
}
#hum:after {
  display: block;
  content: "";
  width: 30px;
  height: 2px;
  background: #000;
  position: absolute;
  top:0;
  right: 0;
  bottom: -20px;
  left: 0;
  margin: auto;
  transition: 0.2s;
}

#hum.click {
  background: transparent;
}
#hum.click:before {
  top:0;
  transform: rotate(45deg);
}
#hum.click:after {
  bottom: 0;
  transform: rotate(135deg);
}

nav ul {
  width:100%;
  position: fixed;
  top: 60px;
  padding-left: 10px;
  background:#f0ede7;
  display: none;
}
nav li {
  float:none;
  width:100%;
  line-height: 30px;
}
nav li a {
  text-align:left;
}
nav li a:hover {
  border-bottom: none;
  padding-bottom:0;
}

header.fixed h1 {
display: none;
}
}
// JavaScript Document

$(function() {
  if(window.innerWidth > 767){
				$(window).scroll(function() {
					if ($(window).scrollTop() > 10) {
						$('header').addClass('fixed').slideDown(900);
					} else {
						$('header').removeClass('fixed');
					}
				});
  }
$('#btn').on('click touchstart',function(){
	$('#hum').not(':animated').toggleClass('click');
	$('nav ul').not(':animated').slideToggle(200);
	});
});

修正後のjQuery

// JavaScript Document

$(function() {
  if(window.innerWidth > 767){
				var $header = $('header');
				$(window).scroll(function() {
					if ($(window).scrollTop() > 160) {
						$header.addClass('fixed');
					} else {
						$header.removeClass('fixed');
					}
				});
  }
$('#btn').on('click touchstart',function(){
if($(window).innerWidth() <= 767){
  $('#hum').not(':animated').toggleClass('click');
  $('nav ul').not(':animated').slideToggle(200);
  };
});
$(window).resize(function(){
  $('nav ul').hide();//スマホの時
if($(window).innerWidth() > 768){ 
 $('nav ul').show();//タブレット以上の時
 $('#hum').removeClass('click');//PCから戻る時に邪魔な.clickを削除するため
 } 
});
});