CODEWITHSUNDEEP
javascriptjquery
natem1270
natem1270

Reputation: 207

JavaScript Close Menu On Click

I'm very new to JavaScript and having some trouble trying to get the desired result. I've built an off-canvas menu based on the w3 school's example. I want the user to be able to click the hamburger glyphicon to close the menu when it's open in addition to using the "x" button. If there is an easier way to do this using JQuery that would be great as well!

Here's my attempt:

var width = document.getElementById("nav").style.width;
while (width != 0) {
    document.getElementById('glyphicon-menu-hamburger').onclick = closeNav();
  }

Here's the codepen: https://codepen.io/nathanmathews/pen/XRKBBN

Here's my updated attempt, still incorrect:

var width = document.getElementById("nav").style.width;
if (width != 0) {
    document.getElementById('glyphicon-menu-hamburger').onclick = closeNav;
  }

Upvotes: 0

Views: 2734

Answers (2)

Hari Das
Hari Das

Reputation: 10894

Here is the updated code. Is this something you want ?

function toggleMenu(){
  if($("#nav").width() > 0){
    closeNav();
  }else{
    openNav();
  }
}

function openNav() {
 $(".container-fluid .nav-menu span").attr("class","").html("×");   document.getElementById("nav").style.width = "250px";
     document.getElementById("main").style.marginRight = "250px";
}
    
function closeNav() {
  $(".container-fluid .nav-menu span").attr("class","glyphicon glyphicon-menu-hamburger").html("");   document.getElementById("nav").style.width = "0";
    document.getElementById("main").style.marginRight = "0";
}

var width = document.getElementById("nav").style.width;
while (width != 0) {
    document.getElementById('glyphicon-menu-hamburger').onclick = closeNav();
  }
.nav-menu span{
  float: right;
  font-size: 35px;
  line-height: 60px;
  margin-left: 2px;
  margin-right: 15px;
  cursor: pointer;
}
.nav-menu a{
  font-size: 30px;
  font-weight: bold;
}
.hiddenNav{
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  right: 0;
  background-color: rgb(164, 166, 168);
  overflow: hidden;
  padding-top: 50px;
  transition: .5s; 
}
.hiddenNav a{
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: white;
    display: block;
    transition: 0.3s
}
.hiddenNav a:hover, .hiddenNav a:focus{
    color: #f1f1f1;
}
#main{
  transition: margin-right .5s;
}
.glyphicon-menu-hamburger{
  cursor: pointer;
}
<!--Bootstrap-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!--Main Wrapper-->
<div id="main">
  
<!--Navbar-->
<div class="navbar navbar-default" role="navigation">
	<div class="container-fluid">
		<div class="nav-menu">
			<span onclick="toggleMenu()" class="glyphicon glyphicon-menu-hamburger"></span>
			<a class="navbar-brand" href="#">Example</a>
		</div>
	</div>
</div>

<!--Hidden Menu-->
<div id="nav" class="hiddenNav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <a href="#">Option 1</a>
  <a href="#">Option 2</a>
  <a href="#">Option 3</a>
  <a href="#">Option 4</a>
</div>
</div>

Upvotes: 1

Dan Philip Bejoy
Dan Philip Bejoy

Reputation: 4376

Just replace openNav() with this toggleNav()

function toggleNav() {
  var nav = document.getElementById("nav"),
   main = document.getElementById("main");
  if (nav.style.width == "250px") {
    nav.style.width = "0";
    main.style.marginRight = "0";
  }
  else {
    nav.style.width = "250px";
    main.style.marginRight = "250px";
  }
}

Upvotes: 1

Related Questions