【jQuery】ドロップダウンメニュー矢印付き(addclass)
61
この記事を書いている人
HTML
<nav>
<ul class="menu">
<li><a href="">MENU1</a></li>
<li class="slidedown"><a href="">MENU2</a>
<ul class="sub_menu">
<li><a href="">SUB1</a></li>
<li><a href="">SUB2</a></li>
<li><a href="">SUB3</a></li>
</ul>
</li>
<li class="slidedown"><a href="">MENU3</a>
<ul class="sub_menu">
<li><a href="">SUB1</a></li>
<li><a href="">SUB2</a></li>
<li><a href="">SUB3</a></li>
</ul>
</li>
<li class="slidedown"><a href="">MENU4</a>
<ul class="sub_menu">
<li><a href="">SUB1</a></li>
<li><a href="">SUB2</a></li>
</ul>
</li>
<li><a href="">MENU5</a></li>
</ul>
</nav>
jQuery
jQueryでclassを付与します。
$(function() {
$(".menu li").hover(
function() {
$(this).addClass("open");
}, function() {
$(this).removeClass("open");
}
);
});
このclassを使って、CSSで表示・非表示を切り替えます。
CSS
nav {
width: 100%;
height: auto;
padding: 20px;
margin: auto;
}
.menu {
display: flex;
flex-wrap: wrap;
align-items: center;
text-align: center;
}
.menu li {
background: #669;
letter-spacing: 2px;
position: relative;
}
.menu li a {
display: block;
padding: 20px;
color: white;
box-sizing: border-box;
width: 100%;
z-index: 0;
position: relative;
}
.slidedown {
z-index: auto;
position: relative;
}
.slidedown::after {
font-family: "Font Awesome 5 Free";
content: '\f078';
font-weight: 900;
color: white;
transition: .6s;
position: absolute;
right: 10px;
top: 0;
bottom: 0;
margin: auto;
height: fit-content;
}
.slidedown.open {
z-index: 1;
}
.slidedown.open::after {
transform: rotate(-180deg);
color: #ffc800;
}
.sub_menu {
width: 100%;
display: none;
}
.open .sub_menu {
display: block;
animation: slide_down 1s forwards;
position: absolute;
top: 100%;
left: 0;
z-index: 2424;
}
@keyframes slide_down {
from {}
to {
padding-top: 10px;
}
}
.slidedown {
padding-right: 10px;
display: flex;
align-items: center;
}
.sub_menu li {
background: #b9f;
}
.menu li:hover {
opacity: .9;
}
.menu li:hover .sub_menu li {
opacity: 1;
}
.menu li a:hover {
color: #ffc800;
}
@media screen and (max-width: 680px) {
.menu li {
width: 50%;
}
.sub_menu li {
width: 100%;
z-index: 444;
position: relative;
}
.open .sub_menu {
animation: inherit;
}
}
Font Awesome
矢印はFont Awesomeを使っています。
Font Awesomeはアイコンをフォントとして使えるサービスです。
私がコーディングを始めた時に購入した本に載っていて、そこからずっと愛用しています。
無料プランだと月間1万ページビューらしく、1万を超えてからは出たり出なかったりしています。
ビューが1万を超えるようなら有料プランか別のアイコンフォントを使用した方が良いですね。
いいなと思ったら
TAPしてね♡↓
【jQuery】ホバーで開閉する基本のドロップダウンメニュー
コメントは承認後に表示されます。