ナビゲーションメニュー - アイデア？

Question

私は現在、ウェブサイトを作成するために自分自身を教えています - この特定のサイトは、私が持っているビジネスのためのサイトです。私はそうするためにDreamweaver CS3を使用しています。

私が作成しようとしている水平ナビゲーションメニューで助けが必要です。私は自分のウェブサイトに3つの主要なカテゴリーを持っています。それぞれのカテゴリーは、自分の小さなイメージを持っています。ナビゲーションメニューとして機能する私の会社のロゴの下に横に3つの画像を並べたいと思っています。

たとえば、1つのセクションは「アルコール」です。ユーザーが「アルコール」画像上にマウスを置くと、下にメニューが表示され、霊やビールなどのサブセクションが表示されます。

これを実行する最良の方法を決定することはできません。 Dreamweaverを学びながら、私はSpry Menusに出会った。私はその仕事をすると思った。しかし、Fireworks CS3のポップアップメニューについても学びました（これも私にもあります）。

私はこの問題に関するいくつかの意見を本当に探しており、これを利用するための最善のルートについての推奨事項を感謝します。

ありがとうございました。

Answer 1

まず、Dreamweaverで作成したスニペットを使用しないでください。彼らはひどいです。

jQueryのようなJSフレームワークでもJavaScriptを使用します。このような状況では、toggle（）関数が用意されています。

一般に、画像のマウスオーバーにJS機能を適用する必要があります。その関数はdivを表示または非表示にします（ドロップダウン）。 cssパラメータ表示を設定することで、これを実現できます：none（隠し）またはdisplay：block（可視）。

例のdivを示すために：

<a href="#" onmouseover="show("menu-1")" onmouseout="hide("menu-1")">My menu 1</a> 

<div id="menu-1"> 
    <ul> 
     <li>Alcohol</li> 
     <li>Spirit</li> 
    </ul> 
</div> 

そして、いくつかのjavascript：

function show(myid) 
{ 
    document.getElementById(myid).style.display = "block"; 
} 

function hide(myid) 
{ 
    document.getElementById(myid).style.display = "none"; 
} 

を、私は急いで、それは完璧ではないので、作られました。

Answer 2

Dreamweaverを使用してCSSメニューを作成するのではなく、CSSメニューを習得する方が好きです。 this oneを試すことができます。

Answer 3

私はuse jQuery plugins like Superfish

私は最初からCSSのメニューを学んだサイトがCSSplayた、より高度な機能のために、その後、純粋なCSSメニューを学び、そしてでしょう。この同じ男にもnewer site aimed only at CSS menusがあります。

私はそれらのいくつかのソースコードはあなたに多くのことを教えてくれますが、最終的に私はマウスアウト上の遅延のために特に、よりユーザーフレンドリーなメニューのSUPERFISHまたは他のいくつかのjQueryプラグインを使用することをお勧めしますけれども行くと言うでしょう。マウスアウトの遅延がないと、ほとんどのCSSメニューが完全に使用できなくなる可能性があります。

Answer 4

http://www.alistapart.com/を試してください。良いチュートリアルがたくさんある素敵なページ。たとえば、http://www.alistapart.com/articles/horizdropdowns/は、リストとCSSを使用して水平メニューを作成する方法を示しています。多分、プロジェクトの出発点になります。

Dreamweaverは、本当に速い結果を得るための優れたツールです。しかし、ウェブサイトの実装を学ぶことに興味がある場合は、手を汚す方がよいでしょう。例えば、http://www.w3schools.com/からチュートリアルを受け取り、あなたの好きなエディタを選んで、あなたのウェブサイトや楽しいプロジェクトを最初から構築してください。長期的には、この投資は支払われます。