Question

Hamburger nav 按下后不显示菜单，并且在进入移动模式时徽标消失。

它运行良好，直到我玩弄菜单并使徽标向左对齐，文本菜单向右对齐。

CSS：

nav {
        position: relative;
        border-top: 5px solid green;
    }

    .logo{
        width: 10px;
        height: auto;
        padding: 20px 10px;
    }
    
    .logo a{
        font-size: 20px;
    }

    .hamburger{
        position: absolute;
        cursor: pointer;
        right: 5%;
        top: 50%;
        transform: translate(-5%, -50%);
        z-index: 101;
    }

    .nav-links {
        position: fixed;
        background: white;
        height: 100vh;
        width: 100%;
        flex-direction: column;
        clip-path: circle(100px at 90% -20%);
        -webkit-clip-path: circle(100px at 90% -20%);
        transition: all 1s ease-out;
        pointer-event: none;
        z-index: 100;
    }

    .nav-links.open {
        clip-path: circle(1000px at 90% -20%);
        -webkit-clip-path: circle(1000px at 90% -20%);
        pointer-event: all;
        z-index: 100;
    }

    .landing{
        flex-direction: column;
    }

    .nav-links li{
        opacity: 0;
    }

    .nav-links li a {
        font-size: 25px;
    }

    .nav-links li:nth-child(1){
        transition: all 0.5s ease 0.2s;
    }
    .nav-links li:nth-child(2){
        transition: all 0.5s ease 0.4s;
    }
    .nav-links li:nth-child(3){
        transition: all 0.5s ease 0.6s;
    }
    .nav-links li:nth-child(4){
        transition: all 0.5s ease 0.6s
    }

    li.fade {
        opacity: 1;
    }
}

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="style.css" />
        <title>Nav-bar bubble effect</title>
    </head>
    <body>
        
        <header>
        <img class="logo" src="logo.png">
        <nav>
            <div class="hamburger">
                <div class="line"></div>
                <div class="line"></div>
                <div class="line"></div>
            </div>
            <ul class="nav-links">
                <li><a href="#">Home</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Gallery</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
        </header>

        <div id="slider">
            <figure>
                <img src="bg.jpg">
                <img src="bg2.jpg">
                <img src="bg3.jpg">
                <img src="bg4.jpg">
                <img src="bg5.jpg">
            </figure>
     </div>
</script>
</body>
</html>

Answer 1

我认为您的汉堡菜单缺少一些高度和宽度，添加后，我可以正常工作：

`.hamburger{
position: absolute;
cursor: pointer;
right: 5%;
top: 50%;
transform: translate(-5%, -50%);
z-index: 101;  

/* HERE  */
background-color: lightyellow; /* just to locate it right */
height:50px;
width: 50px;
display: flex;
flex-flow: column nowrap;
justify-content: space-between  
}

.line { border-bottom: 8px solid black; }

`

但是有一点，您使用了一些“flex-direction”，如果您没有“display:flex”，这些就毫无用处；)

Answer 2

不知道你的意思，这是我得到的： inactive burger clicked

汉堡导航不显示菜单

2 个答案: