为什么条形图在左边而不是右边，为什么小屏版本需要滑动而不是使用功能来查看菜单？

Question

大家好，我正在尝试创建一个移动友好的 header 菜单，其中的栏位于屏幕右侧。 Javascript 用于单击十字和用于打开右侧菜单的栏。除了我有一个

条形图在左边，应该在右边

有人可以帮助我并给我一些见解吗？

这是我的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">
    <title>Home</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.4/css/fontawesome.min.css">
    
</head>
<body>
    <section class="header">
        <nav>
            
            <div class="nav-links" id="navLinks">
                <i class="fa fa-times" onclick="hideMenu()"></i>
                <ul>
                    <li><a href="index.html">HOME</a></li>
                    <li><a href="courses.html">Courses</a></li>
                    <li><a href="endangered.html">Endangered</a> </li>
                                
                    <li><a href="">Contact</a></li>
                </ul>
            </div>
            <i class="fa fa-bars" onclick="showMenu"></i>
        </nav>

    </section>

    <script src="javascript.js"></script>
    
</body>
</html>

这里是css代码

*{
    margin: 0;
    padding: 0;
    font-family: "poppins", sans-serif;
    
}

.header{ 
    height: 100vh;
    width: 100%;
    
}

nav{
    display: flex;
    padding: 2% 6%;
    justify-content: space-between;
    align-items: center;
}

.nav-links{
    flex: 1;
    text-align: center;
}

.nav-links ul li{
    list-style: none;
    display: inline-block;
    padding: 8px 12px;
    position: relative;
}

.nav-links ul li a{
    text-decoration: none;
    color: #5ab61d;
    
    font-size: 20px;
}

.nav-links ul li a::after{
    content: '';
    background: #0ace83;
    width: 0;
    height: 2px;
    margin: auto;
    display: block;
    left: 50%;
    transition: all 0.5s;
}

.nav-links li a:hover::after{
    width: 100%;
}

nav .fa{
    display: none;
}

@media(max-width: 700px){
    .nav-links ul li{
        display: block;

    }
    .nav-links{
        position: absolute;
        background: #f44336;
        height: 100vh;
        width: 200px;
        top: 0;
        right: -200px;
        text-align: left;
        z-index: 2;
        transition: 1s;
    }
    nav .fa{
        display: block;
        color: #000;
        margin: 10px;
        font-size: 22px;
        cursor: pointer;
    }

    .nav-links ul{
        padding: 30px;
    }
}

这里是 javascript

/* Toggle between showing and hiding the navigation menu links when the user clicks */
    var navLinks = document.getElementById("navLinks")
    function showMenu(){
        navLinks.style.right = "0";
    }
    function hideMenu(){
        navLinks.style.right = "-200px";
    }

我花了好几个小时试图找出问题所在，非常感谢您的帮助！

Answer 1

将图标中的事件元素 oneclick="showMenu" 替换为 onclick="showMenu"。

汉堡位置可以

nav {
    display: flex;
    padding: 2% 6%;
    justify-content: end;
    align-items: center;
}

应该可以工作，因为您的导航面板位于绝对位置，但也许最好将您的图标与导航元素隔离开来。

为什么条形图在左边而不是右边，为什么小屏版本需要滑动而不是使用功能来查看菜单？

why are the bars on the left instead of the right and why does the small screen version need to slide instead of using the function to see the menu?

javascript

html

css

firefox

menu