代码之家 › 专栏 › 技术社区 › AEzatA

如何使网站幻灯片菜单中的列表项相互叠加?

marginal-effects margin deployment css html

0

AEzatA · 技术社区 · 9 月前

我已经试着解决这个问题好几天了,似乎什么都没用,我开始考虑抓整个项目,重新开始。我决定在我的网站上添加一个幻灯片汉堡菜单,菜单中的选项彼此紧邻。

html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href = "styles.css">
    <script src="script.js"></script>
    <title>Homepage</title>
</head>
<body>
    
    <header>
        

        <!--Navigation Bar-->
        <ul>
            <!--Hamburger Slide Menu-->
        <label>
            <input type="checkbox">
            <div class="toggle">
                <span class="top_line common"></span>
                <span class="middle_line common"></span>
                <span class="bottom_line common"></span>
            </div>
            <div class="slide">
                <h1>Menu</h1>
                <ul>
                    <li><a href="#">Profile</a></li>
                    <br>
                    <li><a href="#">Cart</a></li>
                    <br>
                    <li><a href="#">Wishlist</a></li>
                    <br>
                </ul>
            </div>
        </label>
            <li> <img src="Images/navbar-logo.png" class="logo-img"></li>

            <li><a href="index.html" class="active">Home</a></li>

            <li><a href="store.html">Store</a></li>

            <li><a href="community.html">Community</a></li>

            <li class="spacer"></li>

            <li style="float:right;"><a href="login.html" >Login</a></li>

            <li ><a href="signup.html">Sign Up</a></li>
        
        </ul>

    </header>
    <footer><label>SSSS</label></footer>
</body>
</html>

css:

ul {
  list-style-type: none; 
  margin: 0;
  padding: 0;
  background-color: #212121;
  height: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
}

li {
  display: flex;
  align-items: center;
  margin: 0 15px; 
}


.spacer {
  flex-grow: 1;
}

a {
  display: block;
  padding: 11px;
  color: #fff;
  text-align: center;
  font-size: 1.2em;
  text-decoration: none; 
}

li a:hover {
  background-color: #353535;
  max-width: 200px;
}

.active {
  background-color: #389261;
}

.icon {
  font-size: 1.5em;
  color: #fff;
}

  body {
    background-color: #1c2841;
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat; 
    height: 100vh; 
    margin: 0; 
    padding: 0; 
    backdrop-filter: blur(4px); 
    overflow-x: hidden;
    
  }
  

 .modal {
  border-radius: 5px;
  font-family: sans-serif;
  line-height: 1.5;
  max-width: 100%;
  padding: 1rem 2rem;
  max-height: 100%;
  height: 1000px;
}

 .logo-img{
  margin-top:0.3px;
  margin-bottom:-5px;
  margin-left: 70px;
  width: 70px;
  height: 50px;
 }

 
 .login-form-container{
  background-color: black;
  background: transparent;
  width: 680px;
  height: 75%;
  margin-left: 375px;
  justify-content: center ;
  margin-top: 150px;
  margin-left: 500px;
 }

 .entryarea{
  position: relative;
  height:80px;
  line-height: 80px;
 }

 input[type=text]{
  position:absolute;
  width:70%;
  outline:none;
  font-size: 1.5em;
  padding: 0 30px;
  line-height: 80px;
  border-radius: 10px;
  border: 2px solid #ffffff ;
  background: transparent;
  transition: 0.1s ease;
  z-index: 1111;

 }
 input[type=password]{
  position:absolute;
  width:70%;
  outline:none;
  font-size: 1.5em;
  padding: 0 30px;
  line-height: 80px;
  border-radius: 10px;
  border: 2px solid #ffffff ;
  background: transparent;
  transition: 0.1s ease;
  z-index: 1111;
  margin-top: 90px;
 }
 
 .username-labelline{
  position: absolute;
  font-size: 1.5em;
  color:rgb(255, 255, 255);
  padding: 0 25px;
  margin: 0 20px;
  background-color: #1c2841;
  transition: 0.2s ease;
 }
 .password-labelline{
  position: absolute;
  font-size: 1.5em;
  color:rgb(255, 255, 255);
  padding: 0 25px;
  margin: 0 20px;
  background-color: #1c2841;
  transition: 0.2s ease;
  margin-top: 90px;
 }
 input:focus,
 input:valid{
  color:#389261;
  border: 4px solid #389261;
 }
 
 input:focus + .username-labelline ,
 input:valid+.username-labelline{
  color:#389261;
  height: 30px;
  line-height:30px;
  padding: 0 12px;
  transform: translate(-15px, -16px) scale(0.9);
  z-index: 1111;
 }
 
 input:focus + .password-labelline ,
 input:valid+ .password-labelline{
  color:#389261;
  height: 30px;
  line-height:30px;
  padding: 0 12px;
  transform: translate(-15px, -16px) scale(0.9);
  z-index: 1111;
 }
 .submit-btn {
  border-radius: 10px;
  text-align: center;
  width: 200px;
  height: 70px;
  margin-top: 130px;
  margin-left: 340px;
  background: transparent;
  border: 2px solid #ffffff;
  display: inline-block;
  color: #ffffff; 
  font-size: 1.2em;
}

.submit-btn:hover {
  cursor: pointer;
  border-color: #389261;
  color: #389261; 
  
}

.register-label {
  color: white;
  font-size: 1.2em;
  position: relative; 
  top: -45px;
  right:-20px;
}

.register-label::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -2px;
  left: 0;
  background-color: #389261; 
  transition: width 0.3s ease-out; 
}

.register-label:hover::after {
  width: 100%;
}

.register-label:hover {
  cursor: pointer;
}

.terms-of-use{
  color: white;
  font-size: 1.2em;
  position: relative; 
  top: -45px;
  right:-110px;
  left:110px;
}
.terms-of-use::after{
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -2px;
  left: 0;
  background-color: #389261; 
  transition: width 0.3s ease-out; 
}
.terms-of-use:hover{
  cursor: pointer;
}

.loginform-label{
  color:#ffffff;
}

.slide{
  top:-10px;
  height:100%;
  width:200px;
  position:absolute;
  background-color: #212121;
  filter: alpha(opacity=50);
  transition: 0.5s ease;
  transform: translateX(-180px);
}
.slide ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  width: 100%;
}

.slide ul li {
  width: 100%;
  display: block;
  margin: 10px 0; 
}

.slide ul li a {
  display: block;
  padding: 10px;
  color: #fff;
  text-align: left; 
  text-decoration: none;
  background-color: #212121;
  width: 100%;
}

.slide ul li a:hover {
  background-color: #353535; 
}

h1 {
  color: #389261;
  font-weight: 800;
  text-align: center;
  margin-left: 30px; 
  position: relative; 
  bottom: 100px;
  top: 10px;
  pointer-events: none;
}

.toggle{
  position:absolute;
  height: 30px;
  width:30px;
  background-color: transparent;
  z-index:1;
  cursor:pointer;
  border-radius: 2;
  top:24px;
  left:15px;

}

.toggle .common{
  position:absolute;
  height: 3px;
  width:20px;
  background-color: #389261;
  border-radius: 50px;
  transition: 0.3s ease;
}

.toggle .top_line{
  top:30%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.toggle .middle_line{
  top:50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.toggle .bottom_line{
  top:70%;
  left: 50%;
  transform: translate(-50%,-50%);
}

input:checked ~ .toggle .top_line{
  left: 2px;
  top:14px;
  width: 25px;
  transform: rotate(45deg);
}
input:checked ~ .toggle .bottom_line{
  left: 2px;
  top:14px;
  width: 25px;
  transform: rotate(-45deg);
}

input:checked ~ .toggle .middle_line{
  opacity: 0;
  transform:translateX(20px);
}

input:checked ~ .slide{
  transform: translateX(0);
}

input[type="checkbox"]{
  visibility: hidden;
}

任何帮助都将不胜感激。

我尝试将所有li宽度设置为100%,在每个li下添加换行符,编辑填充和边距等。

我希望幻灯片菜单中的每个选项都能垂直叠加。

1 回复 | 直到 9 月前

1

0

Jonte 9 月前

如果我正确地解释了你的问题,你希望汉堡菜单中的元素是垂直列表,而不是水平列表。问题似乎在于你设置 display: flex 在顶部ul部分中,使顶部菜单栏水平,但永远不要将显示参数设置为在 .slide ul 部分。

我希望这能有所帮助!

干杯