2008-08-19 15 views
13

私はビルドしているサイトにドロップダウンカスケードメニューを実装しなければならないという不運な立場にあります。私は主にCSSベースのSuckerfishスタイルのソリューションを探しており、ネストされたULとLIの単純なセットで動作します。CSSドロップダウンメニュー - 「ベスト」?ほとんどの機能豊富な?

Son of Suckerfishは道に似ているように見えますが、調整の難しいユーザーがサイトをナビゲートしている(または気にしない)ので、マウスを2番目に移動させる方法が気に入らないそれは企業サイトなので、おそらくには私が実装したものを使用するためにがある人もいるでしょう)。私も必要について考えていませんでした

ニートの機能は大歓迎ですが、私が探している二つの主要な要素は次のとおりです。

  1. マルチレベル
  2. ネストされたUL/LI構造を用いた小型メニューが "mouseout"されたときに消える前に(もしかしたら設定可能なのでしょうか?)遅れてしまいます。

答えて

1

必要な機能を備えた純粋なCSSドロップダウンメニューを表示することはできません。何らかのJavascriptを使用する必要があります。 JQueryのようなライブラリか、onmouseover/outの代わりにonclickを使うSuckerfishのコードを変更することによって、

しかし、すべてのJavascriptルートを使用すると、1つのグループ(「調整困難なユーザー」)でも他のユーザー(Javascriptが何らかの理由でオフになっているユーザー)にとって困難になる可能性があります。

いくつかの選択肢を追加することをお勧めします。マウスで快適なマウスのためのマウス制御のホバーメニュー。アクセスキーを介したキーボードベースの制御などがある。

0

JavaScriptの外で遅延を追加する方法はありませんが、JavaScriptを使用する場合は、JavaScriptで制御するメニューを使用することもできます。

意味的に正しいnavパターンに従って、JavaScriptが表示されていないときに表示が通常(静的など)になるように設定すると、使用するものは何でも構いません。

あなたのターゲットオーディエンスは誰ですか?それ以上のものは誰ですか? JS障害者または調整困難なユーザー私は、後者が優先順位を必要としていると推測しています。

1

私は、Steve Gibsonのサイトgrc.comに実装されたソリューションを使用しています。それは私が必要とするすべてを行い、のjavascriptを使用します。あなたが探している遅延物はそこにないので、おそらくそれのためにいくつかのJavascriptを追加する必要があります。

0

Lee Theobald氏によると、ドロップ/ダウンにはJavascriptが必要であり、Jqueryは素晴らしい選択です。しかし、アクセシビリティの側面では、 "Listamatic"メニューと特別なthis nestedの素晴らしいリストを見てみましょう。

7

強くと入力すると、suckerfishメニューのjQueryアダプターsuperfishを使用することをお勧めします。それは機能の負荷が(そして遅れている)、いくつかの派手なアニメーション機能を追加し、正常なサルケフィッシュメニューに正常に低下します。余分なマークアップも必要ありません。

+0

死んでいます。 – lupefiasco

1

コーディネーションの問題の一部は、悪い設計に起因する可能性があります。可能であれば、かなり大きなボタンがあることを確認してください。理想的には、上部ナビゲーションボタンは、(左揃えではなく)その下に中央に表示されるドロップダウンメニューを持つことが理想的です。ドロップダウンのサブメニューも同様のパターンに従います。私は、このレベルのエラーパディングが調整されていないユーザーに対応していることがわかっており、JavaScriptのプログラミングの手間を省くことができます。

すべてのサイトはもちろん違いますので、私はこれを代替の「what-if」ソリューションとして紹介します。

0

私の最初の勧誘エコーは既に作られています - Steve Gibson's CSS Menu。これはJavaScriptを使用せず、取得する予定のクロスプラットフォーム対応であり、実装が比較的簡単です。

私のJSベースのリコメンデーションは、mygosuMenuに行きます。私はスティーブのメニューを見つける前に、すべてのプロジェクトでかなりの時間それを使ってきました。その高度に構成可能;スタイル、構造、およびメニューコードはすべて別です。その基本HTMLテーブルは、あなたの心のコンテンツにCSSを介してスタイルを付けることができます。

は、私はまだ後者を使用して2つのサイトを持っています
関連する問題