遅延付き pure CSS ドロップダウンメニューの作り方
How To Create a Delayed Pure CSS Dropdown Menu
CSSはやりたいことと表現が乖離していてひどい言語ですね。いつかグーグルかアドビあたりが簡単できれいな新スタイルシート言語を出して広まってくれればいいと願ってます。
さて、表題のとおり、最近ではJavascriptなしでCSSだけでドロップダウンメニューを作れます。利用しているサイトもちらほらとあります。
ですが、ドロップダウンメニューが開くまでの遅延時間を設けていないサイトがほとんどで、とってもウザいことになっています。マウスが通過するだけでぺろっとゴミが…おっと失礼、メニューが開いて記事本文の上にかかって邪魔したりします。
どうせ誰も使わないメニューなんかないほうがいいのですが、ちゃんと先端行ってますよアピールのためにはゴミメニューを表示しないといけない事情もありそうなので、今日はCSSだけで遅延付きドロップダウンメニューの作り方を説明します。
まずは、遅延なしの場合ですが、↓ここを見てください。すばらしい!
http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu
では、これを遅延ありに改造します。CSS3 transitions を利用します。nav ul ul と nav ul li:hover > ul を置き換え、nav ul li > ul を追加します。
nav ul ul { display: block; visibility: hidden; transition-property: visibility; -webkit-transition-property: visibility; } nav ul li > ul { transition-delay: 0s; -webkit-transition-delay: 0s; visibility: hidden; } nav ul li:hover > ul { transition-delay: 300ms; -webkit-transition-delay: 300ms; visibility: visible; }
できあがり!マウスが上に乗ってから 300ms 後にメニューが表示されます。消えるときは遅延はありません。display はアニメ効果がつけられないので、効果をつけられる visibility を利用しました。
まあ、説明しておいてなんですが、メニューにごてごてと詰め込みすぎても誰も使わないですよ。シンプルであることのほうが重要だと思います。