
<header_common>
<div class="header-wrapper">
<h1 class="header-logo">
<a class="header-logo__link" href="{ base }/">
<img src="{ base }/common/logo.svg" alt="安川建設株式会社">
</a>
</h1>
<button class="nav-button">
<span></span>
<span></span>
<span></span>
<div class="nav-bg"></div>
</button>
<nav class="nav-wrap">
<ul class="nav clearfix">
<li class="nav__item">
<a class="nav__link " href="{ base }/">
HOME
<span>トップ</span>
</a>
</li>
<li class="nav__item">
<a class="nav__link " href="{ base }/concept/">
CONCEPT
<span>コンセプト</span>
</a>
</li>
<li class="nav__item">
<a class="nav__link " href="{ base }/works/">
WORKS
<span>施工実績</span>
</a>
</li>
<li class="nav__item">
<a class="nav__link " href="{ base }/company/">
COMPANY
<span>会社案内</span>
</a>
</li>
<li class="nav__item">
<a class="nav__link " href="{ base }/recruit/">
RECRUIT
<span>採用情報</span>
</a>
</li>
<li class="nav__item">
<a class="nav__link " href="{ base }/contact/input/">
CONTACT
<span>お問い合わせ</span>
</a>
</li>

</ul>
</nav>
</div>
<!--header-wrapper-->


<script>
this.on('mount', function() {
// current
var current = location.pathname.replace(this.base, '').split('/')[1]
if (current.length === 0 || current === 'index.html') {
$('.nav__link[href="' + this.base + '/"]').addClass('current')
} else {
$('.nav__link[href^="' + this.base + '/' + current + '/"]').addClass('current')
}


$(function(elm) {
$(".nav-button").on("click", function() {
/*jQuery('.nav-wrap').fadetoggle(600);*/
/*jQuery('.nav__item').css({top : '20px', opacity:0}).each(function(i){
    jQuery(this).delay(300 * i).animate({top : '0', opacity:1}, 1500);})*/
		
if ($(this).hasClass("active")) {
$(this).removeClass("active");
$(".nav-wrap")
.addClass("close")
.removeClass("open");

} else {
$(this).addClass("active");
$(".nav-wrap")
.addClass("open")
.removeClass("close");

}
});
});



})

// nav btn


</script>
</header_common>