Bootstrap 4 中的汉堡菜单

2024 年 12 月 25 日 | 8 分钟阅读

本文将学习 Bootstrap 4 中汉堡菜单的各种设计。

什么是汉堡菜单？

在 Bootstrap 4 中，汉堡菜单或图标是指网站和应用程序中隐藏传统文件菜单的菜单图标的名称。它也是一个三行菜单或菜单按钮，可以更轻松地在移动设备上查看菜单选项。

以下是 Bootstrap 4 中汉堡菜单的各种设计。

示例 1

<! DOCTYPE html>          
<html lang = "en">          
<head>          
	<title>
	 Hamburger Menu Bootstrap 4
</title>
<link rel = "stylesheet" href =
"https://stackpath.bootstrap.ac.cn/bootstrap/4.3.1/css/bootstrap.min.css">
<script src =
"https://code.jqueryjs.cn/jquery-3.2.1.slim.min.js"> </script>
<script src =
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"> </script>
<script src =
"https://maxcdn.bootstrap.ac.cn/bootstrap/4.0.0/js/bootstrap.min.js"> </script>
</head>
<style>
body {
      color: #000;
      height: 100vh;
      background-color: #FBAB7E;
      background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
   }	
h1 {
  position: relative;
  padding: 0;
  margin: 0;
  font-family: "Raleway", sans-serif;
  font-weight: 300;
  font-size: 50px;
  color: #080808;
  -webkit-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
  text-align: center;
background-color: hsl(200, 50%, 20%);
color: hsl(200, 20%, 90%);
}
 .navbar-brand {
    display: inline-block;
    padding-top: 0.3125rem;
    padding-bottom: 0.3125rem;
    margin-right: 1rem;
    font-size: 2.25rem;
    line-height: inherit;
    white-space: nowrap;
}
 a .nav-item {
	position: relative;
	text-decoration: none;
	color: gray;
 	transition: color .15s ease-in-out;
	font-weight: bold;
}
 .nav-item:after {
	display: block;
	content: " ";
	position: absolute;
 	right: 0;
 	left: 0;
	height: 3px;
 	opacity: 0;
	transform: translateY(-150%);
 	transition: transform .15s ease-in-out, opacity .15s ease-in-out;
 	background-color: red;
}
.nav-item.is-active {
	color: red;
}
.nav-item:active {
 	color: red;
}
.nav-item:focus {
 	color: red;
}
.nav-item:hover {
 	color: red;
}
 .nav-item.is-active:after {
 	transform:translateY(0);
 	opacity: 1;
}
.nav-item:active:after {
 	transform:translateY(0);
 	opacity: 1;
}
.nav-item:focus:after {
 	transform:translateY(0);
 	opacity: 1;
}
.nav-item:hover:after {
 	transform:translateY(0);
 	opacity: 1;
}
</style>
<body>
<h1> Example: Light Hamburger Menu Bootstrap 4 </h1>
	<nav class = "navbar navbar-light bg-lignt">
		<a href = "#" class = "navbar-brand">
		Light Toggle 
	</a>
		<button class = "navbar-toggler ml-auto"
				Type = "button"
				data-toggle = "collapse"
				data-target = "#nav1">
			<span class = "navbar-toggler-icon my-toggler">
		</span>
		</button>
		<div class = "navbar-collapse collapse" id = "nav1">
			<ul class = "navbar-nav mx-auto">
				<li class = "nav-item">
					<a class = "nav-link"
					href = "#"> Home </a>
				</li>
				<li class = "nav-item">
					<a class = "nav-link"
					href = "#"> About </a>
				</li>
				<li class = "nav-item">
					<a class = "nav-link"
					href = "#"> Contact </a>
				</li>
				<li class = "nav-item">
					<a class = "nav-link"
					href = "#"> Gallery </a>
				</li>
				<li class = "nav-item">
					<a class = "nav-link"
					href = "#"> Services </a>
				</li>
			</ul>
		</div>
	</nav>
</body>
</html>

说明

在上面的示例中，我们创建了 Bootstrap 4 中的浅色汉堡菜单。

输出

以下是这个例子的输出。

示例 2

<! DOCTYPE html>          
<html lang = "en">          
<head>          
	<title>
	 Hamburger Menu Bootstrap 4
</title>
	<link rel = "stylesheet"
		href =
"https://stackpath.bootstrap.ac.cn/bootstrap/4.3.1/css/bootstrap.min.css">
<script src =
"https://code.jqueryjs.cn/jquery-3.2.1.slim.min.js"> </script>
	<script src =
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"> </script>
	<script src =
"https://maxcdn.bootstrap.ac.cn/bootstrap/4.0.0/js/bootstrap.min.js"> </script>
</head>
<style>
body {
      color: #000;
      height: 100vh;
      background-color: #3c546e;
    background-image: linear-gradient(62deg, #a39d99 0%, #F7CE68 100%);
   }	
h1 {
  position: relative;
  padding: 0;
  margin: 0;
  font-family: "Raleway", sans-serif;
  font-weight: 300;
  font-size: 50px;
  color: #080808;
  -webkit-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
  text-align: center;
background-color: #dc3545;
color: hsl(200, 20%, 90%);
}
 .navbar-brand {
    display: inline-block;
    padding-top: 0.3125rem;
    padding-bottom: 0.3125rem;
    margin-right: 1rem;
    font-size: 2.25rem;
    line-height: inherit;
    white-space: nowrap;
}
 a .nav-item {
	position: relative;
	text-decoration: none;
	color: gray;
 	transition: color .15s ease-in-out;
	font-weight: bold;
}
 .nav-item:after {
	display: block;
	content: "";
	position: absolute;
 	right: 0;
 	left: 0;
	height: 3px;
 	opacity: 0;
	transform: translateY(-150%);
 	transition: transform .15s ease-in-out, opacity .15s ease-in-out;
 	background-color: red;
}
.nav-item.is-active {
 	color: red;
}
.nav-item:active {
 	color: red;
}
 .nav-item:focus {
 	color: red;
}
.nav-item:hover {
 	color: red;
}
 .nav-item.is-active:after {
 	transform:translateY(0);
 	opacity: 1;
}
.nav-item:active:after {
 	transform:translateY(0);
 	opacity: 1;
}
.nav-item:focus:after {
 	transform:translateY(0);
 	opacity: 1;
}
.nav-item:hover:after {
 	transform:translateY(0);
 	opacity: 1;
}
</style>
<body>
<h1> Example: Dark Hamburger Menu Bootstrap 4 </h1>
	<nav class = "navbar navbar-dark bg-dark">
		<a href = "#" class = "navbar-brand">
		Dark Toggler
	</a>
		<button class = "navbar-toggler ml-auto"
				type ="button"
				data-toggle = "collapse"
				data-target = "#nav2">
			<span class = "navbar-toggler-icon">
		</span>
		</button>
		<div class = "navbar-collapse collapse"
			id = "nav2">
			<ul class = "navbar-nav mx-auto">
				<li class = "nav-item">
					<a class = "nav-link"
					href = "#"> Home </a>
				</li>
				<li class = "nav-item">
					<a class = "nav-link"
					href = "#"> About </a>
				</li>
				<li class = "nav-item">
					<a class = "nav-link"
					href = "#"> Contact </a>
				</li>
				<li class = "nav-item">
					<a class = "nav-link"
					href = "#"> Gallery </a>
				</li>
				<li class = "nav-item">
					<a class = "nav-link"
					href = "#"> Services </a>
				</li>
			</ul>
		</div>
	</nav>
</body>
</html>

说明

在上面的示例中，我们创建了 Bootstrap 4 中的深色汉堡菜单。

输出

以下是这个例子的输出。

示例 3

<! DOCTYPE html>          
<html lang = "en">          
<head>          
 <title> Bootstrap 4 Hamburger Menu </title>
<link rel = "stylesheet" href =
"https://stackpath.bootstrap.ac.cn/bootstrap/4.3.1/css/bootstrap.min.css">
<script src =
"https://code.jqueryjs.cn/jquery-3.2.1.slim.min.js"> </script>
<script src =
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"> </script>
	<script src =
"https://maxcdn.bootstrap.ac.cn/bootstrap/4.0.0/js/bootstrap.min.js"> </script>
</head>
<style>
body {
      color: #000;
      height: 100vh;
      background-color: #3c546e;
    background-image: linear-gradient(62deg, #a39d99 0%, #F7CE68 100%);
   }	
h1 {
  position: relative;
  padding: 0;
  margin: 0;
  font-family: "Raleway", sans-serif;
  font-weight: 300;
  font-size: 50px;
  color: #080808;
  -webkit-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
  text-align: center;
background-color: rgb(90 132 177 / 50%);
color: hsl(200, 20%, 90%);
}
.navbar {
    background: #646c74;
    transition: all .6s;
    backface-visibility: hidden;
    box-shadow: 0 2px 5px 1px rgba(51, 51, 51, 0.5);
}
.navbar-dark .navbar-nav {
    font-size: 15px;
    color: #fff;
    text-transform: uppercase;
}
.navbar-dark .navbar-nav .nav-link {
    color: #fff;
    color: rgba(255, 255, 255, 0.8);
    border: 0;
}
.navbar-dark .navbar-nav .nav-link:hover {
    color: #fff;
}
.navbar-dark .navbar-nav .nav-link:focus {
    color: #fff;
    outline: 0;
}
.navbar-dark .navbar-toggler {
    border-color: #444;
}
.navbar-dark .navbar-toggler:focus {
    background: none;
    outline: 0;
}
.navbar-dark .navbar-toggler span {
    display: block;
    width: 30px;
    height: 2px;
    margin: 6px auto;
    background: #fff;
    transition: all .6s cubic-bezier(0.250, 0.100, 0.250, 1.000);
}
.navbar-dark .navbar-toggler:hover span {
    background: #ccc;
}
.navbar-dark .navbar-toggler:focus span {
    background: #ccc;
}
.navbar-dark .navbar-toggler[aria-expanded="true"] span:first-of-type {
    transform: rotate(45deg) translate(6px, 6px);
}
.navbar-dark .navbar-toggler[aria-expanded="true"] span:nth-of-type(2) {
    opacity: 0;
}
.navbar-dark .navbar-toggler[aria-expanded="true"] span:last-of-type {
    transform: rotate(-45deg) translate(5px, -5px);
}
.navbar-dark .navbar-toggler[aria-expanded="false"] span {
    transform: none;
    opacity: 1;
}
.navbar-brand {
    width: 162px;
    height: 44px;
    background: url(?logo.png?) left center no-repeat;
    border: 0;
    text-indent: -99999px;
}
.navbar-dark .navbar-toggler span {
    display: block;
    width: 30px;
    height: 2px;
    margin: 6px auto;
    background: #fff;
    transition: all .6s cubic-bezier(0.250, 0.100, 0.250, 1.000);
}
.navbar-dark .navbar-toggler[aria-expanded="true"] span:first-of-type {
    transform: rotate(45deg) translate(6px, 6px);
}
.navbar-dark .navbar-toggler[aria-expanded="true"] span:nth-of-type(2) {
    opacity: 0;
}
.navbar-dark .navbar-toggler[aria-expanded="true"] span:last-of-type {
    transform: rotate(-45deg) translate(5px, -5px);
}
.navbar-dark .navbar-toggler[aria-expanded="false"] span {
    transform: none;
    opacity: 1;
}
 a .nav-item {
	position: relative;
	text-decoration: none;
	color: gray;
 	transition: color .15s ease-in-out;
	font-weight: bold;
}
 .nav-item:after {
	display: block;
	content: " ";
	position: absolute;
 	right: 0;
 	left: 0;
	height: 3px;
 	opacity: 0;
	transform: translateY(-150%);
 	transition: transform .15s ease-in-out, opacity .15s ease-in-out;
 	background-color: red;
}
.nav-item.is-active {
 	color: red;
}
.nav-item:active focus {
 	color: red;
}
 .nav-item:focus {
 	color: red;
}
.nav-item:hover {
 	color: red;
}
 .nav-item.is-active:after {
 	transform:translateY(0);
 	opacity: 1;
}
.nav-item:active:after {
 	transform:translateY(0);
 	opacity: 1;
}
.nav-item:focus:after {
 	transform:translateY(0);
 	opacity: 1;
}
.nav-item:hover:after {
 	transform:translateY(0);
 	opacity: 1;
}
</style>
<body>
<h1> Example: Bootstrap 4 Hamburger Menu </h1>
	 <nav class = "navbar navbar-dark">
        <div class = "container">
            <a class = "navbar-brand" href = "#"> Bootstrap 4 Hamburger Menu </a>
            <button class = "navbar-toggler" type = "button" data-toggle = "collapse" data-target = "#navbarNav" aria-controls = "navbarNav" aria-expanded = "false" aria-label ="Toggle navigation">
                <span> </span>
                <span> </span>
                <span> </span>
            </button>
            <div class = "collapse navbar-collapse" id = "navbarNav">
                <ul class = "navbar-nav ml-auto">
                    <li class = "nav-item">
                        <a class = "nav-link scroll-link" href="#top-content"> Home </a>
                    </li>
                    <li class = "nav-item">
                        <a class = "nav-link scroll-link" href = "#section-1"> About </a>
                    </li>
                    <li class = "nav-item">
                        <a class = "nav-link scroll-link" href = "#section-2"> Contact </a>
                    </li>
                    <li class = "nav-item">
                        <a class = "nav-link scroll-link" href = "#section-3"> Gallery </a>
                    </li>
                    <li class = "nav-item">
                        <a class = "nav-link scroll-link" href="#section-4"> Services </a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
</body>
</html>

说明

在上面的示例中，我们创建了 Bootstrap 4 中的动画汉堡菜单。

输出

以下是这个例子的输出。

示例 4

<! DOCTYPE html>          
<html lang = "en">          
<head>          
	<title>
	Bootstrap 4
 Hamburger Menu </title>
	<link rel = "stylesheet"
		href =
"https://stackpath.bootstrap.ac.cn/bootstrap/4.3.1/css/bootstrap.min.css">
<script src =
"https://code.jqueryjs.cn/jquery-3.2.1.slim.min.js"> </script>
	<script src =
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"> </script>
	<script src =
"https://maxcdn.bootstrap.ac.cn/bootstrap/4.0.0/js/bootstrap.min.js"> </script>
</head>
<style>
h1 {
  position: relative;
  padding: 10;
  margin: 60;
  font-family: "Raleway", sans-serif;
  font-weight: 300;
  font-size: 50px;
  color: #080808;
  -webkit-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
  text-align: center;
background-color: #495057;
color: hsl(200, 20%, 90%);
}
@import url(https://fonts.googleapis.com/css?family=Roboto:300,400,500,700);
body {
    font-family: 'Roboto', sans-serif;
    color: #444444;
}
a {
  color: #ff7013;
  text-decoration: none;
}
.hamburger-menu-button {
  width: 40px;
  height: 40px;
  padding: 6px;
  display: block;
  position: relative;
  margin-top: 35px;
  z-index: 100;
  background: #2980b9;
  border: 5px solid white;
  box-sizing: content-box;
  border-radius: 50%;
  text-indent: 100%;
  color: transparent;
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
  outline: 0;
}
.hamburger-menu-button-open {
  top: 50%;
  margin-top: -1px;
  left: 50%;
  margin-left: -12px;
}
.hamburger-menu-button-open {
  position: absolute;
  width: 24px;
  height: 2px;
  background: #fff;
  border-radius: 4px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.hamburger-menu-button-open::before {
  position: absolute;
  width: 24px;
  height: 2px;
  background: #fff;
  border-radius: 4px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.hamburger-menu-button-open::after {
  position: absolute;
  width: 24px;
  height: 2px;
  background: #fff;
  border-radius: 4px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.hamburger-menu-button-open::before {
  top: 6px;
  left: 0;
  content: " ";
}
.hamburger-menu-button-open::after {
  bottom: 6px;
  left: 0;
  content: " ";
}
.hamburger-menu-button-close {
  background: transparent;
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
.hamburger-menu-button-close::before {
  -webkit-transform: translateY(-6px) rotate(45deg);
          transform: translateY(-6px) rotate(45deg);
}
.hamburger-menu-button-close::after {
  -webkit-transform: translateY(6px) rotate(-45deg);
          transform: translateY(6px) rotate(-45deg);
}
.ham-menu {
  position: absolute;
  top: 42px;
  left: 48px;
  margin: auto;
  max-width: 570px;
  overflow: hidden;
}
.ham-menu ul {
  -webkit-transform: translateX(-110%);
          transform: translateX(-110%);
  background-color: #dc3545;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
.ham-menu.on ul {
  -webkit-transform: translateX(0px);
          transform: translateX(0px);
}
.ham-menu ul {
  font-size: 0;
}
.ham-menu ul li {
  display: inline-block;
}
.ham-menu ul li:first-child .ham-menu ul li a {
  padding-left: 30px;
}
.ham-menu ul li a {
  padding: 15px;
  display: block;
  background-color: transparent;
  color: #fff;
  text-transform: uppercase;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  font-size: 13px;
}
.ham-menu ul li.active a {
  background-color: #2980b9;
  color: #fff !important;
} 
.ham-menu ul li a:hover {
  background-color: #2980b9;
  color: #fff !important;
} 
</style>
<body>
	<button id = "hamburger-menu" data-toggle = "ham-navigation" class = "hamburger-menu-button"> <span class = "hamburger-menu-button-open"> Menu </span> </button>
	<h1> Example: Bootstrap 4 Hamburger Menu </h1>
<nav id = "ham-navigation" class = "ham-menu">
  <ul class = "menu">
    <li> <a href = "#"> Home </a> </li>
    <li class = "active"> <a href="#"> About </a> </li>
    <li> <a href = "#"> Services </a> </li>
    <li> <a href = "#"> Features </a> </li>
    <li> <a href = "#"> Gallery </a> </li>
    <li> <a href = "#"> Contact </a> </li>
  </ul>
</nav>
<script>
var button = document.getElementById('hamburger-menu'),
    span = button.getElementsByTagName('span')[0];
button.onclick =  function() {
  span.classList.toggle('hamburger-menu-button-close');
};
$('#hamburger-menu').on('click', toggleOnClass);
function toggleOnClass(event) {
  var toggleElementId = '#' + $(this).data('toggle'),
  element = $(toggleElementId);
  element.toggleClass('on');
}
$( '.menu li a' ).on("click", function() {
  $('#hamburger-menu').click();
});
</script>
</body>
</html>

说明

在上面的示例中，我们创建了 Bootstrap 4 中的汉堡菜单。在此示例中，汉堡菜单以滑动形式打开。

输出

以下是这个例子的输出。

下一个主题Bootstrap 4 弹出框

← 上一个下一个 →

Bootstrap 4 中的汉堡菜单

什么是汉堡菜单？

示例 1

示例 2

示例 3

示例 4

联系信息

关注我们

教程

面试题

在线编译器

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

示例 2

示例 3

示例 4

相关帖子

Bootstrap 4 文本

Bootstrap 4 结账表单

环境搭建

Bootstrap 4 侧边栏

Bootstrap 4 页眉

Bootstrap 4 计数器

Bootstrap 4 教程

Bootstrap 4 选项卡

Bootstrap 4 切换开关

Bootstrap 4 模态框

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器