0

私は現在、ウェブサイトの作成を独学で学んでいます。この特定のサイトは、私が経営しているビジネスのためのものです。そのために Dreamweaver CS3 を使用しています。

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

たとえば、あるセクションはアルコールです。ユーザーがマウスを「アルコール」の画像の上に置くと、その下にメニューがドロップダウンして、スピリッツ、ビールなどのサブセクションが表示されます。

いくつかの調査を行った後、これを行うための最良の方法を決定することはできません。Dreamweaver を学習しているときに、Spry Menus に出くわしました。しかし、Fireworks CS3 のポップアップ メニューについても学びました (これも利用できます)。

私は本当にこの問題について他の意見を探しています.

ありがとう。

4

4 に答える 4

0

まず、dreamweaverに組み込まれているスニペットを使用しないでください。彼らはひどいです。

JavaScriptを使用します。おそらく、jQueryのようなJSフレームワークを使用します。そのような状況のためにtoggle（）関数を提供します。

一般的に、画像のマウスオーバーにはJS関数を適用する必要があります。この関数は、div（ドロップダウン）を表示または非表示にします。これは、cssパラメーターdisplay：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";
}

急いで作ったので完璧ではありません。

于 2009-07-11T12:43:29.320 に答える
0

Dreamweaverを使用してCSSメニューを生成するのではなく、CSSメニューを学習したいと思います。これを試すことができます。

于 2009-07-11T12:45:09.287 に答える
0

私は純粋なCSSメニューを学び、さらに高度な機能については、SuperfishのようなjQueryプラグインを使用します

私が最初にCSSメニューを学んだサイトはCSSplayでした。この同じ人は、CSSメニューのみを対象とした新しいサイトも持っています。

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

于 2009-07-12T13:47:08.167 に答える
0

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

Dreamweaver は、迅速な結果を得るための優れたツールです。しかし、Web サイトの実装を学ぶことに興味がある場合は、手を汚すよりはましです。たとえば、http://www.w3schools.com/のチュートリアルと、好みの優れたエディターを使用して、Web サイトや楽しいプロジェクトをゼロから作成します。長期的には、この投資は報われます。

于 2009-07-12T21:56:49.743 に答える