ドロップダウンするcssメニューいろいろ

Ads

サイトによっては必要ないかも
知れませんが、メニュー項目が
増えてくるとゴチャ付くので、
ドロップダウンするようにして
隠しておくと見やすくなりますね。

チュートリアルやジェネレーター、フレームワークなど。多すぎるので絞っています。

CSS Navigation Techniques

css-menu01
様々なタイプのメニューのサンプルの中にドロップダウンがいくつか。

CSS Navigation Techniques

CSS Drive / Multiple Levels

css-menu02
サンプルいっぱい。

CSS Drive / Multiple Levels

Free CSS Drop-Down Menu Framework

css-menu03
GPLライセンスで配布されるcssドロップダウンメニューのフレームワーク集です。かなり使えます。

Free CSS Drop-Down Menu Framework

38 jQuery And CSS Drop Down Multi Level Menu Solutions

css-menu04
jQueryを使ったドロップダウンメニューまとめ。

38 jQuery And CSS Drop Down Multi Level Menu Solutions

cssplay

css-menu05
css情報ならここ。右下にMulti-Level – Dropdownとあります。

cssplay

CSS Menu Generator

css-menu06
ドロップダウンメニューを作れるオンラインジェネレーターです。

CSS Menu Generator

purecssmenu

css-menu11
こちらもジェネレーター・・・だけど、よく落ちてる。

purecssmenu

10 Brilliant Multi Level Navigation Menu Techniques

css-menu07
マルチレベルタイプのメニュー10選。ドロップダウンもいくつか。

10 Brilliant Multi Level Navigation Menu Techniques

24 CSS (in some cases with jQuery) Navigation and Menu Tutorials

css-menu08
チュートリアルをお求めならこの記事が良さそうです。

24 CSS (in some cases with jQuery) Navigation and Menu Tutorials

Drop-Down Menu: 30+ Useful Scripts to Enhance Header Navigation

css-menu09
cssオンリーで作る、jsと組み合わせる、jQueryを使う、など、様々なドロップダウンメニューのまとめ。

Drop-Down Menu: 30+ Useful Scripts to Enhance Header Navigation

list of pure css drop-down menu tutorials

css-menu10
cssのみで作るドロップダウンメニューいろいろ

list of pure css drop-down menu tutorials

以上、まとめです。ユーザビリティ向上するかは意見が分かれそうですが、何かと使えるので必要に応じて活用したいですね。