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

Webサイトにドロップダウンメニューを作る際、親メニューの横に三角(▼)アイコンなどを表示して、 サブメニューがあることがひと目で分かると便利ですよね。 さらに、そのサブメニューを表示している時は、アイコンの向きを上向き(▲)に変えたほうが矛盾がないので、 今回はそれをCSS3のアニメーションと回転を使ってクルッとさせる方法を試してみましたφ(*’д’* )ﾒﾓﾒﾓ。 矢印の向きが切り替わるドロップダウンメニューの作り方 まずはデモ画面です。こんな感じになりました。地味だし今更だけど、このクルンとした動きがやりたかったんです。 今回は勉強がてらアイコンをSVGコードで表示してみましたが、ふつうの画像でもOKです。 記述法 html <ul class="dropdown"><li>DropDown <svg id="arrow" width="16" height="16" viewBox

[aoka15w]

アニメーションで矢印がクルっと回転するナウでシンプルなドロップダウンメニューの作り方｜ウェビメモ Webサイトにドロップダウンメニューを作る際、親メニューの横に三角(▼)アイコンなどを表示して、 サブメニュー

[moriyamakuru2]

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

[gorodoku]

こういうアニメーションの使いかた良いねぇ。トランスフォーム覚えるとつい派手な動きにしたくなっちゃうんだけど

[kasumani]

アニメーションで矢印がクルっと回転するナウでシンプルなドロップダウンメニューの作り方｜ウェビメモ Webサイトにドロップダウンメニューを作る際、親メニューの横に三角(▼)アイコンなどを表示して、 サブメニュー