CODEWITHSUNDEEP
javascripthtmlcss
MeL17
MeL17

Reputation: 31

I'm trying to do a Hamburger Menu, but it won't show up when I click it

I apologize if I make any mistakes but I just joined earlier and I am still a newbie to web development. I tried practicing a hamburger menu earlier but it won't show up. I was hoping if anyone could guide me on which part did I do wrong. Here's the code.

var show = document.getElementById("nav-links");

function showMenu() {
  show.style.right = "0";
}

function closeMenu() {
  show.style.right = "-200px";
}
@media (max-width: 700px) {

  .nav-bar {
    padding: 10px 30px;
  }

  .fa-bars {
    position: absolute;
    right: 20px;
    top: 10px;
  }

  .nav-bar .fa {
    display: block;
    color: #f1f1f1;
    margin: 10px 25px;
    font-size: 22px;
    cursor: pointer;
  }

  .nav-links {
    height: 100vh;
    width: 200px;
    background: #111;
    top: 0;
    right: -200px;
    text-align: left;
    z-index: 2;
    transition: 0.5s;
    position: absolute;
  }

  .nav-links ul a {
    display: block;
  }

  .nav-links .btn {
    float: none;
    margin-left: 25px;
    margin-top: 10px;
  }
}
<div class="nav-bar">
  <div class="nav-logo">
    <a href="#">GottaGo</a>
  </div>
  <div class="nav-links">
    <i class="fa fa-close" onclick="closeMenu()" id="nav-links"></i>
    <ul>
      <a href="#">
        <li>Home</li>
      </a>
      <a href="#">
        <li>GoWhere</li>
      </a>
      <a href="#">
        <li>About</li>
      </a>
    </ul>
    <button type="button" class="btn">SIGN UP</button>
  </div>
  <i class="fa fa-bars" onclick="showMenu()" id="nav-links"></i>
</div>

My plan was that, when I click the menu it will show this https://i.sstatic.net/RWYYZ.png but it was not showing when i click it. I tried inserting an alert(); just to test it, when I clicked it, instead of the menu it just shows the alert but not the menu I was hoping for. I apologize, this is my first post here so I hope I didn't make anyone confused.

Upvotes: 0

Views: 609

Answers (3)

Endunry
Endunry

Reputation: 974

Everything you use in the code seems pretty old and not really good to learn, i created that little snippet, maybe you get something out of it (i commented everything so you could understand it). Just comment it to ask for details on something

let hamburger = document.getElementById("hamburger"); // Get The Hamburger-Button
let nav = document.getElementById("nav"); // Get the Navigation
hamburger.onclick = ()=>{ // when you click the hamburger, the following function will be exec
 nav.classList.toggle("open"); //you toggle the classList of the Navigation with the class "open"
};
body{
  overflow-x:hidden;
}

#hamburger{
  width:50px;
  height:40px;
  display:flex; /* Will display the inner bars like we want it (google css flex for more information)*/
  flex-direction:column; /* Will display the bars in a column */
  align-items: center; /* align the bars to the center */
  justify-content:space-around; /* Displays the bars in a even space vertically*/
  cursor:pointer; /* When you hover over the Hamburger, your cursor will be a pointer */
}

#hamburger div{
  width:30px;
  height:4px;
  background:black;
}

nav a{
  color:white;
  text-decoration:none;
}

nav{
  position:fixed; /* The position is fixed, and it stays the same when you scroll*/
  top:0px; /* Set the y-position to the top at 0px */
  right:0px; /* Set the x-position to the right at 0px */
  width:20vw; /* Set the width to 20vw (vw = viewpoint Width) you can see vw as a percentage of you current screen. so the value 20vw will use 20% of your available width */
  transform: translateX(20vw); /* translate (move) the navigation 20px to the right */
  height:100vh; /* set the height to 100vh (hv = viewpointHeight) so 100% of our current available height */
  background:black;
  transition:transform 500ms; /* set a transition animation for the transform */
}

#nav.open{
  transform: translateX(0); /* when you have the open class attached, it will be visible.
}

nav ul{
  margin:10px;
  list-style-type:none;
  padding:0;
}
<html>

<head>
    <title>Snippet</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>

  <div id="hamburger">
    <div></div>
    <div></div>
    <div></div>
  </div>
  
  <nav id="nav">
  
  <ul>
  
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Lorem</a></li>
  <li><a href="#">Ipsum</a></li>
  
  </ul>
  
  </nav>

</body>

</html>

Upvotes: 0

fabriziogianni7
fabriziogianni7

Reputation: 416

Try using this code to show, hide something: using positioning could lead to an ugly result. Remember then to use id to identify only one item and classes to identify a group of items. Another thing I can suggest is to keep it as simple as possible, dont put too many useless id or classes. try to achieve your result writing less code possible. I hope I helped you, good luck!

HTML:

<div class="nav-bar">
            <div class="nav-logo">
                <a href="#">GottaGo</a>
            </div>
            <div class="nav-links" id="nav-links">
                <i id="close" class="fa fa-close" onclick="closeMenu()" >Close menu</i>
                <ul>
                    <a href="#"><li>Home</li></a>
                    <a href="#"><li>GoWhere</li></a>
                    <a href="#"><li>About</li></a>
                </ul>
                <button type="button" class="btn">SIGN UP</button>
            </div>
            <i id="show"  class="fa fa-bars" onclick="showMenu()">Show menu</i>
        </div>

CSS

@media (max-width: 700px){
.nav-bar{
    padding: 10px 30px;
}
.fa-bars{
    position: absolute;
    right: 20px;
    top: 10px;
}
.nav-bar .fa{
    display: block;
    color: #f1f1f1;
    margin: 10px 25px;
    font-size: 22px;
    cursor: pointer;
}
.nav-links{
    position:absolute;
    height: 100vh;
    width: 200px;
    background: #111;
    top: 0;
    left: -200px;  
    text-align: left;
    z-index: 2;
    
}
.nav-links .btn{
    float: none;
    margin-left: 25px;
    margin-top: 10px;
    }
}
i:hover{
    cursor: pointer;
    color:red;
}

Javascript

var show = document.getElementById("nav-links");
function showMenu(){
    show.style.display="block";
            document.getElementById('show').style.display="none";
        document.getElementById('close').style.display="block";
}

function closeMenu(){
    show.style.display= "none";
        document.getElementById('close').style.display="none";
        document.getElementById('show').style.display="block";
}

Upvotes: 0

Derek Wang
Derek Wang

Reputation: 10193

On the snippet, you have changed the style of the close icon. And to show hamburger menu, the nav-menu style should be changed.

So I have added new id nav-menu to nav-links div and updated the style of that.

var show = document.getElementById("nav-menu");

function showMenu() {
  show.style.right = 0;
}

function closeMenu() {
  show.style.right = "-200px";
}
@media (max-width: 700px) {
  .nav-bar {
    padding: 10px 30px;
  }

  .fa-bars {
    position: absolute;
    right: 20px;
    top: 10px;
  }

  .nav-bar .fa {
    display: block;
    color: #f1f1f1;
    margin: 10px 25px;
    font-size: 22px;
    cursor: pointer;
  }

  .nav-links {
    height: 100vh;
    width: 200px;
    background: #111;
    top: 0;
    right: -200px;
    text-align: left;
    z-index: 2;
    transition: 0.5s;
    position: absolute;
  }

  .nav-links ul a {
    display: block;
  }

  .nav-links .btn {
    float: none;
    margin-left: 25px;
    margin-top: 10px;
  }
}
<div class="nav-bar">
  <div class="nav-logo">
    <a href="#">GottaGo</a>
  </div>
  <div class="nav-links" id="nav-menu">
    <i class="fa fa-close" onclick="closeMenu()" id="nav-links">close</i>
    <ul>
      <a href="#">
        <li>Home</li>
      </a>
      <a href="#">
        <li>GoWhere</li>
      </a>
      <a href="#">
        <li>About</li>
      </a>
    </ul>
    <button type="button" class="btn">SIGN UP</button>
  </div>
  <i class="fa fa-bars" onclick="showMenu()" id="nav-links">test</i>
</div>

Upvotes: 1

Related Questions