Question

我目前正在教自己创建网站 - 这个特定的网站是为了我的业务。我正在使用Dreamweaver CS3。

我正在尝试创建水平导航菜单。我的网站中有三个主要类别，每个类别都有自己的小图像来代表它们。我希望将所有三张图片并排放在我公司徽标下面，作为导航菜单。

例如，一节是酒精。当用户将鼠标放在“酒精”图像上时，下方会显示一个菜单，显示精神，啤酒等小节。

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

我真的在寻找关于这个问题的其他意见，并希望了解有关最佳路线的任何建议。

感谢。

Answer 1

首先，不要使用Dreamweaver中内置的代码段。他们很糟糕。

使用JavaScript，甚至可以像jQuery这样的JS框架。它为这种情况提供了toggle（）函数。

通常，您应该将JS函数应用于图像的鼠标悬停。该功能显示或隐藏div（您的下拉列表）。您可以通过设置css参数display：none（hidden）或display：block（visible）。

来实现

显示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

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

Answer 3

我会学习纯CSS菜单，然后学习更高级的功能use jQuery plugins like Superfish

我首先从CSSplay学习CSS菜单的网站。这个人也有一个newer site aimed only at CSS menus。

我会说虽然其中一些的源代码会教你很多，但最终我会建议使用Superfish或其他一些jQuery插件来获得更加用户友好的菜单，特别是延迟在mouseout上。缺少鼠标输出延迟会导致大多数CSS菜单完全无法使用。

Answer 4

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

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

导航菜单 - 想法？

4 个答案: