ドロップダウンメニュー30以上のヘッダーナビゲーションを強化するための便利なスクリプト

ドロップダウンメニュー （プルダウンメニューとも呼ばれます）は、ほとんどのWebデザインで不可欠です。それは効果的でユーザーフレンドリーなウェブサイトの作成において重要な役割を果たします。画面スペースを圧迫している長いメニューを整理して、より整理したカテゴリ - サブカテゴリパターンで表示させるのは良い解決策です。.

この記事では、私たちはあなたにいくつかのあなたに見せたいのです 最適なドロップダウンメニュースクリプト 私達は知るようになる。これらのドロップダウンメニューは、 CSS のみ, CSSとJavascript 現在のJavascriptライブラリで動作するメニュー jQuery, MooTools そして プロトタイプ. ジャンプ後の全リスト.

ここにあなたが興味を持っているかもしれないと私たちが考え出したいくつかの関連記事があります：

HTMLテーブルを構築する
Webデザイナーのためのスターターキット
CSSタブベースのナビゲーションスクリプト

CSS（のみ）

クライアントのブラウザでJavascriptが無効になっているのではないかと心配な場合は、これらのCSSのみのドロップダウンメニューで失敗することはありません。.

CSSドロップダウンメニューフレームワーク. タイトルはそれをすべて言います。これはGNU General Public Licenseの下でリリースされたフレームワークです。クロスブラウザ互換性があり、軽量で簡単に変換可能で、既存の多くのドロップダウンメニューを模倣できます。例えばFlickr、Adobe、そしてMTV.com.

究極のCSSのみのドロップダウンメニュー

CSS Expressのドロップダウンメニュー. 他の「純粋な」CSSメニューに見られるいくつかの制限なしに、クイック（エクスプレス）CSSドロップダウンメニューを作成するのに役立ちます。.

CSS + Javascript

Javascriptの助けを借りて、ドロップダウンメニューはよりインタラクティブになるか、少なくともユーザーエクスペリエンスを向上させる微妙なアニメーションを表示します。 CSSは、その一方で、ルックアンドフィールが容易にcuztomizableであることを確認してください.

全レベルナビゲーションメニュー（v2.2）. 無限レベルのサブメニューをサポートするCSS / HTMLリストベースのメニュー。軽量で実装が簡単.

ドロップダウンタブ（5スタイル）. ドロップダウンタブは、各タブの第2レベルのドロップダウンメニューをサポートする水平CSSタブメニューです。 5種類のスタイルがあります.

Chrome CSSドロップダウンメニュー. Chrome MenuはCSSとJavaScriptのハイブリッドドロップダウンメニューです。設定が簡単で、検索エンジンにやさしいです。メインメニューバーはCSSリストで構成されていますが、ドロップダウンメニューはページ上の通常のDIVタグです。.

jQuerys

あなたのサイトにjQuery Javascript Libraryを実装したことがあるなら、あなたが知っておくべき本当にクールなjQueryベースのドロップダウンメニューがいくつかあります。.

スムーズなナビゲーションメニュー . スムーズナビゲーションメニューは、jQueryを使用して強化されたマルチレベルのCSSリストベースのメニューで、Webサイトのナビゲーションをスムーズにします。これも似たようなものです - jQueryマルチレベルCSSメニュー.

スーパーフィッシュ. Superfishは、既存の純粋なCSSドロップダウンメニューを使用する拡張されたSuckerfishスタイルのメニューjQueryプラグインです。 [デモ|ダウンロード]

メガドロップダウンメニュー. 単なる新しい行のリンク以上のものを含むドロップダウンメニュー。それはまた、グループリンクを作り、ナジネーションをずっと簡単にします！ [デモ]

MooTools

Mootoolsを使ったJavaScriptドロップダウンメニュー. Mootools 1.2でドロップダウンメニューを作成するための簡単で目立たない方法[デモ|ダウンロード]

UvumiToolsドロップダウンメニュー. Mootools Javascript Frameworkを使用して、HTMLの順序付けされていないリストから作成されたシンプルなマルチレベルメニュー.

控えめなMootoolのドロップダウンメニュー

まね

Diggヘッダーの設計. 実際にDiggのように見えるドロップダウンメニューを構築する方法に関するステップバイステップのチュートリアル。 [デモ|ダウンロード]

その他の.

izzyMenu. コードを1行も書くことなく、または既製のものを使用することなく、Webサイト用のプロフェッショナルに見えるCSSメニューをオンラインで作成できます。.

PureCSSメニュー. 無料のCSSドロップダウンメニュージェネレータ