Webサイトにドロップダウンメニューを作る際、親メニューの横に三角(▼)アイコンなどを表示して、
サブメニューがあることがひと目で分かると便利ですよね。

さらに、そのサブメニューを表示している時は、アイコンの向きを上向き(▲)に変えたほうが矛盾がないので、
今回はそれをCSS3のアニメーションと回転を使ってクルッとさせる方法を試してみましたφ(*’д’* )ﾒﾓﾒﾓ。

矢印の向きが切り替わるドロップダウンメニューの作り方

まずはデモ画面です。こんな感じになりました。地味だし今更だけど、このクルンとした動きがやりたかったんです。

今回は勉強がてらアイコンをSVGコードで表示してみましたが、ふつうの画像でもOKです。

記述法

<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>

$(function(){
	$('.dropdown>li').on('click', function(){
		$(this).toggleClass('dropdown_toggle').children('.submenu').slideToggle(200);
	});
});

#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 日本語リファレンス