html - 单击汉堡菜单后，试图显示我的菜单。汉堡菜单显示在一定宽度上

Question

当屏幕达到一定大小时，导航列表就会隐藏起来，并显示一个菜单。

当您单击汉堡包时，它应该会显示菜单，而当您单击 X 时，它应该会关闭菜单。

除了下拉列表中显示的菜单外，我得到了所有效果。

codepen 查看代码

https://codepen.io/mattmatt33/project/editor/DQpvPP#0

HTML 和 CSS:

/* Hamburger Menu Start */

.menu-wrap {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1;
    visibility: hidden;
}

.menu-wrap .toggler {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    cursor: pointer;
    width: 50px;
    height: 50px;
    opacity: 0;
}

.menu-wrap .hamburger {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    width: 60px;
    height: 60px;
    padding: 1rem;
    background: #fff; 
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.75;
}

/* hamburger lines */
.menu-wrap .hamburger > div {
    position: relative;
    width: 100%;
    height: 2px;
    background-color: var(--mainColor);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s ease;
}

/* top and bottom lines */
.menu-wrap .hamburger > div:before,
.menu-wrap .hamburger > div:after {
    content: '';
    position: absolute;
    z-index: 1;
    top: -10px;
    width: 100%;
    height: 2px;
    background: inherit;
}

.menu-wrap .hamburger > div:after {
    top: 10px;
}

/* Turn lines into an X */
.menu-wrap .toggler:checked + .hamburger > div:before,
.menu-wrap .toggler:checked + .hamburger > div:after {
    top: 0;
    transform: rotate(90deg);
}


.menu-wrap .toggler:checked + .hamburger > div {
    transform: rotate(135deg);
}

/* Hamburger Menu End */

@media (max-width: 1024px ) {
    .nav-list {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}


@media (max-width: 900px) {
    .nav-list {
        display: block; 
        margin-top: 70px;
        margin-left: 63%;
        visibility: hidden;
    }

    .menu-wrap {
        visibility: visible;
    }

    .menu-wrap .toggler:checked ~ .nav-list {
        visibility: visible;
    }

    
     .main-logo {
        max-width: 100%;
    } 
}

@media (max-width: 500px) {
   
    .main-logo {
        display: block;
        max-width: 100%;
        width: 100%;
    }
    
}

<header>
            
        <a href="home.html"> <img src="../imgs/logo.jpg" alt="Kreative Kage Logo" class="main-logo"> </a>
            
        <div class="menu-wrap">
                    <input type="checkbox" class="toggler">
                        <div class="hamburger">
                            <div></div>
                        </div>
                    </div>

                <ul class="nav-list"> 
                    <a href="home.html"><li>Home</li></a>
                    <a href="gallery.html"><li>Gallery

                        <ul class="sub-menu">
                            <a href="weddings.html"><li>Weddings</li></a>
                            <a href="maternity.html"><li>Maternity</li></a>
                            <a href="seniors.html"><li>Graduates</li></a>
                            <a href="babies.html"><li>New Borns</li></a>
                            <a href="family.html"><li>Family</li></a>
                        </ul>
                    </li></a>
                    <a href="photographers.html"><li>Photographers
                            <ul class="sub-menu">
                                    <a href="omar.html"><li>Jordan Kage</li></a>
                                    <a href="dave.html"><li>Dave Kage</li></a>
                                    <a href="jas.html"><li>Jas</li></a>
                            </ul>
                    </li></a>
                    <a href="rates.html"><li>Rates</li></a>
                    <a href="contact.html"><li>Contact Us</li></a>
                </ul>
            
        </header>

Answer 1

这行代码没有正确选择 .nav-list 元素

.menu-wrap .toggler:checked ~ .nav-list {
        visibility: visible;
    }

The element1~element2 selector matches occurrences of element2 that are preceded by element1.

Both elements must have the same parent, but element2 does not have to be immediately preceded by element1.

.nav-list 元素是 .menu-wrap 的兄弟元素，而不是子元素。

.nav-list 的 CSS 无法知道 .toggler 的状态。最简单的解决方案是使用 JavaScript 将 .checked 类应用于 .menu-wrap 并添加此 CSS 以使菜单在单击汉堡包时可见:

.menu-wrap.checked > .nav-list {
        visibility: visible;
    }