<!-- header -->
<header class="header" id="head_wrap">
<div class="inner">
<div id="mobile-head">
<h1 class="logo">
ロゴ
</h1>
<div id="nav-toggle">
<div>
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
<nav id="global-nav">
<ul>
<li><a href="#menu1">MENU1</a></li>
<li><a href="#menu2">MENU2</a></li>
<li><a href="#menu3">MENU3</a></li>
<li><a href="#menu4">MENU4</a></li>
<li><a href="#menu5">MENU5</a></li>
</ul>
</nav>
</div>
</header>
<!-- /header -->
// 追従ナビ・スマホでハンバーガーメニューになる
(function($) {
$(function() { var $header = $('#head_wrap');
// Nav Fixed
$(window).scroll(function() {
if ($(window).scrollTop() > 350) {
$header.addClass('fixed'); }
else {
$header.removeClass('fixed');
} });
// Nav Toggle Button
$('#nav-toggle, #global-nav ul li a').click(function(){
$header.toggleClass('open');
});
});
})(jQuery);
// ゆっくりスクロールする
$(function(){
$('a[href^="#"]').click(function() {
var adjust = 0;
var speed = 1200;
var href= $(this).attr("href");
var target = $(href == "#" || href == "" ? 'html' : href);
var position = target.offset().top + adjust;
$('body,html').animate({scrollTop:position}, speed, 'swing');
return false; }); });
#head_wrap {
top: -100px;
position: relative;
width: 100%;
margin: 100px auto 0;
line-height: 1;
z-index: 999;
height: 0px;
text-decoration: none;
}
#head_wrap a {
text-decoration: none;
}
#head_wrap .inner {
width: 100%;
margin: 0 auto;
position: relative;
}
#head_wrap .inner:after {
content: "";
clear: both;
display: block;
}
#head_wrap .logo {
float: left;
font-size: 36px;
}
#global-nav {
position: absolute;
right: 0;
top: 0;
}
#global-nav ul {
list-style: none;
font-size: 14px;
margin-right: 10px;
display: inline-flex;
}
#global-nav ul li {
padding: 20px 10px;
}
#global-nav ul li:last-child {
border-right: none;
}
#global-nav ul li a {
padding: 0 5px;
padding: 2px;
transition: all .6s ease 0s;
box-sizing: border-box;
font-weight: bold;
}
#head_wrap.fixed {
margin-top: 0;
top: 0;
position: fixed;
height: 100px;
transition: top 0.65s ease-in;
-webkit-transition: top 0.65s ease-in;
-moz-transition: top 0.65s ease-in;
z-index: 9999;
}
#head_wrap.fixed .logo {
font-size: 36px;
color: #333;
}
#head_wrap.fixed #global-nav ul li a {
color: #333;
padding: 0 20px;
}
#nav-toggle {
display: none;
position: absolute;
right: 12px;
top: 14px;
width: 26px;
height: 26px;
cursor: pointer;
z-index: 101;
}
#nav-toggle div {
position: relative;
}
.fixed {
padding-top: 0;
background: transparent;
}
@media screen and (max-width: 780px) {
#mobile-head {
background: rgba(255, 255, 255, 0.9);
width: 100%;
height: 56px;
z-index: 999;
position: relative;
}
#head_wrap.fixed .logo, #head_wrap .logo {
position: absolute;
left: 13px;
top: 13px;
color: #333;
font-size: 26px;
}
#global-nav {
position: absolute;
top: -500px;
background: rgba(255, 255, 255, 0.9);
width: 100%;
text-align: center;
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
transition: .5s ease-in-out;
}
#global-nav ul {
list-style: none;
font-size: 14px;
margin-right: 0px;
display:block;
}
#global-nav ul li {
float: none;
position: static;
}
#head_wrap #global-nav ul li a, #head_wrap.fixed #global-nav ul li a {
width: 100%;
display: block;
padding: 5px 0;
}
#nav-toggle {
display: block;
}
#nav-toggle span {
display: block;
position: absolute;
height: 2px;
width: 100%;
background: #666;
left: 0;
-webkit-transition: .35s ease-in-out;
-moz-transition: .35s ease-in-out;
transition: .35s ease-in-out;
}
#nav-toggle span:nth-child(1) {
top: 0;
}
#nav-toggle span:nth-child(2) {
top: 8px;
}
#nav-toggle span:nth-child(3) {
top: 16px;
}
#nav-toggle span:nth-child(3)::after {
content:"Menu";/*3つ目の要素のafterにMenu表示を指定*/
position: absolute;
top:7px;
color: #111;
font-size: 0.6rem;
text-transform: uppercase;
}
.open #nav-toggle span:nth-child(1) {
top: 11px;
-webkit-transform: rotate(315deg);
-moz-transform: rotate(315deg);
transform: rotate(315deg);
}
.open #nav-toggle span:nth-child(2) {
width: 0;
left: 50%;
}
.open #nav-toggle span:nth-child(3) {
top: 11px;
-webkit-transform: rotate(-315deg);
-moz-transform: rotate(-315deg);
transform: rotate(-315deg);
}
.open #nav-toggle span:nth-child(3)::after {
content:"Close";/*3つ目の要素のafterにClose表示を指定*/
transform: translateY(0) rotate(-45deg);
position: absolute;
top:10px;
left:11px;
color: #111;
font-size: 0.6rem;
}
.open #global-nav {
-moz-transform: translateY(556px);
-webkit-transform: translateY(556px);
transform: translateY(556px);
}
}