文章/答案/技术大牛

发布

社区首页 >问答首页 >如何制作响应式汉堡包菜单？

问如何制作响应式汉堡包菜单？
EN

Stack Overflow用户

提问于 2020-12-02 05:30:32

回答 1查看 42关注 0票数 1

我怎样才能使这个“条”图标起作用？我在网上看的视频把我搞糊涂了。我想做的汉堡包菜单类似于下面的网站；https://www.greenmountainenergy.com/#如果你不想浪费时间，我也可以提供资源建议，因为它很长。提前感谢您的回答。

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

a{
    text-decoration: none;
    color: black;
}

html{
    font-family: 'Montserrat', sans-serif;
}

#TopBar{
    width: 100%;
    height: 80px;
    background-color: red;
}

.container{
    max-width: 1366px;
    height: 100%;
    margin: 0 auto;
    padding-right: 2rem;
    padding-left: 2rem;
}

.nav-menu{
    display: flex;
    height: 100%;
    justify-content: space-between;
    align-items: center;
}

@media screen and (min-width: 1240px) {

.nav-menu-list > ul{
    align-items: center;
    height: 100%;
}

.nav-menu-list > ul > li > a{
    padding: 1.7rem 0rem;
}

.item-1:hover .dropdown{
    visibility: visible;
    opacity: 1;
}

.item-2:hover .dropdown-2{
    visibility: visible;
    opacity: 1;
}
.item-3:hover .dropdown-3{
    visibility: visible;
    opacity: 1;
}
.item-4:hover .dropdown-4{
    visibility: visible;
    opacity: 1;
}

.nav-menu-list > ul > li > a:hover{
    text-transform: uppercase;
    font-weight: 500;
}

.nav-menu-list >  ul{
    position: relative;
    display: flex;
    list-style: none;
}

.nav-menu-list > ul > li{
 padding-left: 2.5rem;
 cursor: pointer;
}

.dropdown{
    position: absolute;
    display: flex;
    flex-direction:column;
    list-style: none;
    background-color: #f7f7f7;
    padding: 30px;
    margin-top: 22px;
    left: -50px;
    width: 340px;
    line-height: 1.4rem;
    font-size: 14px;
    visibility: hidden;
    opacity: 0;
}

.dropdown > a > span{
  display: block;
  text-align: center;
  border-bottom: 1px solid grey;
  margin-bottom: 0.4rem;
  color: #1F6099;
  font-weight: bold;
}

.dropdown > li > a{
  display: block;
  margin-top:0.6rem ;
}

.dropdown > li > a:hover{
    color: #1F6099;
}

.dropdown > .bold-text > a{
    font-weight: 500;
    font-weight: bold;
}

.dropdown > .space > a{
    margin-bottom: 3rem;
}

.dropdown-2{
    left: 135px;
    visibility: hidden;
    opacity: 0;
}


.dropdown-3{
    left: 260px;
    visibility: hidden;
    opacity: 0;
}

.dropdown-4{
    left: 410px;
    visibility: hidden;
    opacity: 0;
}

.nav-menu .nav-menu-list, .nav-menu-list2{
    display: flex;
}

.nav-menu-list2 > ul{
    display: flex;
    align-items: center;
    height: 100%;
    list-style-type: none;
}

.nav-menu-list2 > ul > li{
    padding-left: 2.3rem;
}

.nav-menu-list2 .item-2{
    color: #1F6099;
}

.nav-menu-list2 i{
    padding-right: 0.7rem;
}

.icon{
  display: none;
}

.list ul{
  transition: all .8s ease;
}

}

.orange-btn{
  padding: 12px 15px;
    background-color: #F47825;
    color: white;
}

@media screen and (max-width: 1239px) {
  .nav-menu-list{
    display: none;
  }
  .nav-menu-list2{
    display: none;
  }
}

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Navbar</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel='stylesheet' href='main.css'>
    <link rel='stylesheet' href='global.css'>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" /></head>
    <link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500&display=swap" rel="stylesheet">  
<body>
    <nav id="TopBar">
    <div class="container">
        <div class="nav-menu">
        <div class="logo">
            <img src="https://www.greenmountainenergy.com/wp-content/themes/gmec-bones/library/images/gme-logo-spring2017-refresh.png" alt="Logo">
        </div>
        <a href="" class="icon">
            <i class="fa fa-bars fa-2x"></i>
          </a>
            <div class="nav-menu-list">
                <ul class="list">
                    <li class="nav-menu-list-item item-1"><a href="">Plans And Services</a>
                        <ul class="dropdown dropdown-1">
                            <a href=""> <span>RESIDENTAL</span></a>
                            <li><a href="">Go Local Solar</a></li>
                            <li><a href="">Solar with Green Mountain Driver</a></li>
                            <li><a href="">Solar All Nighter for EVs</a></li>
                            <li><a href="">Renewable Rewards® Buyback Plan</a></li>
                            <li><a href="">Get a Quote on Home Solar Panels</a></li>
                            <li class="bold-text space"><a href="">View All Your Electricity Plans</a></li> 
                            <a href=""> <span>COMMERCIAL</span></a>
                            <li><a href="">Electricity for Small Business</a></li>
                            <li><a href="">Commercial Solar Power</a></li>
                            <li><a href="">Solar Buyback Program</a></li>
                            <li><a href="">Channel Partners</a></li>
                            <li class="bold-text"><a href="">Get A Quote for Your Business</a></li>
                          </li>
                        </ul>  
                    </li>
                    <li class="nav-menu-list-item item-2"><a href="">Why Do Green</a>
                        <ul class="dropdown dropdown-2">
                            <a href=""> <span>RESIDENTAL</span></a>
                            <li><a href="">Go Local Solar</a></li>
                            <li><a href="">Solar with Green Mountain Driver</a></li>
                            <li><a href="">Solar All Nighter for EVs</a></li>
                            <li><a href="">Renewable Rewards® Buyback Plan</a></li>
                            <li><a href="">Get a Quote on Home Solar Panels</a></li>
                            <li class="bold-text space"><a href="">View All Your Electricity Plans</a></li> 
                            <a href=""> <span>COMMERCIAL</span></a>
                            <li><a href="">Electricity for Small Business</a></li>
                            <li><a href="">Commercial Solar Power</a></li>
                            <li><a href="">Solar Buyback Program</a></li>
                            <li><a href="">Channel Partners</a></li>
                            <li class="bold-text"><a href="">Get A Quote for Your Business</a></li>
                          </li>
                        </ul>  
                    </li>
                    <li class="nav-menu-list-item item-3"><a href="">About Us</a>
                        <ul class="dropdown dropdown-3">
                            <a href=""> <span>RESIDENTAL</span></a>
                            <li><a href="">Go Local Solar</a></li>
                            <li><a href="">Solar with Green Mountain Driver</a></li>
                            <li><a href="">Solar All Nighter for EVs</a></li>
                            <li><a href="">Renewable Rewards® Buyback Plan</a></li>
                            <li><a href="">Get a Quote on Home Solar Panels</a></li>
                            <li class="bold-text space"><a href="">View All Your Electricity Plans</a></li> 
                            <a href=""> <span>COMMERCIAL</span></a>
                            <li><a href="">Electricity for Small Business</a></li>
                            <li><a href="">Commercial Solar Power</a></li>
                            <li><a href="">Solar Buyback Program</a></li>
                            <li><a href="">Channel Partners</a></li>
                            <li class="bold-text"><a href="">Get A Quote for Your Business</a></li>
                          </li>
                        </ul>  
                    </li>
                    <li class="nav-menu-list-item item-4"><a href="">Customer Service</a>
                        <ul class="dropdown dropdown-4">
                            <a href=""> <span>RESIDENTAL</span></a>
                            <li><a href="">Go Local Solar</a></li>
                            <li><a href="">Solar with Green Mountain Driver</a></li>
                            <li><a href="">Solar All Nighter for EVs</a></li>
                            <li><a href="">Renewable Rewards® Buyback Plan</a></li>
                            <li><a href="">Get a Quote on Home Solar Panels</a></li>
                            <li class="bold-text space"><a href="">View All Your Electricity Plans</a></li> 
                            <a href=""> <span>COMMERCIAL</span></a>
                            <li><a href="">Electricity for Small Business</a></li>
                            <li><a href="">Commercial Solar Power</a></li>
                            <li><a href="">Solar Buyback Program</a></li>
                            <li><a href="">Channel Partners</a></li>
                            <li class="bold-text"><a href="">Get A Quote for Your Business</a></li>
                          </li>
                        </ul>  
                    </li>
                </ul>
            </div>
                <div class="nav-menu-list2">
                 <ul>
                    <li><a href="" class="item-1 orange-btn">View Plans</a></li>
                    <li><a href="" class="item-2"> <i class="fas fa-user"></i> <span>My Account</span></a></li>
                 </ul>
                </div>
                </div>
            </div>
        </div>
    </div>
    </nav>


</body>
</html>

javascript

html

css

responsive-design

navbar

回答 1

Stack Overflow用户

发布于 2020-12-02 07:07:45

想要这样的菜单吗？

w3schools dropdown tutorial

还建议使用display: none而不是visibility: hidden，因为css对待这两个属性的方式是非常不同的。

现在还不完全清楚你是在尝试制作多个小菜单还是一个带有条的大菜单，但每一个菜单背后的本质都是

.myPositionClass {
    position: relative;
}
.myDropdownClass {
    display: none;
    position: absolute;
    z-index: 1;
}

.myPositionClass:hover .myDropdownClass {
    display: block;
}

.

其中，html包含一个元素，该元素的内部为myDropdownClass，元素中包含myPositionClass

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/65098857

复制

相似问题

问如何制作响应式汉堡包菜单？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何制作响应式汉堡包菜单？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何制作响应式汉堡包菜单？
EN