jQuery的汉堡菜单

Question

I just started using jQuery, and tried to make a hamburger menu. Is it possible to only have the menu as a little square in the top right corner, and a logo in the top left?

Right now the black bar from the menu is filled out like a nav bar.

 $(".cross").hide(); $(".menu").hide(); $(".hamburger").click(function() { $(".menu").slideToggle("slow", function() { $(".hamburger").hide(); $(".cross").show(); }); }); $(".cross").click(function() { $(".menu").slideToggle("slow", function() { $(".cross").hide(); $(".hamburger").show(); }); }); 

 body { font-family: 'Noto Sans', sans-serif; margin: 0; width: 100%; height: 100vh; } header { width: 100%; background: #1d1f20; height: 60px; line-height: 60px; } .hamburger { background: none; position: absolute; top: 0; right: 0; line-height: 45px; padding: 5px 15px 0px 15px; color: #fff; border: 0; font-size: 1.4em; font-weight: bold; cursor: pointer; outline: none; z-index: 10000000000000; } .cross { background: none; position: absolute; top: 0px; right: 0; padding: 13px 15px 0px 15px; color: #fff; border: 0; font-size: 3em; line-height: 65px; font-weight: bold; cursor: pointer; outline: none; z-index: 10000000000000; } .menu { z-index: 1000000; font-weight: bold; font-size: 0.8em; width: 100%; background: #131313; position: absolute; text-align: center; } .menu ul { margin: 0; padding: 0; list-style-type: none; list-style-image: none; } .menu li { display: block; padding: 15px 0 15px 0; border-bottom: #1d1f20 1px solid; } .menu li:hover { display: block; background: #181818; padding: 15px 0 15px 0; border-bottom: #1d1f20 1px solid; } .menu ul li a { text-decoration: none; margin: 0px; color: #fff; } .menu ul li a:hover { color: #fff; text-decoration: none; } .menu a { text-decoration: none; color: white; } .menu a:hover { text-decoration: none; color: white; } .glyphicon-home { color: white; font-size: 1.5em; margin-top: 5px; margin: 0 auto; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <header> <button class="hamburger">&#9776;</button> <button class="cross">&#735;</button> </header> <div class="menu"> <ul> <a href="#"> <li>Forside</li> </a> <li class="dropdown"> <a href="#" class="dropbtn">Møbler</a> <div class="dropdown-content"> <a href="http://facebook.com">Stole</a> <a href="#">Border</a> <a href="#">Sofaer</a> </div> </li> <a href="#"> <li>Blog</li> </a> <a href="#"> <li>Leverandøre</li> </a> <a href="#"> <li>Om Os</li> </a> </ul> </div> 

Answer 1

Try this one. Use Jquery.

 $(".hamburger").click(function() { $(this).hide(); $('.cross').show(); $(".menu").slideToggle(); }); $(".cross").click(function() { $(this).hide(); $('.hamburger').show(); $(".menu").slideToggle(); }); 

 body{ font-family: 'Noto Sans', sans-serif; margin:0; width:100%; height:100vh; } header{ width:100%; background:#1d1f20; height:60px; line-height:60px; } .hamburger{ background:none; position:absolute; top:0; right:0; line-height:45px; padding:5px 15px 0px 15px; color:#fff; border:0; font-size:1.4em; font-weight:bold; cursor:pointer; outline:none; z-index:10000000000000; } .cross{ background:none; position:absolute; top:0px; right:0; padding:13px 15px 0px 15px; color:#fff; border:0; font-size:3em; line-height:65px; font-weight:bold; cursor:pointer; outline:none; z-index:10000000000000; display:none; } .menu{z-index:1000000; font-weight:bold; font-size:0.8em; width:100%; background:#131313; position:absolute; text-align:center;display:none;} .menu ul {margin: 0; padding: 0; list-style-type: none; list-style-image: none;} .menu li {display: block; padding:15px 0 15px 0; border-bottom:#1d1f20 1px solid;} .menu li:hover{display: block; background:#181818; padding:15px 0 15px 0; border-bottom:#1d1f20 1px solid;} .menu ul li a { text-decoration:none; margin: 0px; color:#fff;} .menu ul li a:hover { color: #fff; text-decoration:none;} .menu a{text-decoration:none; color:white;} .menu a:hover{text-decoration:none; color:white;} .glyphicon-home{ color:white; font-size:1.5em; margin-top:5px; margin:0 auto; } .active{ display:block; transition:all ease 0.3s; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <header> <button class="hamburger">&#9776;</button> <button class="cross">&#735;</button> </header> <div class="menu"> <ul> <a href="#"><li>Forside</li></a> <li class="dropdown"> <a href="#" class="dropbtn">Møbler</a> <div class="dropdown-content"> <a href="http://facebook.com">Stole</a> <a href="#">Border</a> <a href="#">Sofaer</a> </div> </li> <a href="#"><li>Blog</li></a> <a href="#"><li>Leverandøre</li></a> <a href="#"><li>Om Os</li></a> </ul> </div> <script> </script> </body> 

Answer 2

Your code should look smth like this. Also you should add some if/else

You can read more about it here: http://www.w3schools.com/js/js_if_else.asp

just try this code in your local project!

 body{ font-family: 'Noto Sans', sans-serif; margin:0; width:100%; height:100vh; } header{ width:100%; background:#1d1f20; height:60px; line-height:60px; } .hamburger{ background:none; position:absolute; top:0; right:0; line-height:45px; padding:5px 15px 0px 15px; color:#fff; border:0; font-size:1.4em; font-weight:bold; cursor:pointer; outline:none; z-index:10000000000000; } .cross{ background:none; position:absolute; top:0px; right:0; padding:13px 15px 0px 15px; color:#fff; border:0; font-size:3em; line-height:65px; display:none font-weight:bold; cursor:pointer; outline:none; z-index:10000000000000; } .menu{z-index:1000000; font-weight:bold; font-size:0.8em; width:100%; background:#131313; position:absolute; text-align:center;} .menu ul {margin: 0; padding: 0; list-style-type: none; list-style-image: none;} .menu li {display: block; padding:15px 0 15px 0; border-bottom:#1d1f20 1px solid;} .menu li:hover{display: block; background:#181818; padding:15px 0 15px 0; border-bottom:#1d1f20 1px solid;} .menu ul li a { text-decoration:none; margin: 0px; color:#fff;} .menu ul li a:hover { color: #fff; text-decoration:none;} .menu a{text-decoration:none; color:white;} .menu a:hover{text-decoration:none; color:white;} .glyphicon-home{ color:white; font-size:1.5em; margin-top:5px; margin:0 auto; } .menu { height: 0px; overflow: hidden; transition-duration .3s; } .OpenMenu .menu { height: auto; } .OpenMenu .cross { display: block; } .OpenMenu .hamburger { display: none; } 

 <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> </head> <body> <header> <button class="hamburger">&#9776;</button> <button class="cross">&#735;</button> <div class="menu"> <ul> <a href="#"><li>Forside</li></a> <li class="dropdown"> <a href="#" class="dropbtn">Møbler</a> <div class="dropdown-content"> <a href="http://facebook.com">Stole</a> <a href="#">Border</a> <a href="#">Sofaer</a> </div> </li> <a href="#"><li>Blog</li></a> <a href="#"><li>Leverandøre</li></a> <a href="#"><li>Om Os</li></a> </ul> </div> </header> <script> $(".hamburger").click(function() { $("header").addClass("OpenMenu"); }); $(".cross").click(function() { $("header").removeClass("OpenMenu); }); </script> </body>