今回はjQueryを使ってコピペで作成できる
ドロップダウンメニューをご紹介します。
今回作成するドロップダウンメニューのデモがこちら
早速作成していきましょう!
jQueryを読み込ませる。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
これをHTMLのbodyの閉じタグの前に入れましょう。
HTMLで形を作る。
<ul class="dropdwn">
<li>HOME</li>
<li>A
<ul class="dropdwn_menu">
<li><a href="#">A1</a></li>
<li><a href="#">A2</a></li>
</ul>
</li>
<li>B
<ul class="dropdwn_menu">
<li><a href="#">B1</a></li>
<li><a href="#">B2</a></li>
<li><a href="#">B3</a></li>
</ul>
</li>
<li>C
<ul class="dropdwn_menu">
<li><a href="#">C1</a></li>
<li><a href="#">C2</a></li>
<li><a href="#">C3</a></li>
<li><a href="#">C4</a></li>
</ul>
</li>
<li>D
<ul class="dropdwn_menu">
<li><a href="#">D1</a></li>
<li><a href="#">D2</a></li>
<li><a href="#">D3</a></li>
<li><a href="#">D4</a></li>
<li><a href="#">D5</a></li>
</ul>
</li>
</ul>
Point!
ul.dropdwn_menuの中のliがドロップダウンで表示されるメニューです。
CSSで形を整える。
.dropdwn{
max-width: 1200px;
display: flex;
}
ul{
text-align: center;
list-style-type: none;
margin: 0 auto;
padding: 0;
color: #fff;
}
li{
max-width: calc(1200px/5);
position: relative;
padding: 5px;
display: block;
cursor: pointer;
}
.dropdwn>li{
width: 1200px;
margin: 1px;
background: #7ba5ff;
display: inline;
}
.dropdwn_menu{
width: 100%;
display: none;
position: absolute;
margin-left: -5px;
margin-top: 5px;
padding: 0;
background: rgb(75, 100, 209);
}
.dropdwn_menu li{
width: 100%;
}
.dropdwn_menu li a{
padding: 5px 0;
margin: -5px 5px -5px -5px;
display: block;
color: #fff;
}
li a:hover{
background: #b3d7ff;
color: rgb(65, 65, 65);
}
Point!
ul.dropdwn_menuをdisplay:none;することで、見えないようにしています!
cursor:pointer;でカーソルをポインターにすることでクリック可能な部分をわかりやすくします。
jQueryで動かす
$(function(){
$('.dropdwn li').hover(function(){
$("ul:not(:animated)", this).slideDown();
}, function(){
$("ul.dropdwn_menu",this).slideUp();
});
});
解説!
$(‘.dropdwn li’).hover(function(){ 〇 }で.dropdwnの中のliにマウスが乗ったとき、〇をして!となります。
その後の, function(){ △ }でマウスが乗っていないとき、△をしてとなります。
〇の部分“$(“ul:not(:animated)”, this).slideDown();”の解説
まず簡単な部分の“.slideDown();”は、隠していた部分を下にスライドさせて!となります。
“this”は.dropdwn liの子要素のulなので、ul.dropdwn_menuのことです!
重要!
“ul:not(:animated)”はアニメーションの途中にアニメーションを実行しないでという意味で、これがないとアニメーション中に.dropdwnのliにマウスを乗せたとき、マウスを置いた回数だけアニメーションが実行されてしまいます!
試しに、“ul:not(:animated)”を消したデモも作成してみました。
このように、マウスを置いた回数だけアニメーションを実行されてしまうので、マウスを置いてなくても動いてしまいます。
△の部分“$(“ul:not(:animated)”, this).slideDown();”の解説
△の部分はいたって普通でマウスが離れた時、“.slideUp();”で上にスライドさせて!となります。
やや説明が長くなりましたが、無事ドロップダウンメニューが完成しましたね!
あとは自分好みにカスタマイズしてみてください!