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>

标签： htmlcssresponsive

Answer 1

这就是我所说的。请查看底部的 CSS 以查看更改。我也对media query您min-width的max-width. 当屏幕大于 1024 像素时，您的元素会发生什么？没有默认设置

$('.menu-wrap').click(function(){ $('.nav-list').toggle(); });

/* 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-color: #000; 
    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: #fff;
    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 */

/*CHANGES MADE HERE*/
.nav-list {
    display: none; 
    margin-top: 70px;
    margin-left: 63%;
}
.menu-wrap {
    visibility: visible;
}  
 .main-logo {
    max-width: 100%;
} 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<header>
            
        <a href="home.html"> 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>