Hatena::ブログ(Diary)

当面C#と.NETな記録 このページをアンテナに追加 RSSフィード

2012/12/15 (土)

[] 遅延付き pure CSS ドロップダウンメニューの作り方  遅延付き pure CSS ドロップダウンメニューの作り方 - 当面C#と.NETな記録 を含むブックマーク  遅延付き pure CSS ドロップダウンメニューの作り方 - 当面C#と.NETな記録 のブックマークコメント

How To Create a Delayed Pure CSS Dropdown Menu

f:id:siokoshou:20121216073237j:image

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 を利用しました。

まあ、説明しておいてなんですが、メニューにごてごてと詰め込みすぎても誰も使わないですよ。シンプルであることのほうが重要だと思います。

tsutomu3tsutomu3 2012/12/17 09:14 お久しぶりです。
CSSはよく知らないですが、いろいろできるんですね。

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証

2005 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 11 | 12 |
2006 | 01 | 02 | 03 | 04 | 06 | 09 | 11 | 12 |
2007 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 |
2008 | 01 | 02 | 03 | 04 | 05 | 06 | 08 | 09 | 10 | 12 |
2009 | 01 | 03 | 04 | 06 | 07 | 08 | 09 | 10 | 11 | 12 |
2010 | 07 |
2011 | 04 | 07 | 10 |
2012 | 04 | 12 |
2013 | 08 |
2014 | 03 | 08 |
2017 | 09 |