アニメーションで矢印がクルっと回転するナウでシンプルなドロップダウンメニューの作り方
Webサイトにドロップダウンメニューを作る際、親メニューの横に三角(▼)アイコンなどを表示して、
サブメニューがあることがひと目で分かると便利ですよね。
さらに、そのサブメニューを表示している時は、アイコンの向きを上向き(▲)に変えたほうが矛盾がないので、
今回はそれをCSS3のアニメーションと回転を使ってクルッとさせる方法を試してみましたφ(*’д’* )メモメモ。
矢印の向きが切り替わるドロップダウンメニューの作り方
まずはデモ画面です。こんな感じになりました。地味だし今更だけど、このクルンとした動きがやりたかったんです。
今回は勉強がてらアイコンをSVGコードで表示してみましたが、ふつうの画像でもOKです。
記述法
html
<ul class="dropdown"><li>DropDown
<svg id="arrow" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#ffffff"><g><path d="M 8.341,9.837c 0.005-0.006, 0.007-0.014, 0.012-0.020l 3.491-3.857c 0.195-0.217, 0.195-0.569,0-0.786 c-0.002-0.002-0.004-0.003-0.006-0.004C 11.748,5.065, 11.622,5, 11.482,5L 4.499,5 c-0.143,0-0.27,0.069-0.361,0.176L 4.136,5.174 c-0.195,0.217-0.195,0.569,0,0.786l 3.499,3.877C 7.83,10.054, 8.146,10.054, 8.341,9.837z"></path></g></svg>
<ul class="submenu">
<li><a href="#">aaa</a></li>
<li><a href="#">bbb</a></li>
</ul>
</li></ul>
jQuery
$(function(){
$('.dropdown>li').on('click', function(){
$(this).toggleClass('dropdown_toggle').children('.submenu').slideToggle(200);
});
});
CSS
#arrow{
width: 16px;
height: 16px;
fill: #fff;
position: absolute;
top: 15px;
right:15px;
-webkit-transition: all .15s linear;
-moz-transition: all .15s linear;
-o-transition: all .15s linear;
transition: all .15s linear;
}
.dropdown li{
list-style:none;
position:relative;
}
.submenu{
display:none;
}
.dropdown_toggle #arrow{
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
/*装飾----------------------------------*/
.dropdown{
width:80%;
padding:0;
background:#125;
color:#fff;
}
.dropdown>li{
padding:10px;
}
.submenu{
background:#358;
margin-top:10px;
padding:0;
}
.submenu a{
display:block;
color:#fff;
text-decoration:none;
padding:10px;
}
.submenu a:hover{
background:rgba(255,255,255,.1);
}
アイコンのクルッという動きはjQueryでtoggleClass
を使ってclassを切り替え、.dropdown_toggle
というclassがついた時にだけCSSでtransform: rotate(180deg);
、 transition: all .15s linear;
を発動させています。
キビキビと無駄のない動きも良いですが、この程度のさり気ないアニメーションはなんかオシャレに感じて好きなんですよね。
皆さんはいかがでしょうか?
以上、霙(@xxmiz0rexx)でした!
この記事がお役に立ったら
いいね!お願いしまっす
(*´∨`*)
この記事を書いたみぞれしはTwitterをやっています
Follow @xxmiz0rexx