How Can I Make responsive hamburger menu?
Question
How can I make this "bars" icon functional? The videos I watch on the internet confuse me. The hamburger menu I want to make is like on the following site; https://www.greenmountainenergy.com/# I am also open to resource suggestions if you don't want to mess around because it's long. Thank you in advance for your answers.
*{ 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>
1 answers
solution1
1 2020-12-01 23:07:44
Looking for a menu like this?
It is also recommended to use display: none rather than visibility: hidden as the way css treats these two properities is very different.
It is not entirely clear whether you are trying to make multiple small menus or one big one with the bars, but the essence behind each one is
.myPositionClass {
position: relative;
}
.myDropdownClass {
display: none;
position: absolute;
z-index: 1;
}
.myPositionClass:hover .myDropdownClass {
display: block;
}
.
Where the html has an element with myDropdownClass inside an element with myPositionClass
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How Do I Make My Hamburger Menu Responsive?
How can I make my hamburger menu to appear?
How do I make my responsive hamburger menu show up and hide with JS
How to make the transition smooth for the hamburger menu in responsive navbar when toggled?
How can I turn my navbar into Hamburger menu for mobile using responsive design?
How can I minimize JavaScript for a hamburger menu?
How can I make my hamburger menu smaller and also have a perfect circular border around it?
Responsive mobile hamburger menu
How do i make hamburger menu close on link click
How do I make my hamburger menu be converted into a horizontal one?
Related Tags