Thu. Jun 1st, 2023

[ANSWERED] javascript – Responsive mobile hamburger menu

By

Nov 19, 2022 css, html, javascript, jquery

Solution 1 :

You’ll need some huge code for this. Check this out! Exactly what you need.

function myFunction() {
 var x = document.getElementById("myTopnav");
 if (x.className === "topnav") {
  x.className += " responsive";
  } else {
   x.className = "topnav";
  }
 }

body {
 margin-right: 2;
 margin-left: 2;
}

.topnav {
 overflow: hidden;
 background-color: black;
 padding-left: -2;
 padding-right: -2;
}

.topnav a {
 float: left;
 display: block;
 color: #f2f2f2;
 text-align: center;
 padding: 14px 16px;
 text-decoration: none;
 font-size: 17px;
}

.topnav a:hover {
 background-color: #eee;
 color: black;
}

.topnav a.active {
 background-color: #4CAF50;
 color: white;
}

.topnav .icon {
 display: none;
}

@media screen and (max-width: 600px) 
{
  .topnav a:not(:first-child) {
    display: none;
   }
  .topnav a.icon {
   float: right;
   display: block;
  }
 }

  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
   position: absolute;
   right: 0;
   top: 0;
  }
  .topnav.responsive a {
   float: none;
   display: block;
   text-align: left;
  }
 }

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" 
content="width=device-width, initial- 
scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="topnav" id="myTopnav">
  <a href="#home" class="active">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
  <a href="javascript:void(0);" class="icon" onclick="myFunction()">
   <i class="fa fa-bars"></i>
  </a>
</div>
 <p>Resize the browser window to see how it works. If your screen is more than 600px wide, the menu will be in one line. If not, it will be a hamburger menu.</p>
</body>
</html>

Problem :

I’m almost done my website except my dropdown menu won’t work. I’ve tried googling and asking friends for suggestions and none helped. Below I’ve attached code where the dropdown is used or mentioned:

/*Responsive Navigation*/
$(document).ready(function() {
  $('.toggle').click(function() {
    $('.toggle').toggleClass('active')
    $('nav ul').toggleClass('active-menu')
  })
});

@media(max-width:900px) {
  .toggle {
    display: block;
  }
  .toggle:before {
    content: 'f0c9';
    font-family: fontAwesome;
    line-height: 0px;
    margin-left: -30px;
  }
  .toggle.active:before {
    content: 'f00d' !important;
  }
}


/*Navbar full Screen*/

.toggle {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="" class="dropdown">
  <div class="toggle"></div>
</a>
<!--Menu items-->
<ul class="menu">
  <li class="active"><a href="#main">Home</a></li>
  <li><a href="#about">About</a></li>
  <li><a href="#services">Services</a></li>
  <li><a href="#portfolio">Portfolio</a></li>
  <li><a href="#contact-form">Contact</a></li>
</ul>

Comments

Comment posted by dyon048

What do you mean with the dropdown menu don’t work? You have made toggle to display none at the end of CSS, it will make toggle invisible. If you want to make toggle invisible on mobile, try to move toggle display none to top of media query.

Comment posted by SK-the-Learner

If you have any doubts about the answer, ask here.

By

Related Post

[ANSWERED] java – How to send dropdown value to servlet NOT the option text

Nov 20, 2022

[ANSWERED] html – How to include a clickable image behind a link

Nov 20, 2022

[ANSWERED] html – Move list item to the left in header/navigation menu

Nov 20, 2022