Question

是否有任何教程（可能是一些JavaScript框架？）将解释如何生成如下的顶级菜单？

http://www.clinique.co.uk

下拉部分可以是任何宽度，可以包含图像/链接。

Answer 1

我建议先学习一些jQuery。这很容易学习，并且有很多很棒的插件！

例如：Menu Plugins。

如果您使用的是ASP.NET，那么Rick Strahl（除官方jQuery网站外）还有一篇很棒的博客文章：http://www.west-wind.com/weblog/posts/459197.aspx。

Answer 2

试试jQuery。它使创建JavaScript UI变得更加容易。它也有很多插件。

即使您找不到教程来制作与该网站上的菜单特别相似的菜单，也应该很容易调整常规下拉菜单 - 授予您了解JavaScript和CSS。

E.g。大多数下拉菜单使用嵌套的UL元素来创建分层菜单/列表。 LI元素表示每个菜单项，可以包含从文本标签到子菜单的任何内容。带下拉菜单的基本导航栏可能如下所示：

<ul>
    <li>
        <a href="#">menu 1</a>
        <div class="menu">
            <ul>
                <li>foo</li>
                <li>bar</li>
            </ul>
        </div>
    </li>
    <li>
        <a href="#">menu 2</a>
        <div class="menu">
            <ul>
                <li>foo2</li>
                <li>bar2</li>
            </ul>
        </div>
    </li>
    <li>
        <a href="#">menu 3</a>
        <div class="menu">
            <ul>
                <li>foo3</li>
                <li>bar3</li>
            </ul>
        </div>
    </li>
</ul>

要创建您想要的外观，您只需将图像添加到menu div并应用相应的CSS：

        <div class="menu">
            <ul>
                <li>foo</li>
                <li>bar</li>
            </ul>
            <img src="your-image" />
        </div>

如何实现这个菜单？

2 个答案: