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

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

  •  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 部分。

    我希望这能有所帮助!

    干杯

    推荐文章