我的导航栏在移动视图中无法正常工作

发布于 2025-01-14 18:42:42 字数 3024 浏览 3 评论 0原文

嘿，我的导航栏在移动视图中无法正常工作
它应该隐藏它，并且首先显示空白区域，然后当单击菜单时，它应该显示代码所说的内容，但它不显示空白区域首先区域（空白网站页面），当单击菜单时也不会隐藏它

代码：

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700%display=swap');
*{
    margin: 0;
    padding:0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}
nav{
    height: 80px;
    background: #1b1b1b;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0px 50px 0px 100px;;
}
nav .logo{
    font-size: 33px;
    color: #fff;
    font-weight: 600;
}
nav ul{
    display: flex;
    list-style: none;
}
nav ul li{
    margin: 0 5px;
}
nav ul li a{
    color: #fff;
    text-decoration: none;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 1px;
    padding: 8px 10px;
    border-radius: 5px;
    transition: all 0.3s ease;
}
nav ul li a:hover,
nav ul li a.active{
    color: #1b1b1b;
    background: #fff;
}
nav .menu-btn i{
    color: #fff;
    font-size: 22px;
    cursor: pointer;
    display: none;    
}
@media (max-width: 940px) {
    nav .menu-btn i{
        display: block;
    }
    nav ul{
        position: fixed;
        top: 80px;
        left: 0;
        background: #111;
        height: 100vh;
        width: 100%;
        display: block;
        text-align: center;
    }
    #click:checked ~ ul{
        left: 0%;
    }
    nav ul li{
        margin: 40px 0;
    }
    nav ul li a{
        font-size: 20px;
    }
    nav ul li a:hover,
    nav ul li a.active{
        color: cyan;
        background: none;
  }
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="https://kit.fontawesome.com/a076d05399.js"></script>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <nav>
            <div class="logo">Brand</div>
            <input type="checkbox" id="click">
            <label for="click" class="menu-btn">
                <i class="fas fa-bars"></i>
            </label>
            <ul>
                <li><a class="active" href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Gallery</a></li>
                <li><a href="#">Feedback</a></li>
            </ul>
        </nav>
        
    </body>
</html>

So yea how should i fix this Thanks in advance

原文

Hey my navigation bar is not working properly in mobile view
It is supposed to hide it and also show the empty area first and then when the menu is clicked its supposed to show the things which the code says but its not showing the empty area(the blank website page) first and when menu clicked its also not hiding it

The Code:

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700%display=swap');
*{
    margin: 0;
    padding:0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}
nav{
    height: 80px;
    background: #1b1b1b;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0px 50px 0px 100px;;
}
nav .logo{
    font-size: 33px;
    color: #fff;
    font-weight: 600;
}
nav ul{
    display: flex;
    list-style: none;
}
nav ul li{
    margin: 0 5px;
}
nav ul li a{
    color: #fff;
    text-decoration: none;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 1px;
    padding: 8px 10px;
    border-radius: 5px;
    transition: all 0.3s ease;
}
nav ul li a:hover,
nav ul li a.active{
    color: #1b1b1b;
    background: #fff;
}
nav .menu-btn i{
    color: #fff;
    font-size: 22px;
    cursor: pointer;
    display: none;    
}
@media (max-width: 940px) {
    nav .menu-btn i{
        display: block;
    }
    nav ul{
        position: fixed;
        top: 80px;
        left: 0;
        background: #111;
        height: 100vh;
        width: 100%;
        display: block;
        text-align: center;
    }
    #click:checked ~ ul{
        left: 0%;
    }
    nav ul li{
        margin: 40px 0;
    }
    nav ul li a{
        font-size: 20px;
    }
    nav ul li a:hover,
    nav ul li a.active{
        color: cyan;
        background: none;
  }
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="https://kit.fontawesome.com/a076d05399.js"></script>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <nav>
            <div class="logo">Brand</div>
            <input type="checkbox" id="click">
            <label for="click" class="menu-btn">
                <i class="fas fa-bars"></i>
            </label>
            <ul>
                <li><a class="active" href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Gallery</a></li>
                <li><a href="#">Feedback</a></li>
            </ul>
        </nav>
        
    </body>
</html>

So yea how should i fix this
Thanks in advance

分享到QQ

分享到微博