When I go on page ( display is more than 680px) Display is less then 680px Button click (1st time) Button click (2nd time) And here problem starts, menu is gone when display is 680px HTML file <!DOCTYPE html> <html> <head> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="probniStyle.css"> </head> <body> <div class="header"> <h1>Title</h1> <div class="navigation"> <button class="menuButton" onclick="menuFunction()">Menu</button> <nav id="nav"> <li><a href="#">Hyperlink</a></li> <li><a href="#">Hyperlink</a></li> <li><a href="#">Hyperlink</a></li> <li><a href="#">Hyperlink</a></li> <li><a href="#">Hyperlink</a></li> </nav> </div> </div> <script type="text/javascript"> function menuFunction() { var dis = document.getElementById("nav"); if(dis.style.display == "flex") { dis.style.display = "none"; } else { dis.style.display = "flex"; } } </script> </body> </html> CSS file * { margin: 0px; padding: 0px; } body { font-family: Arial; color: #FFF; } a { text-decoration: none; color: #FFF; } li { list-style: none; } .menuButton { display: none; padding: 6px; font-size: 23px; border: none; } .header { display: flex; flex-direction: column; text-align: center; background-color: #066; } .navigation { display: flex; justify-content: center; } h1 { padding: 4px; } nav { display: flex; } nav a { display: block; padding: 8px; transition: background-color 200ms ease; } nav a:hover { background-color: #076; } @media only screen and (max-width: 680px) { div.header div.navigation { flex-direction: column; } div.header div.navigation nav { display: none; flex-direction: column; } div.header div.navigation nav a { width: 100%; } .menuButton { display: block; cursor: pointer; background-color: #066; color: #FFF; transition: background-color 180ms ease; } .menuButton:hover { background-color: #076; } }
Please use code tag and: <link rel="stylesheet" type="text/css" href="probniStyle.css"> HTML: What's in there?
CSS file -- probniStyle.css -- * { margin: 0px; padding: 0px; } body { font-family: Arial; color: #FFF; } a { text-decoration: none; color: #FFF; } li { list-style: none; } .menuButton { display: none; padding: 6px; font-size: 23px; border: none; } .header { display: flex; flex-direction: column; text-align: center; background-color: #066; } .navigation { display: flex; justify-content: center; } h1 { padding: 4px; } nav { display: flex; } nav a { display: block; padding: 8px; transition: background-color 200ms ease; } nav a:hover { background-color: #076; } @media only screen and (max-width: 680px) { div.header div.navigation { flex-direction: column; } div.header div.navigation nav { display: none; flex-direction: column; } div.header div.navigation nav a { width: 100%; } .menuButton { display: block; cursor: pointer; background-color: #066; color: #FFF; transition: background-color 180ms ease; } .menuButton:hover { background-color: #076; } }
Seriously? "Please use code-tag" - learn how to forum, please? First, why in all that is holy do you use javascript for this function? Making a menu drop down / resize / redisplay is HTML / CSS-work, not javascript. I can't really be arsed looking through this mess, but creating a menu that resizes and triggers a dropdown when you reach a specific breakpoint is simple, and there are several examples in the forums. Look for posts by @deathshadow, for instance.
Hi @upetrovic, The menu toggles the list perfectly for me in firefox at 680px and 360px width. What browser is this messing up in? -- G r e e n h o r n j a m i e
LI can only be children of UL or OL. HTML 5's i(diotic pointless dumbass redundant) NAV tag is NOT a 1:1 replacement for UL. you need to put a UL inside it. You're using HTML 5, you don't need to say type="text/css" when rel="stylesheet" anymore. Same goes for type="text/JavaScript" on <script> tags. (about time you ask me!) If you're going to have CSS for SCREEN targets, you should probably be setting that on the <link> and not on the media queries... since I'm SO sure the rest of your CSS makes so much sense for WAP aware handheld, print, or aural. Though apart from that? It looks like you're flexing stuff that doesn't even NEED flex... and as others have mentioned, this isn't even JavaScripts JOB anymore. http://www.cutcodedown.com/tutorial/mobileMenu NOR is it the job for a BUTTON tag.