我是web开发的新手，现在正在学习CSS。我已选择作为项目开始我的个人投资组合。
我正在创建一个简单的导航栏，我想添加汉堡包图标，但当我将图标添加到navbar时，图标会堆叠在导航栏和动画的底部(当按钮被切换时，线会像X一样交叉(。我想要导航栏左角的图标。
我曾尝试将列表外的Icon添加到nav，但它溢出了<h1>标记，所以我曾尝试添加到<aside>父级，但它也溢出了<h1>标记。
body {
background: linear-gradient(180deg, rgb(70, 65, 70), rgb(172, 34, 32));
}
.menu {
border: 2px solid white;
position: sticky;
display: flex;
flex-direction: row;
height: 95vh;
width: 17%;
background: linear-gradient(180deg, #241023ff, #6b0504ff);
/*linear-gradient(180deg, #2274a5ff, #f75c03ff);*/
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
transition: 0.5s;
}
.wrapper {
width: 100%;
margin: auto;
display: flex;
justify-content: flex-start;
}
.container {
margin-top: 10px;
width: 100%;
height: 25px;
margin-bottom: 10px;
display: flex;
flex-direction: column;
justify-content: space-between;
cursor: pointer;
}
.menu-logo {
height: 3px;
width: 30px;
background-color: white;
}
.showmenu {
width: 25%;
}
/* #endregion Toggle button animation*/
/* #region Hover effect*/
nav:hover,
nav:active {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
li a:hover,
li a:active {
font-weight: bold;
border: 1px solid white;
border-radius: 10px;
background: rgb(246, 246, 246);
transition: 0.5s;
}
li a:hover svg,
li a:active svg {
fill: #f75c03ff;
}
li a:hover span,
li a:active span {
color: #f75c03ff;
stroke: #f75c03ff;
}
/* #endregion Hover effect*/
nav {
width: 100%;
display: list-item;
text-align: center;
justify-content: center;
}
/* #region Welcome text*/
nav .welcome-text {
width: 100%;
margin-left: auto;
display: flex;
justify-content: center;
font-size: 3.5vw;
margin-bottom: 60px;
color: white;
text-align: center;
}
/* #endregion Welcome text*/
/* #region Main content*/
/* #region Wave animation*/
.wave {
width: 50%;
animation-name: wave-animation;
/* Refers to the name of your @keyframes element below */
animation-duration: 2.5s;
/* Change to speed up or slow down */
animation-iteration-count: infinite;
/* Never stop waving :) */
transform-origin: 70% 70%;
/* Pivot around the bottom-left palm */
display: inline-block;
}
@keyframes wave-animation {
0% {
transform: rotate( 0.0deg)
}
10% {
transform: rotate(14.0deg)
}
/* The following five values can be played with to make the waving more or less extreme */
20% {
transform: rotate(-8.0deg)
}
30% {
transform: rotate(14.0deg)
}
40% {
transform: rotate(-4.0deg)
}
50% {
transform: rotate(10.0deg)
}
60% {
transform: rotate( 0.0deg)
}
/* Reset for the last half to pause */
100% {
transform: rotate( 0.0deg)
}
}
/* #endregion Wave animation*/
nav ul {
width: 100%;
height: 100%;
display: list-item;
}
nav ul li {
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
}
li a {
width: 100%;
height: 7%;
text-decoration: none;
display: flex;
text-align: left;
font-size: 100%;
justify-content: center;
margin-bottom: 10px;
}
li a span {
width: 100%;
font-size: 2.7vw;
align-self: center;
color: white;
margin-left: 10px;
}
li a svg {
width: 20%;
height: 20%;
}<aside class="menu">
<div class="container nav-container">
<input class="checkbox" type="checkbox" name="" id="" />
<div class="hamburger-lines">
<span class="line line1"></span>
<span class="line line2"></span>
<span class="line line3"></span>
</div>
</div>
<nav>
<ul>
<li>
<h1 class="welcome-text">Welcome <span class="wave">👋</span></h1>
</li>
<li>
<a href="#">
<svg viewBox="0 0 24 24" fill="transparent" stroke="white" xmlns="http://www.w3.org/2000/svg">
<path
d="M21 8.77217L14.0208 1.79299C12.8492 0.621414 10.9497 0.621413 9.77817 1.79299L3 8.57116V23.0858H10V17.0858C10 15.9812 10.8954 15.0858 12 15.0858C13.1046 15.0858 14 15.9812 14 17.0858V23.0858H21V8.77217ZM11.1924 3.2072L5 9.39959V21.0858H8V17.0858C8 14.8767 9.79086 13.0858 12 13.0858C14.2091 13.0858 16 14.8767 16 17.0858V21.0858H19V9.6006L12.6066 3.2072C12.2161 2.81668 11.5829 2.81668 11.1924 3.2072Z" />
</svg>
<span>Home</span>
</a>
</li>
</ul>
</nav>
</aside>此处为完整代码：https://jsfiddle.net/Lhawck59/
CCD_ 5，你没有为这个标签写一个结束标签，所以你的代码不工作
您可以在类菜单上添加oppacity: 0;，并在类显示菜单上添加oppacity: 1;
var logo = document.querySelector('.container');
var menu = document.querySelector('.menu');
logo.addEventListener('click',function(){
menu.classList.toggle('showmenu');
});body {
background: linear-gradient(180deg, rgb(70, 65, 70), rgb(172, 34, 32));
}
.menu {
border: 2px solid white;
position: sticky;
display: flex;
flex-direction: row;
height: 95vh;
width: 17%;
background: linear-gradient(180deg, #241023ff, #6b0504ff);
/*linear-gradient(180deg, #2274a5ff, #f75c03ff);*/
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
transition: 0.5s;
opacity: 0;
}
/* #region Toggle button animation*/
.wrapper {
width: 100%;
margin: auto;
display: flex;
justify-content: flex-start;
}
.container {
margin-top: 10px;
width: 100%;
height: 25px;
margin-bottom: 10px;
display: flex;
flex-direction: column;
justify-content: space-between;
cursor: pointer;
}
.menu-logo {
height: 3px;
width: 30px;
background-color: white;
}
.showmenu {
width: 25%;
opacity: 1;
}
/* #endregion Toggle button animation*/
/* #region Hover effect*/
nav:hover,
nav:active {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
li a:hover,
li a:active {
font-weight: bold;
border: 1px solid white;
border-radius: 10px;
background: rgb(246, 246, 246);
transition: 0.5s;
}
li a:hover svg,
li a:active svg {
fill: #f75c03ff;
}
li a:hover span,
li a:active span {
color: #f75c03ff;
stroke: #f75c03ff;
}
/* #endregion Hover effect*/
nav {
width: 100%;
display: list-item;
text-align: center;
justify-content: center;
}
/* #region Welcome text*/
nav .welcome-text {
width: 100%;
margin-left: auto;
display: flex;
justify-content: center;
font-size: 3.5vw;
margin-bottom: 60px;
color: white;
text-align: center;
}
/* #endregion Welcome text*/
/* #region Main content*/
/* #region Wave animation*/
.wave {
width: 50%;
animation-name: wave-animation;
/* Refers to the name of your @keyframes element below */
animation-duration: 2.5s;
/* Change to speed up or slow down */
animation-iteration-count: infinite;
/* Never stop waving :) */
transform-origin: 70% 70%;
/* Pivot around the bottom-left palm */
display: inline-block;
}
@keyframes wave-animation {
0% {
transform: rotate(0.0deg)
}
10% {
transform: rotate(14.0deg)
}
/* The following five values can be played with to make the waving more or less extreme */
20% {
transform: rotate(-8.0deg)
}
30% {
transform: rotate(14.0deg)
}
40% {
transform: rotate(-4.0deg)
}
50% {
transform: rotate(10.0deg)
}
60% {
transform: rotate(0.0deg)
}
/* Reset for the last half to pause */
100% {
transform: rotate(0.0deg)
}
}
/* #endregion Wave animation*/
nav ul {
width: 100%;
height: 100%;
display: list-item;
}
nav ul li {
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
}
li a {
width: 100%;
height: 7%;
text-decoration: none;
display: flex;
text-align: left;
font-size: 100%;
justify-content: center;
margin-bottom: 10px;
}
li a span {
width: 100%;
font-size: 2.7vw;
align-self: center;
color: white;
margin-left: 10px;
}
li a svg {
width: 20%;
height: 20%;
}
/* #endregion Main content*/
/* #region footer of navbar*/
ul li div {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 7%;
display: flex;
flex-direction: row;
text-align: left;
justify-content: flex-start;
}
li div img {
width: auto;
height: auto;
border-radius: 50%;
border: 2px solid white;
}
nav div span {
width: 100%;
font-size: 0;
align-self: center;
color: white;
margin-left: 10px;
font-weight: bolder;
}
/* #endregion footer of navbar*/
/*TEST*/
.nav-container {
display: flex;
justify-content: space-between;
align-items: left;
width: 5%;
}
.nav-container .checkbox {
position: absolute;
display: block;
width: 5%;
z-index: 5;
opacity: 0;
cursor: pointer;
}
.nav-container .hamburger-lines {
display: block;
height: 26px;
width: 32px;
position: absolute;
z-index: 2;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.nav-container .hamburger-lines .line {
display: block;
height: 4px;
width: 100%;
border-radius: 10px;
background: rgb(255, 255, 255);
}
.nav-container .hamburger-lines .line1 {
transform-origin: 0% 0%;
transition: transform 0.4s ease-in-out;
}
.nav-container .hamburger-lines .line2 {
transition: transform 0.2s ease-in-out;
}
.nav-container .hamburger-lines .line3 {
transform-origin: 0% 100%;
transition: transform 0.4s ease-in-out;
}
.nav-container input[type="checkbox"]:checked ~ .menu-items {
transform: translateX(0);
}
.nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line1 {
transform: rotate(45deg);
}
.nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line2 {
transform: scaleY(0);
}
.nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line3 {
transform: rotate(-45deg);
}
.nav-container input[type="checkbox"]:checked ~ .logo{
display: none;
}
*{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Roboto', sans-serif;
/*font-family: 'Noto Sans', sans-serif;*/
}
header{
border: 1px solid black;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/content/content.css">
<link rel="stylesheet" href="css/navbar/navbar.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,700;1,300;1,500&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="css/navbar/hamburgerIcon/hamburgerIcon.css">
<title>Portfolio</title>
</head>
<body>
<header>
<h1>Header</h1>
<div class="container nav-container">
<input class="checkbox" type="checkbox" name="" id="" />
<div class="hamburger-lines">
<span class="line line1"></span>
<span class="line line2"></span>
<span class="line line3"></span>
</div>
</header>
<aside class="menu">
<nav>
<ul>
<li>
<h1 class="welcome-text">Welcome <span class="wave">👋</span></h1>
</li>
<li>
<a href="#">
<svg viewBox="0 0 24 24" fill="transparent" stroke="white" xmlns="http://www.w3.org/2000/svg">
<path d="M21 8.77217L14.0208 1.79299C12.8492 0.621414 10.9497 0.621413 9.77817 1.79299L3 8.57116V23.0858H10V17.0858C10 15.9812 10.8954 15.0858 12 15.0858C13.1046 15.0858 14 15.9812 14 17.0858V23.0858H21V8.77217ZM11.1924 3.2072L5 9.39959V21.0858H8V17.0858C8 14.8767 9.79086 13.0858 12 13.0858C14.2091 13.0858 16 14.8767 16 17.0858V21.0858H19V9.6006L12.6066 3.2072C12.2161 2.81668 11.5829 2.81668 11.1924 3.2072Z" />
</svg>
<span>Home</span>
</a>
</li>
<li>
<a href="#">
<svg fill="transparent" stroke="white" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M21 2H6a2 2 0 0 0-2 2v3H2v2h2v2H2v2h2v2H2v2h2v3a2 2 0 0 0 2 2h15a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1zm-8 2.999c1.648 0 3 1.351 3 3A3.012 3.012 0 0 1 13 11c-1.647 0-3-1.353-3-3.001 0-1.649 1.353-3 3-3zM19 18H7v-.75c0-2.219 2.705-4.5 6-4.5s6 2.281 6 4.5V18z" />
</svg>
<span>Contact</span>
</a>
</li>
<li>
<a href="#">
<svg fill="transparent" stroke="white" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M17 7C17 5.34315 15.6569 4 14 4H10C8.34315 4 7 5.34315 7 7H6C4.34315 7 3 8.34315 3 10V18C3 19.6569 4.34315 21 6 21H18C19.6569 21 21 19.6569 21 18V10C21 8.34315 19.6569 7 18 7H17ZM14 6H10C9.44772 6 9 6.44772 9 7H15C15 6.44772 14.5523 6 14 6ZM6 9H18C18.5523 9 19 9.44772 19 10V18C19 18.5523 18.5523 19 18 19H6C5.44772 19 5 18.5523 5 18V10C5 9.44772 5.44772 9 6 9Z" />
</svg>
<span>My work</span>
</a>
</li>
<li>
<a href="#">
<svg fill="transparent" stroke="white" xmlns="http://www.w3.org/2000/svg" class="bi bi-chat-dots-fill" viewBox="0 0 16 16">
<path d="M16 8c0 3.866-3.582 7-8 7a9.06 9.06 0 0 1-2.347-.306c-.584.296-1.925.864-4.181 1.234-.2.032-.352-.176-.273-.362.354-.836.674-1.95.77-2.966C.744 11.37 0 9.76 0 8c0-3.866 3.582-7 8-7s8 3.134 8 7zM5 8a1 1 0 1 0-2 0 1 1 0 0 0 2 0zm4 0a1 1 0 1 0-2 0 1 1 0 0 0 2 0zm3 1a1 1 0 1 0 0-2 1 1 0 0 0 0 2z" />
</svg>
<span>References</span>
</a>
</li>
<li>
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg" fill="white" class="bi bi-person-circle" viewBox="0 0 16 16">
<path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z" />
<path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z" />
</svg>
<span>About</span>
</a>
</li>
</ul>
</nav>
</aside>
<script src="js/script.js"></script>
</body>
</html>