2011-11-08 3 views
3

this oneのようなメニューを作成したいと思います。パフォーマンスは私にとって非常に重要な要素です。 これまで私は、JavaScriptとCSSの2つの異なるアプローチを経験しました。どちらが速くて軽量なアプローチですか?マルチレベルメニューを作成するための最速かつ最も軽量なメニュー手法

私のウェブサイトはJavascriptで動作しますが、私が興味を持っているのは、CSSアプローチを選択すると、何らかの形でJavascriptを無効にして静的なページが表示される/彼女?

例について私の説明をします。私のメニューにDOWNLOADボタンがあるとします。ユーザーにJSがある場合、ダウンロードコンテンツはjQueryの助けを借りて同じページに表示されますが、ユーザーがJSを無効にしている場合、メニュー項目をクリックするとdownload.phpページに移動します。

ところで、お勧めの方法の無料の解決方法がある場合は、そのリンクを入力してください。ありがとうございました。

答えて

2

CSSのメニューはJSのものよりも使いにくい:サブメニューは、マウスが1ms長くても1pxオフの場合に即座に隠れる。 JSメニューに100〜200msの遅延を加えて、訪問者からの小さな移動ミスを許可することができます。誰もが完全なマウススキルを持つゲーマーではありません;

メガドロップダウンメニューは、提供した例よりも優れています。ウェブ上で縦横に移動するのは難しいです(デスクトップ上でさえ、あまりアクセスしない機能のソフトウェアでのみ使用されます)。メガドロップダウンは訪問者に素敵な見出しを持つリンク全体を表示します。

スマートフォンで簡単にサイトを使用できるようにするには、クリック時(つまりメインリンクをクリックした後)にサブメニューを表示するメニューを検討することもできます。

EDIT: 私はあなたがそれらについて尋ねることなく、これらのリンクを追加しましたはずですが、2番目の1が、見つけることができませんでした(今では私のブックマークにです、ありがとう:))

+0

リンクや簡単な例を教えてください。私はウェブ世界には少し新しいです。 –

+0

確かに、3つの関連リンクを追加しました – FelipeAls

+0

ありがとうございました。私は最良のアプローチは、このメソッドをいくつかの他の回答(psrのようなもの)で提示する方法と組み合わせることだと思います。 –

1

表示されるCSSベースのメニューを使用して、できるだけ早くJSを使用して非表示にすることができます。または、JSに依存する別のメニュースタイルで置き換えることもできます。

CSSの方が高速で軽量です。 JSはより柔軟です。ハイブリッドは重い重量です。

+0

(ほとんどの時間)をより強く、よりバグのないコードを作成します。 。しかし、私の質問は、どんなアプローチがより速く/より良いか、ハイブリッドメソッドを使用できるかどうか(JS対応のクライアントと無効なクライアントの両方をサポートする)です。 –

+0

@AlirezaNoori - 純粋なCSSを使用してハイブリッドを行うことができます方法。次に、javascriptを使用して純粋なCSSメソッドを隠し、JSメソッドを実装します。それはどちらの場合でも有効です。 – psr

+0

ありがとうございます。簡単な例を教えてください。 –

0

最良のオプションはにありますあなたが探している影響を達成するために純粋なCSSを使用してください。この方法で、jsを有効にすることに頼る必要はありません。少なくとも30〜50%のユーザーが、必要なときまで、jsを有効にしてWebをブラウズします。少なくとも、自分の経験やサイトからは維持しています。

0

あなたのCSSは、デフォルトで子サブメニューを非表示にする必要があります。トップレベルの各アイテムは、通常そのメニューにあるアイテムにアクセスできるページにリンクする必要があります。

例えば、Catsと呼ばれるメニュー項目があり、子供の品種が様々な品種のCatsである場合、トップレベルのページ(/ cats /)にも品種へのリンクが必要です。

要するに、トップレベルのメニューは、理想的には、子メニューにあるもののインデックスにリンクする必要があります。このようにして、メニューをクリックした人は、Javascriptを持っているかどうかにかかわらずメニューの内容にアクセスできます(またはメニューなどで奇妙なiPadを使用しています)。

1

progressive enhancementについて学ぶ。 CSSとJSの両方を使用してください!

javascriptを使用しない人の割合が非常に低いため、正常に機能する基本的なCSSメニューを作成してから、JSでビルドして必要なものを取得する必要があります。

だけでなく、それは、アクセシビリティのために良いですが、あなたが戻って機能して何かに落ちることが保証されているとして、それはまあ、これは一種の私の質問自体に記載されている

関連する問題