All geek questions in one place

How to create a hamburger menu

therefore I am new to html / css and I work on a personal website. I'm having trouble creating a hamburger menu. I have a heading configured for mobile resizing, but when I click on the hamburger icon, the menu starts the main navigation again. I am trying to make it pressed to the main menu and have a width of 100%. Also add an “x” to close it when the user is looking at it. I hope I explain it well enough, I will send a codepen link.

function myFunction() { var x = document.getElementById("myTopnav"); if (x.className === "topnav") { x.className += " responsive"; } else { x.className = "topnav"; } } 
 body { background-color: #EFF0EC } .header { padding-left: 30px; background-color: #FFFFFF; padding-top: 18px; padding-bottom: 18px; } h1 { font-size: 36px; font-family: Buenard, Times, serif; background-color: #FFFFFF float: left; display: inline; } ul.topnav { list-style-type: none; display: inline; float: right; margin: auto; padding: 0; overflow: hidden; } li a { color: #000; text-decoration: none; display: inline-block; transition: 0.3s; } li a:hover { color: #80B198; } li { font-size: 22px; font-family: Lato, Arial sans-serif; padding: 10px 16px; display: inline-block; margin: auto; } ul. topnav li.icon { display: none; } /* Smartphone-size screens */ @media (max-width: 767px) { ul.topnav li {display: none;} ul.topnav li.icon { display: inline-block; } ul.topnav.responsive {position: relative;} ul.topnav.responsive li.icon { position: absolute; right: 0; top: 0; } ul.topnav.responsive li { float: none; display: inline; } ul.topnav.responsive li a { display: block; text-align: left; } } 
 <body> <div class="header"> <h1>Lorem Ipsum</h1> <ul class="topnav" id="myTopnav"> <li><a class="active" href="#portfolio">Portfolio</a></li> <li><a href="#about">About Me</a></li> <li><a href="#contact">Contact</a></i> <li class="icon"> <a href="javascript:void(0);" onclick="myFunction()">&#9776;</a> </li> </ul> </div> </body>
+6
source share
1 answer

Well, first of all, you should get the icon outside of ul and place this ul as absolute on mobile devices 100% wide. if you click the hamburger icon, it will open the menu, and if you click on it again, it will close it.

Here is codepen and below is code.

Instead of the cross. I think you should try one of these hamburger menus in this codepen . You can simply replace one of them with <div class="icon">

  function myFunction() { var x = document.getElementById("myTopnav"); if (x.className === "topnav") { x.className += " responsive"; } else { x.className = "topnav"; } } 
 body { background-color: #EFF0EC } .header { padding-left: 30px; background-color: #FFFFFF; padding-top: 18px; padding-bottom: 18px; position:relative; } h1 { font-size: 36px; font-family: Buenard, Times, serif; background-color: #FFFFFF float: left; display: inline; } ul.topnav { list-style-type: none; display: inline; float: right; margin: auto; margin-right:50px; padding: 0; overflow: hidden; } li a { color: #000; text-decoration: none; display: inline-block; transition: 0.3s; } li a:hover { color: #80B198; } li { font-size: 22px; font-family: Lato, Arial sans-serif; padding: 10px 16px; display: inline-block; margin: auto; } div.icon { position:absolute; top:30px; right:20px; } /* Smartphone-size screens */ @media (max-width: 767px) { ul.topnav{ position:absolute; top:60px; left:0; margin:0; padding:0; width:100%; background-color:white; } ul.topnav li {display: none;} ul.topnav li.icon { display: inline-block; } ul.topnav.responsive li { float: none; display: inline; } ul.topnav.responsive li a { display: block; text-align: left; } } 
 <body> <div class="header"> <h1>Lorem Ipsum</h1> <ul class="topnav" id="myTopnav"> <li><a class="active" href="#portfolio">Portfolio</a></li> <li><a href="#about">About Me</a></li> <li><a href="#contact">Contact</a></li> </ul> <div class="icon"> <a href="javascript:void(0);" onclick="myFunction()">&#9776;</a> </div> </div> </body>
+3
source

Source: https://habr.com/ru/post/1013624/

More articles:


All Articles