2011-07-14 18 views
0

ドロップダウンメニューの作成には、superfishや純粋なCSSメニューなどのjQueryメニューがあります。 JSメニューとCSSメニューには違いがありますか?CSSメニューとJavaScriptメニュー

デフォルトのアンカーを上書きするのに、onclickイベントは必要ありません。メニュー項目をクリックしてから別のページに<a href="...">...</a>をたどらなければならない。

答えて

2

明らかな違いは、JSメニューの方がはるかにカスタマイズ可能であることです。 CSSだけでメニューが表示される速さなどのコントロールはできません。

+1

[CSS変換](http://www.w3.org/TR/css3-2d-transforms/)で速度を制御できます。 –

+0

ニース、チップのおかげで。一般的には、あなたはまだCSSよりも柔軟性があります。 –

3

違い:

  1. JavaScriptのユーザーがJavaScriptを無効にしている場合打破します。ユーザーがCSSを無効にした場合、CSSメニューは機能しません。(これはあまり一般的ではありません)
  2. jQueryのようなライブラリを介して作成されたJavaScriptは、クロスブラウザの問題がライブラリによって処理されるためです。 CSSは複雑なエフェクトを作成するのに十分ではありません(JavaScriptはプログラミング言語であることを忘れないでください。プログラミング言語は、あなたが望むほとんどのことを行うことができます)。宣言的
  3. CSSメニューは通常、サイズがより軽いです(たとえば、Thought Resultsを参照)。これは、今日のインターネットの速度にはあまり関係ありません。
  4. 時々メニューでグルーピングが必要ですが、これはCSSでは達成できませんが、JavaScriptで行うことができます。 (グループ化とは、リンク先のアドレスをクリックせずに項目をクリックしてドロップダウンすることを意味します)。
+0

Re#2:ほとんどのライブラリはマルチブラウザで、最近の少数の最新のブラウザ(ほとんどのリスト5)で動作するように設計されています。 jQueryはIE 6との互換性を主張していますが、StackOverflowはjQueryを使って書かれていますが、IE 6を使用してアクセスすると多くのエラーが発生します(ほぼすべてのスタイリングが無効になります)。 – RobG

+0

サブメニューを実行する方法があります(#5)は、CSSではなく、複雑な形で記述されています。 –

1

哲学的には、CSSは本当にスタイリングについてのJS、インタラクションについてのJS。しかし、WebKitがCSSトランジションでフルスロットルになったので、そのラインはかなりぼやけています。

最後に、できるだけ多くのCSSを使用して、追加された洗練されたインタラクションのレベルでJavaScriptを追加することは素晴らしいことです。キーボードナビゲーションのようなもの...あるリンクから次のリンクへマウスを移動させる微妙な遅延...アニメーションなど

+0

行は常にぼやけています。 CSSには訪問済みのリンクやホバー効果のようなものがあり、インタラクションに基づいてプレゼンテーションを変更しています。 –

1

私は開発者だとは思うが、私はいつもプログラミングを避けようとしている。

私は、onHoverイベントを使ってドロップメニューDIVを表示するCSSメニューに行きます。

JavaScriptは他のアプリの影響を受ける可能性があります。変数を複製している可能性があります。また、通常はJSをサポートしていないモバイルデバイスに簡単に移植することができます