ヘッダーのサブメニューを実装しよう！
Share
こんなことを説明しています！
- headerのメニューをホバーしたら下にスライドで出てくるメニューの作り方
- メニューのアイテムの下の余白をホバーした時にスライドメニューが消えてしまって困っている！という方へ向けた解説もしています。
- おまけとして、headerの良く使う型もスニペット登録できるように載せておきました！
解説動画
コードの解説
HTMLの記述
<header class="header">
<div class="header-wrap">
<div class="header-logo"><a href="">ロゴ</a></div>
<nav class="header-nav">
<ul class="header-list">
<li class="header-item">
<span>about</span>
<div class="header-sub-menu">
<ul class="header-sub-list">
<li class="header-sub-item"><a href="">about-sub-item</a></li>
<li class="header-sub-item"><a href="">about-sub-item</a></li>
<li class="header-sub-item"><a href="">about-sub-item</a></li>
</ul>
</div>
</li>
<li class="header-item">
<span>service</span>
<div class="header-sub-menu">
<ul class="header-sub-list">
<li class="header-sub-item"><a href="">service-sub-item</a></li>
<li class="header-sub-item"><a href="">service-sub-item</a></li>
<li class="header-sub-item"><a href="">service-sub-item</a></li>
</ul>
</div>
</li>
<li class="header-item"><a href="">works</a></li>
</ul>
<div class="header-btn">
<a href="">contact</a>
</div>
</nav>
<div class="drawer-icon pc_hidden">
<span class="bar1"></span>
<span class="bar2"></span>
<span class="bar3"></span>
</div>
</div>
</header>
CSSの記述
$height-pc: 80px;
$height-sp: 60px;
$paddingSide-pc: 40px;
$paddingSide-sp: 20px;
$navGap: 20px;
$listGap: 20px;
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: $height-pc;
padding: 0 $paddingSide-pc;
background: rgba(192, 234, 255, 0.655);
}
.header-wrap {
display: flex;
justify-content: space-between;
align-items: center;
height: inherit;
}
.header-logo {}
.header-nav {
display: flex;
align-items: center;
column-gap: $navGap;
height: inherit;
}
.header-list {
display: flex;
align-items: center;
column-gap: $listGap;
height: inherit;
}
.header-btn {
height: inherit;
}
.header-btn a {
display: inline-block;
padding: 0 20px;
height: inherit;
display: flex;
align-items: center;
background: rgb(254, 200, 100);
}
.header-item {
height: inherit;
a {
height: inherit;
display: flex;
align-items: center;
}
span {
height: inherit;
display: flex;
align-items: center;
transition: all 0.3s ease;
&.current {
color: blue;
}
}
}
.header-sub-menu {
display: none;
background: rgb(81, 81, 239);
padding: 20px;
position: fixed;
top: $height-pc;
left: 0;
width: 100%;
height: auto;
}
.header-sub-item {
a {
color: white;
}
}
.pc_hidden {
display: none;
}
jQueryの記述
jQuery(function($){
$('.header-item').on({
'mouseenter': function() {
//hover
$(this).children('.header-sub-menu').slideDown(100);
$(this).children('span').addClass('current');
},
'mouseleave': function() {
//leave
$(this).children('.header-sub-menu').slideUp(100);
$(this).children('span').removeClass('current');
}
});
});
解説で使用したスニペット
html.json
"header": {
"prefix": "header",
"body": [
"<header class=\"header\">",
" <div class=\"header-wrap\">",
" <div class=\"header-logo\">",
" <a href=\"\">ロゴ</a>",
" </div>",
" <nav class=\"header-nav\">",
" <ul class=\"header-list\">",
" <li class=\"header-item\"><a href=\"\">about</a></li>",
" <li class=\"header-item\"><a href=\"\">service</a></li>",
" <li class=\"header-item\"><a href=\"\">works</a></li>",
" </ul>",
" <div class=\"header-btn\">",
" <a href=\"\">contact</a>",
" </div>",
" </nav>",
" <div class=\"drawer-icon pc_hidden\">",
" <span class=\"bar1\"></span>",
" <span class=\"bar2\"></span>",
" <span class=\"bar3\"></span>",
" </div>",
" </div>",
"</header>",
],
"description": ""
},
scss.json"header": {
"prefix": "header",
"body": [
"\\$height-pc: 80px;",
"\\$height-sp: 60px;",
"\\$paddingSide-pc: 40px;",
"\\$paddingSide-sp: 20px;",
"\\$navGap: 20px;",
"\\$listGap: 20px;",
"",
".header {",
" position: fixed;",
" top: 0;",
" left: 0;",
" width: 100%;",
" height: \\$height-pc;",
" padding: 0 \\$paddingSide-pc;",
"}",
"",
".header-wrap {",
" display: flex;",
" justify-content: space-between;",
" align-items: center;",
" height: inherit;",
"}",
"",
".header-logo {",
"",
"}",
".header-nav {",
" display: flex;",
" align-items: center;",
" column-gap: \\$navGap;",
"}",
"",
".header-list {",
" display: flex;",
" align-items: center;",
" column-gap: \\$listGap;",
"}",
"",
".pc_hidden {",
" display: none;",
"}",
],
"description": ""
},
javascript.json"hover": {
"prefix": "hover",
"body": [
"\\$('$1').on({",
" 'mouseenter': function() {",
" //hover",
" $2",
" },",
" 'mouseleave': function() {",
" //leave",
" $3",
" }",
"});",
],
"description": ""
},
