html - 尝试在点击汉堡菜单后显示我的菜单。汉堡菜单以一定宽度显示

当屏幕达到一定尺寸时，导航列表将隐藏起来，并显示一个菜单。

当您单击汉堡包时，它应该显示菜单，而当您单击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>

最佳答案

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

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

  element1〜element2选择器匹配出现在element1之前的element2。
  
  两个元素必须具有相同的父元素，但element2不必
  紧跟在element1之前。


.nav-list元素是.menu-wrap的同级元素，而不是子元素。

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

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

关于html - 尝试在点击汉堡菜单后显示我的菜单。汉堡菜单以一定宽度显示，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/58943759/