0

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

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

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

在做了一些研究之后，我不能完全决定最好的方法来做到这一点。在学习 Dreamweaver 时，我遇到了 Spry Menus，我认为它可以胜任这项工作。但我现在也了解了 Fireworks CS3 中的弹出菜单（我也可以使用）。

我真的在寻找有关此事的其他意见，并希望获得有关最佳途径的任何建议。

谢谢。

4

4 回答 4

0

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

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

我会说尽管其中一些的源代码会教给你很多东西，但最终我会推荐使用 Superfish 或其他一些 jQuery 插件来获得更用户友好的菜单，尤其是鼠标悬停延迟。缺少 mouseout 延迟会使大多数 CSS 菜单完全无法使用。

于 2009-07-12T13:47:08.167 回答
0

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

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

于 2009-07-12T21:56:49.743 回答
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

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

于 2009-07-11T12:45:09.287 回答