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

时间：2019-11-19 22:23:41

标签： html css responsive

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

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

2 个答案:

答案 0 :(得分：0)

此行代码未正确选择.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;
    }

答案 1 :(得分：0)

这就是我在说的。请查看底部的CSS以查看更改。我对您的media query也有疑问，为什么不从最小的尺寸设置（移动到台式机）开始使用min-width而不是max-width。当屏幕大于1024px时，元素会发生什么变化？没有默认设置

$('.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>

相关问题
最新问题