※ 当サイトではアフィリエイト広告を利用しています。
ハンバーガーメニューのHTMLコードを書くときに、PC用とSP用を分けて書いて、それぞれ条件満たしたときに表示されるように設定していましたが、HTMLはワンソースでOKという方法です。
基本のHTMLはこちら。
<header class="l-header">
<div class="l-header__inner">
<h1 class="header-logo"><img src="images/logo.jpg" alt="logo"></h1>
<button type="button" class="sp-menubtn" aria-label="メニューを開く"><span></span><span></span><span></span></button>
</div>
<nav class="globalnavi" aria-label="サイトメニュー">
<ul class="globalnavi__inner">
<li class="globalnavi__item"><a href="#" class="globalnavi__link">MENU1</a></li>
<li class="globalnavi__item"><a href="#" class="globalnavi__link">MENU2</a></li>
<li class="globalnavi__item"><a href="#" class="globalnavi__link">MENU3</a></li>
<li class="globalnavi__item"><a href="#" class="globalnavi__link">MENU4</a></li>
<li class="globalnavi__item"><a href="#" class="globalnavi__link">MENU5</a></li>
<li class="globalnavi__contact"><a href="#" class="globalnavi__link"><span>CONTACT<span class="sp-only-2"> US</span></span></a></li>
</ul>
</nav>
</header>jsはこちら。（※jQueryを読み込んでください。）
$(function() {
$('.sp-menubtn').click(function() {
$(this).toggleClass('active');
if ($(this).hasClass('active')) {
$('.globalnavi').addClass('active');
} else {
$('.globalnavi').removeClass('active');
}
});
});PC用のcssは以下です。
.l-header{
width:100%;
height:85px;
display: flex;
justify-content: space-between;
align-items: center;
}
.l-header__inner:before {
content: "";
width: 100%;
height: 85px;
background: linear-gradient(43.37deg, #4d4d4d 6.71%, #bcbbbb 101.43%);
position: absolute;
top: 0;
left: 0;
z-index: -100;
}
.sp-menubtn{
display: none;
}
.globalnavi__inner{
display: flex;
justify-content: flex-end;
align-items: center;
height:85px;
}
.globalnavi__item{
margin:0 20px;
height:100%;
}
.globalnavi__contact{
background: #4d4d4d;
padding:0 20px;
}
.globalnavi__link{
display:block;
color:#fff;
height:100%;
line-height: 85px;
}そしてSP用のcssはこちら…長くてすみません；；
@media screen and (max-width: 768px) {
.header-logo img{
height:60px;
}
.l-header{
height:60px;
}
.l-header__inner:before {
height: 60px;
}
.l-header__inner{
width:100%;
height:60px;
display: flex;
justify-content: space-between;
align-items: center;
}
.sp-menubtn {
width: 60px;
height: 100%;
position: relative;
display: block;
z-index: 5000;
border: none;
background: linear-gradient(64.63deg, #4d4d4d 6.71%, #bcbbbb 101.43%);
cursor: pointer;
}
.sp-menubtn span {
display: block;
overflow: hidden;
white-space: nowrap;
text-indent: 100%;
width: 22px;
height: 3px;
background: #FFFFFF;
position: absolute;
transition: 0.2s;
left: 50%;
top: 50%;
}
.sp-menubtn span:nth-child(1) {
transform: translate(-50%, -9px);
}
.sp-menubtn span:nth-child(2) {
transform: translate(-50%, -50%);
}
.sp-menubtn span:nth-child(3) {
transform: translate(-50%, 6px);
}
.sp-menubtn.active span {
width: 25px;
height: 2px;
}
.sp-menubtn.active span:nth-child(1) {
transform: translate(-50%, 50%) rotate(45deg);
}
.sp-menubtn.active span:nth-child(2) {
opacity: 0;
left: 50%;
}
.sp-menubtn.active span:nth-child(3) {
transform: translate(-50%, 50%) rotate(-45deg);
}
.globalnavi {
position: fixed;
top: 60px;
left: 0;
width: 100%;
height: calc(100% - 60px);
background: #4d4d4d;
color: #FFFFFF;
overflow: auto;
opacity: 0;
visibility: hidden;
transition: opacity .6s ease, visibility .6s ease;
}
.globalnavi.active{
opacity:100;
visibility: visible;
}
.globalnavi__inner {
display:block;
height:auto;
width: 72.16vw;
margin-left: auto;
margin-right: auto;
padding: 40px 0 60px;
}
.globalnavi__item {
position: relative;
}
.globalnavi__item:after {
content: "";
display: block;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 2px;
background:#bcbbbb;
}
.globalnavi__link {
font-weight: bold;
font-size: 1.6rem;
letter-spacing: 0.04em;
height: 80px;
display: flex;
align-items: center;
padding-bottom: 2px;
}
.globalnavi__contact {
margin-top: 36px;
}
.globalnavi__contact a {
background: linear-gradient(58.5deg, #4d4d4d 46.25%, #bcbbbb 109.07%);
color: #FFFFFF;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
height: 68px;
padding: 0 35px 0 30px;
position: relative;
letter-spacing: 0.04em;
max-width: 72.16vw;
margin-left: auto;
margin-right: auto;
box-shadow: 0px 0px 22px rgba(0, 0, 0, 0.1);
}
.globalnavi__contact a span {
position: relative;
}
.globalnavi__contact a:before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: '';
background: #01397E;;
transform-origin: right top;
transform: scale(0, 1);
transition: -webkit-transform .3s;
transition: transform .3s;
}
.globalnavi__contact a:after {
content: "";
display: block;
width: 7px;
height: 7px;
border-top: 2px solid #FFFFFF;
border-right: 2px solid #FFFFFF;
transform: rotate(45deg);
position: absolute;
top: 50%;
right: 30px;
transform: translate(-50%, -50%) rotate(45deg);
}
}
