用 CSS 创建一个大的超级菜单

Posted 2023-04-13

【中文标题】用 CSS 创建一个大的超级菜单

【英文标题】：Creating a large Mega Menu with CSS

【发布时间】：2012-07-26 16:55:39

【问题描述】：

我正在尝试创建一个类似于http://rackspace.com 的大型菜单。我已经尝试过在其他一些问题中给出的教程，但是其中一个使用了很多图像，其中一个不适用于他们链接到的 jQuery 版本。我想保留所有 CSS，但如果必须，我可以使用一些 javascript。

我不明白如何制作复杂的大型菜单，而只会制作简单的下拉菜单。如果有人可以为我提供此代码，我将非常高兴。我现在正在学习 CSS，我认为这也可以让我提高自己的知识。

谢谢，

斯科特

【问题讨论】：

What have you tried?

我查看的另一个问题中有这个 JS Fiddle，但是当将它复制到我的实际页面时，它不起作用，另外，它使用 标签，如果我会添加很多链接，因为那会很烦人。无论如何，这里是 JS Fiddle：jsfiddle.net/hgZGS

那个fiddle使用jquery库；您确定在您的文档中包含该库吗？

【参考方案1】：

这是一个非常漂亮的解决方案，一个快速的谷歌搜索出现了。自己没有尝试过，但看起来很有希望：http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-a-kick-butt-css3-mega-drop-down-menu/

【讨论】：

我将它用于我的其他网站之一。这很好，但我正在寻找一个只有功能的空白。

【参考方案2】：

你的问题太笼统了。我们可以在这里编写的简单 HTML 和 CSS 代码不会实现您想要实现的目标。

所以你可能对这个 jQuery 插件和 CSS 框架感兴趣： https://myflashlabs.github.io/24component-bars/

它可以帮助您快速轻松地创建具有许多功能的响应式大型菜单、页眉、侧边栏和页脚...这正是您想要的 :)

当已有解决方案时，您无需从一开始就自己编写代码！

【参考方案3】：

您需要做的快速示例：

http://jsfiddle.net/KqZd4/

我知道这看起来不像那些，但这确实是您需要的所有功能。只需展开下拉列表中的内容

【讨论】：

对此的快速提问。当我使用它并将“.sub li”的宽度设置为 1000px 时，它会移动下一个菜单图标，如下图所示：i.imgur.com/YbUY3.png 我如何防止这种情况发生？

【参考方案4】：

<li class="main_list">Electronics
<ul>
<p class="category_header">Buy Any Electronics Item And Get Flat 50% OFF</p>
<ol>
<li>Mobiles</li>
<li>Item1</li>
<li>Item2</li>
</ol>

<ol>
<li>Tablets</li>
<li>Item1</li>
<li>Item2</li>
</ol>

</ul>
</li>

添加更多你想要的

那么简单的样式

#main_menu

background-color:#1C1C1C;
float:left;
padding:0px;
width:700px;
height:50px;
line-height:50px;
margin-left:140px;
border-radius:5px;

#main_menu .main_list

color:white;
list-style-type:none;
float:left;
border-left:1px solid #666;
padding-left:27px;
padding-right:27px;


#main_menu .main_list:hover

color:#2E9AFE;

.main_list ul

background-color:white;
width:600px;
position:absolute;
left:150px;
width:700px;
padding:0px;
float:left;
padding-bottom:10px;

.main_list ul p

color:white;
background-color:#2E9AFE;
margin:0px;
text-align:left;
padding-left:10px;
font-size:20px;
font-weight:bold;

.main_list ul ol

float:left;
padding:0px;
list-style-type:none;
margin-left:30px;

.main_list ul ol li

line-height:25px;
font-weight:bold;
font-size:16px;
color:#2E9AFE;

如果你有任何问题理解这里是一个完整的教程 http://talkerscode.com/webtricks/mega-dropdown-menu-like-ecommerce-using-css.php

【参考方案5】：

试试这个

@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css');
* 
  box-sizing: border-box;
  font-family: sans-serif;


body 
  margin: 0;


/* Style Navigation bar */
.navbar 
  display: -webkit-flex;
  display: flex;
  background-color: #e3e3e3;


.navbar a 
  display: block;
  text-decoration: none;
  color: black;
  padding: 1.1em 1em;
  font-size: 1.1em;
  border-bottom: 3px solid transparent;
  transition: 0.1s;


.navbar > a:hover, .dropdown > a:hover 
  border-bottom-color: #FA7D19;


/* Style Mega Menu */
.dropdown-content 
  display: none;
  position: absolute;
  width: 90%;
  left: 5%;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  overflow: hidden;


.dropdown-content .header 
  padding: 16px;
  color: #777;
  background: white;


.dropdown:hover .dropdown-content 
  display: block;


/* Create three equal columns that stacks next to each other */
.row 
  display: -webkit-flex;
  display: flex;


.column 
  width: 100%;
  padding: 10px;
  background: #f8f8f8;


.column a 
  color: black;
  padding: 16px;
  text-decoration: none;
  display: block;
  text-align: left;


.column a:hover 
  background-color: #ddd;


/* Makes the three columns stack on top of each other instead of 
   next to each other (when screen width is 600px or less) */
@media screen and (max-width: 600px) 
  .row 
    flex-direction: column;
  

<div class="navbar">
  <a href="#">Home</a>
  <div class="dropdown">
    <a href="#">Dropdown <i class="fa fa-caret-down"></i></a>
    <div class="dropdown-content">
      <div class="header">
        <h2>Mega Menu</h2>
      </div>   
      <div class="row">
        <div class="column">
          <h3>Category 1</h3>
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
        </div>
        <div class="column">
          <h3>Category 2</h3>
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
        </div>
        <div class="column">
          <h3>Category 3</h3>
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
        </div>
      </div>
    </div>
  </div> 
  <a href="#">Pricing</a>
</div>

<div style="padding:10px 15px;">
  <h1>Create a Mega Menu</h1>
  <p>Hover over the "Dropdown" link to see the mega menu.</p>
</div>

参考：How To Create a Mega Menu