jQuery

アニメーションで矢印がクルっと回転するナウでシンプルなドロップダウンメニューの作り方

dropdown-menu

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)でした!

参考:toggleClass(class) – jQuery 日本語リファレンス はてなブックマーク - toggleClass(class) - jQuery 日本語リファレンス