我正在学习如何为桌面和移动用户制作响应导航栏的教程。我没有完全遵守，因为我必须更改我的CSS，因为我有一个图像标志。当我试图制作汉堡菜单时，我无法在一列中看到所有的导航链接。只是想澄清一下，我想把汉堡的线条放在右边，让它像一个应用程序一样发挥作用。
/* Basic */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Acme', sans-serif;
background: white;
line-height: 1.6;
}
ul {
list-style: none;
}
a {
text-decoration: none;
}
/* Navbar */
.navbar {
display: flex;
background: #004C66;
align-items: center;
justify-content: space-between;
width: 100%;
position: fixed;
padding: 0 30px;
}
.navbar .logo img {
width: 100%;
margin-top: 10px;
}
.navbar .nav-link {
padding: 10px 50px;
color: #333;
background-color: red;
}
/* Burger Navigation */
.burger {
display: none;
}
.burger div {
width: 25px;
height: 2px;
background-color: #333;
margin: 5px;
border-radius: 25%;
}
@media (max-width: 813px) {
.nav-link {
position: absolute;
padding: none;
right: 0px;
height: 92vh;
top: 8vh;
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
}
}<body>
<header class="navbar">
<a href="" class="logo"><img src="/img/logoS.png" alt=""></a>
<nav>
<ul>
<a class="nav-link" href="#">Home</a>
<a class="nav-link" href="#">Services</a>
<a class="nav-link" href="#">Contact</a>
</ul>
</nav>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</header>
</body>我对您的代码进行了一些更新。试试这个。
<style type="text/css">
/* Basic */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Acme', sans-serif;
background: white;
line-height: 1.6;
}
ul {
list-style: none;
}
a {
text-decoration: none;
}
/* Navbar */
.navbar {
display: flex;
background: #004C66;
align-items: center;
justify-content: space-between;
width: 100%;
height: 70px;
position: fixed;
padding: 0 30px;
}
.navbar .logo img {
width: 100%;
margin-top: 10px;
}
nav{
margin-left: auto;
}
.navbar .nav-link {
padding: 10px 50px;
color: #333;
background-color: red;
color: white;
}
/* Burger Navigation */
.burger {
display: none;
}
.burgerContainer{
cursor: pointer;
display: flex;
align-items: center;
}
.burger div {
width: 25px;
height: 2px;
background-color: #fff;
margin: 5px;
border-radius: 25%;
}
@media (max-width: 1200px) {
nav {
position: fixed;
padding: 20px;
right: -100%; /* Hiding the Nav */
height: calc(100% - 70px); /* Minus header height */
top: 70px;
display: flex;
flex-direction: column;
align-items: center;
width: 270px;
background: #fff;
border-left: solid 1px #ddd;
transition: all 0.4s ease;
}
nav.showNav{
right: 0;
}
nav ul{
width: 100%;
}
.navbar .nav-link{
width: 100%;
display: block;
margin: 5px 0;
text-align: center;
}
.burger{
display: inline-block;
}
}
</style>
<header class="navbar">
<a href="" class="logo">
</a>
<nav>
<ul>
<a class="nav-link" href="#">Home</a>
<a class="nav-link" href="#">Services</a>
<a class="nav-link" href="#">Contact</a>
</ul>
</nav>
<div class='burgerContainer'>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</div>
</header>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(".burgerContainer").on("click", function () {
$("nav").toggleClass("showNav");
});
</script>
这个引导程序代码将是完整的答案：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0-11/css/all.min.css">
<link rel="stylesheet" href="style.css">
<title>Title</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light justify-content-end">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Service</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>
检查：https://jsfiddle.net/sugandhnikhil/9xazvehd/
请为您的nav和ul添加flex-direction
nav, ul {
display: flex;
flex-direction: column;
}
您可以添加一些JavaScript。
Menu.style.display = "none";
function ShowHide(x) {
x.classList.toggle("change");
var Menu = document.getElementById("Menu");
if (Menu.style.display === "none") {
Menu.style.display = "block";
} else {
Menu.style.display = "none";
}
}.container {
display: inline-block;
cursor: pointer;
}
.bar1, .bar2, .bar3 {
width: 35px;
height: 5px;
background-color: #333;
margin: 6px 0;
transition: 0.4s;
}
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-45deg) translate(-9px, 6px);
}
.change .bar2 {opacity: 0;}
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
}<div class="container" onclick="ShowHide(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<div id="Menu" style="width: 150px; background-color: rgb(217, 231, 255); display: none;">
<h2><a href="#1">Item 1</a></h2>
<h2><a href="#2">Item 2</a></h2>
<h2><a href="#3">Item 3</a></h2>
</div>JSFiddle 视图