导航菜单 - 有想法吗？

Question

我目前正在自学创建网站 - 这个特定的网站是为我拥有的业务而设计的。 我正在使用 Dreamweaver CS3 来执行此操作。

我需要一些有关我尝试创建的水平导航菜单的帮助。 我的网站中有三个主要类别，每个类别都有自己的小图像来代表它们。 我希望将所有三个图像并排放置在我的公司徽标下方，充当导航菜单。

例如，其中一个部分是酒精。 当用户将鼠标放在“酒精”图像上时，下面会出现一个下拉菜单，显示各个部分，例如烈酒、啤酒等。

经过一些研究后，我无法完全确定执行此操作的最佳方法。 在学习 Dreamweaver 时，我遇到了 Spry Menus，我认为它可以完成这项工作。 但我现在也了解了 Fireworks CS3 中的弹出菜单（我也可以使用它）。

我真的正在寻找有关此事的其他意见，并且希望获得有关最佳路线的建议。

谢谢。

Answer 1

我更喜欢学习 CSS 菜单，而不是使用 Dreamweaver 生成菜单。 您可以尝试这个。

Answer 2

我会学习纯 CSS 菜单，然后为了获得更高级的功能，使用像 Superfish 这样的 jQuery 插件

我第一次学习 CSS 菜单的网站是 CSSplay。 这个人还有一个仅针对 CSS 菜单的新网站。

我想说的是，浏览其中一些的源代码会教给你很多东西，但最终我会建议使用 Superfish 或其他一些 jQuery 插件来获得更用户友好的菜单，尤其对于鼠标移开的延迟。 缺少鼠标移开延迟可能会导致大多数 CSS 菜单完全无法使用。

Answer 3

尝试http://www.alistapart.com/。 精彩的页面，有很多很好的教程。 http://www.alistapart.com/articles/horizdropdowns/ 例如向您展示如何使用列表和 CSS 构建水平菜单。 也许对您的项目来说是一个很好的起点。

Dreamweaver 确实是一个快速获得结果的好工具。 但是，如果您有兴趣学习实施网站，那么最好亲自动手。 以 http://www.w3schools.com/ 的教程和您选择的优秀编辑器为例从头开始构建您的网站或有趣的项目。 从长远来看，这项投资是有回报的。

Answer 4

首先，不要使用 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";
}

我匆忙制作的，所以它并不完美。