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

【问题标题】：How Can I Make responsive hamburger menu?如何制作响应式汉堡菜单？
【发布时间】：2020-12-01 21:30:32
【问题描述】：

如何使这个“条形”图标发挥作用？我在互联网上观看的视频让我感到困惑。我想做的汉堡菜单就像在下面的网站上； 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】：

正在寻找这样的菜单？

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 在带有 myPositionClass 的元素内有一个带有 myDropdownClass 的元素

【讨论】：

  • 我会试试的。谢谢。
  • 我不喜欢悬停，我希望它在单击时打开并再次单击以关闭。我该怎么办？
  • :active 或 :target 可能会为您解决问题。如果您正在寻找在单击时发生的复杂事件，尽管您需要使用一些 js。
猜你喜欢
  • 2021-08-04
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2021-01-30
  • 1970-01-01
  • 2022-12-18
  • 2021-06-21
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode