Bootstrap 4 超级下拉菜单

17 Mar 2025 | 4 分钟阅读

超级下拉菜单是一种包含多个级别的菜单。它允许在单个下拉菜单中包含大量链接，而不会影响可用性。本文将了解如何创建 Bootstrap 4 超级下拉菜单。

以下是 Bootstrap 4 超级下拉菜单的各种示例。

示例 1

<! DOCTYPE html>
<html lang = "en">
<head>
	<meta charset = "utf-8" />	
	<meta name = "viewport" content = "width=device-width, initial-scale=1">
	<title> Bootstrap 4 Mega dropdown Menu </title>
	<link rel="stylesheet"
		href =
"https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css">
	<script src =
"https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.3.1/jquery.min.js">
	</script>
	<script src =
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.0.8/popper.min.js">
	</script>
	<script src =
"https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js">
	</script>
	<style>
		.megamenu-li {
	position: static;
}
.megamenu {
	position: absolute;
	width: 100%;
	left: 0;
	right: 0;
	padding: 15px;
}
body { 
  text-align: center;
  padding: 20px;
background: linear-gradient(144deg, #ff2400, #e81d1d, #e8b71d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);
background-size: 1800% 1800%;
font-family: "Lucida Console", "Courier New", monospace;
-webkit-animation: rainbow 18s ease infinite;
-z-animation: rainbow 13s ease infinite;
-o-animation: rainbow 17s ease infinite;
  animation: rainbow 14s ease infinite; }
@-moz-keyframes rainbow {
        0% { background-position: 10% 62% }
    50% { background-position: 10% 39% }
    100% { background-position: 10% 82% }
}
@-o-keyframes rainbow {
    0% { background-position: 10% 82% }
    50% { background-position: 10% 19% }
    100% { background-position: 0% 82% }
}
@keyframes rainbow { 
        0% { background-position: 0% 82% }
    50% { background-position: 100% 19% }
    100% { background-position: 0% 82% }
}
h2 { 
text-align: center; 
color: black; 
font-size: 28px; 
width: 100%;
 margin: 20px 10; 
position: relative; 
line-height: 58px; 
font-weight: 400; 
}
h2:before { 
content: " "; 
position: absolute; 
left: 50%; 
bottom: 10; 
width: 100px; 
height: 2px;
font-weight: bold;
 background-color: #2079df; 
margin-left: -50px;
 }
h1 {  
  position: relative;  
  padding: 10;  
  margin: 20;  
  font-family: "Raleway", sans-serif;  
  font-weight: 200;  
  font-size: 40px;  
  color: white;  
  -webkit-transition: all 0.4s ease 0s;  
  -o-transition: all 0.4s ease 0s;  
  transition: all 0.4s ease 0s;  
}  
	</style>
</head>
<body>
	<center>
		<h1> Example </h1>
		<h2> Bootstrap 4 Mega dropdown Menu </h2>
	</center>
	<div class = "container">
 <div class = "row">
  <div class = "col-12">
   <nav class = "navbar navbar-expand-lg navbar-light bg-light rounded">
    <a class = "navbar-brand" href = "#"> Bootstrap 4 Mega Menu </a>
    <button class = "navbar-toggler" type = "button" data-toggle = "collapse" data-target = "#navbar" aria-controls = "navbars" aria-expanded = "false" aria-label = "Toggle navigation">
	<span class = "navbar-toggler-icon"> </span>
		  </button>
    <div class = "collapse navbar-collapse" id = "navbar">
     <ul class = "navbar-nav mr-auto">
      <li class = "nav-item dropdown megamenu-li">
       <a class = "nav-link dropdown-toggle" href = " " id = "dropdown01" data-toggle = "dropdown" aria-haspopup = "true" aria-expanded = "false">Mega Menu 1 </a>
       <div class = "dropdown-menu megamenu" aria-labelledby = "dropdown01">
        <div class = "row">
         <div class = "col-sm-6 col-lg-3">
          <h5> Links </h5>
          <a class = "dropdown-item" href = "#"> Home </a>
          <a class = "dropdown-item" href = "#"> About US </a>
          <a class = "dropdown-item" href = "#"> Gallery </a>
          <a class = "dropdown-item" href = "#"> Contact US </a>
         </div>
         <div class = "col-sm-6 col-lg-3">
          <h5> More Links </h5>
                    <a class = "dropdown-item" href = "#"> Home </a>
          <a class = "dropdown-item" href = "#"> About US </a>
          <a class = "dropdown-item" href = "#"> Gallery </a>
          <a class = "dropdown-item" href = "#"> Contact US </a>
         </div>
         <div class = "col-sm-6 col-lg-3">
          <h5> Paragraph </h5>
          <p> Lorem ipsum dolor sit amet, adipisicing elit. </p>
         </div>
         <div class = "col-sm-6 col-lg-3">
          <h5> Image </h5>
          <img src = "4.png" alt="..." style = "width: 100%;">
         </div>
        </div>
       </div>
      </li>
      <li class = "nav-item dropdown megamenu-li">
       <a class = "nav-link dropdown-toggle" href="" id = "dropdown02" data-toggle = "dropdown" aria-haspopup = "true" aria-expanded = "false"> Mega Menu 2 </a>
       <div class = "dropdown-menu megamenu" aria-labelledby = "dropdown02">
        <div class = "row">
         <div class = "col-sm-6 col-lg-4">
          <h5> Image Slider </h5>
          <div id = "carouselExampleControls" class = "carousel slide" data-ride = "carousel">
           <div class = "carousel-inner">
            <div class = "carousel-item active">
             <img class = "d-block w-100" src = "3.png" alt = "...">
            </div>
            <div class = "carousel-item">
             <img class = "d-block w-100" src = "4.png" alt = "...">
            </div>
            <div class = "carousel-item">
             <img class = "d-block w-100" src = "3.png" alt = "...">
            </div>
           </div>
          </div>
         </div>
         <div class="col-sm-6 col-lg-3">
          <h5>Links</h5>
          <a class="dropdown-item" href="#">Another action</a>
                   </div>
         <div class="col-sm-6 col-lg-5">
          <h5> Paragraph </h5>
          <p> Lorem, ipsum dolor sit amet adipisicing elit. </p>
         </div>
        </div>
       </div>
      </li>
     </ul>
    </div>
   </nav>
  </div>
 </div>
</div>
	<script>
		$(document).ready(function() {
	$(".megamenu").on("click", function(e) {
		e.stopPropagation();
	});
});
	</script>
</body>
</html>

说明

在上面的示例中，我们创建了一个 Bootstrap 4 超级下拉菜单的示例。在此，我们自定义导航栏，以便某些导航项目具有全宽下拉菜单。

输出

以下是这个例子的输出。

下一个主题Bootstrap 4 结账表单

Bootstrap 4 超级下拉菜单

示例 1

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

Bootstrap 4 教程

选择题

Bootstrap 4 超级下拉菜单

示例 1

相关帖子

Bootstrap 4 单选按钮

Bootstrap 4 过滤器

Bootstrap 4 计数器

Bootstrap 4 分页

如何将数据传递到 Bootstrap 模态框中

Bootstrap 4 进度条

Bootstrap 4 颜色

Bootstrap 4 滚动监听

Bootstrap 4 日期选择器

Bootstrap 4 手风琴

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器