如何實現這個菜單？

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。