※ 当サイトではアフィリエイト広告を利用しています。
PCではメガメニュー、SPの時はアコーディオンに同一メニューで設定しています。
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="menu" aria-label="サイトメニュー">
<ul class="menu__inner" id="menu">
<li class="menu__item">
<a href="#" class="menu__link">MENU1</a>
<div class="menu__contents">
<ul>
<li><a href="#">MENU1-1</a></li>
<li><a href="#">MENU1-2</a></li>
<li><a href="#">MENU1-3</a></li>
</ul>
</div>
</li>
<li class="menu__item">
<a href="#" class="menu__link">MENU2</a>
<div class="menu__contents">
<ul>
<li><a href="#">MENU2-1</a></li>
<li><a href="#">MENU2-2</a></li>
<li><a href="#">MENU2-3</a></li>
</ul>
</div>
</li>
<li class="menu__item">
<a href="#" class="menu__link">MENU3</a>
<div class="menu__contents">
<ul>
<li><a href="#">MENU3-1</a></li>
<li><a href="#">MENU3-2</a></li>
<li><a href="#">MENU3-3</a></li>
</ul>
</div>
</li>
<li class="menu__item">
<a href="#" class="menu__link">MENU4</a>
<div class="menu__contents">
<ul>
<li><a href="#">MENU4-1</a></li>
<li><a href="#">MENU4-2</a></li>
<li><a href="#">MENU4-3</a></li>
</ul>
</div>
</li>
<li class="menu__item">
<a href="#" class="menu__link">MENU5</a>
<div class="menu__contents">
<ul>
<li><a href="#">MENU5-1</a></li>
<li><a href="#">MENU5-2</a></li>
<li><a href="#">MENU5-3</a></li>
</ul>
</div></li>
<li class="menu__contact"><a href="#" class="menu__link"><span>CONTACT<span class="sp-only-2"> US</span></span></a></li>
</ul>
</nav>
</header>
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;
}
.menu__inner{
display: flex;
justify-content: flex-end;
align-items: center;
height:85px;
position:relative;
}
.menu__item{
margin:0 20px;
height:100%;
}
.menu__contact{
background: #4d4d4d;
width: 150px;
text-align: center;
}
.menu__link{
display:block;
color:#fff;
height:100%;
line-height: 85px;
}
/*メガメニュー*/
.menu__contents{
display: none;
position:absolute;
top:100%;
left:0;
width: calc(100% - 150px);
background: #bcbbbb;
padding:20px;
}
.menu__contents ul {
display: flex;
justify-content: space-between;
}
.menu__contents ul li{
background:#fff;
width: 32%;
height:100px;
}
.menu__contents ul li a{
display:block;
text-align: center;
line-height: 100px;
}
そして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);
}
.menu {
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;
}
.menu.active{
opacity:100;
visibility: visible;
}
.menu__inner {
display:block;
height:auto;
width: 72.16vw;
margin-left: auto;
margin-right: auto;
padding: 40px 0 60px;
}
.menu__item {
border-bottom:#bcbbbb solid 2px;
width: 100%;
position: relative;
}
.menu__link {
font-weight: bold;
font-size: 1.6rem;
letter-spacing: 0.04em;
height: 80px;
align-items: center;
}
.menu__contact {
width: 72.16vw;
margin-top: 36px;
}
.menu__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);
}
.menu__contact a span {
position: relative;
}
.menu__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;
}
.menu__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);
}
/*メガメニュー →アコーディオン*/
.menu__contents{
display: none;
position:static;
width:100%;
background: #cccccc;
padding:20px;
}
.menu__contents ul {
display: block;
}
.menu__contents ul li{
border-bottom:#000;
width: 100%;
height:auto;
}
.menu__contents ul li a{
color:#000;
display:block;
text-align: center;
line-height:2.0;
}
.menu__item::after{
content: "";
position: absolute;
right: 25px;
top:35px;
transform:translateY(-50%);
transition: all 0.2s ease-in-out;
display: block;
width: 10px;
height: 10px;
border-top: solid 2px #E5E5E5;
border-right: solid 2px #E5E5E5;
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
.menu__item.active::after{
content: "";
position: absolute;
right: 25px;
top:35px;
transform:translateY(-50%);
transition: all 0.2s ease-in-out;
display: block;
width: 10px;
height:10px;
border-top: solid 2px #E5E5E5;
border-right: solid 2px #E5E5E5;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
}
最後にjs。(jQueryを別途読み込んで使用してください。)
//ハンバーガーメニュー
$(function() {
$('.sp-menubtn').click(function() {
$(this).toggleClass('active');
if ($(this).hasClass('active')) {
$('.menu').addClass('active');
} else {
$('.menu').removeClass('active');
}
});
});
//SP時アコーディオン&PC時メガメニュー
$(window).on('load resize', function(){
var winW = $(window).width();
var devW = 767;
if (winW <= devW) {
$(function(){
$(".menu__item").on("click", function() {
$(this).children('.menu__contents').slideToggle();
$(this).toggleClass("active");
});
});
} else {
$(function () {
$('.menu__item').hover(function(){
$(this).children('.menu__contents').stop().slideToggle();
});
});
}
});
jsでウィンドウサイズを読み込み、767px以上(PC時)ではホバーしたときに反応、
767px以下(SP時)ではクリックしたときに反応するように設定しています。