如何实现这个菜单？

Question

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

http://www.clinique.co.uk

当下拉部分可以是任何宽度，并且可以包含图片/链接。

Answer 1

尝试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> 

Answer 2

我建议先学习一下jQuery。这非常容易学习，并且有很多优秀的插件！

例如：Menu Plugins。

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