Geek Answers Handbook

The button does not work to display the mobile menu

I was just starting to learn J-Query , and I am trying to implement a simple click event on my web page, which, when you click the button, opens the mobile nav.

This button works when I select a title, for example, it will hide the title, but will not show mobile navigation?

ps I am copying the DICE homepage for educational purposes only, as I know that I am using copyrighted media;).

I think this could be due to Im hiding mobile navigation in my CSS , so J-Query can not toogle / show it.

 @media screen and (max-width: 1024px) { nav{ justify-content: space-around; } .bars{ display:block; width: 50px; height: 100px; cursor: pointer; } ul{ display: none !important; } .mobile-nav{ display: none; position:absolute; z-index: 3; left:-110px; top:70px; width: 100%; height: 100%; opacity: 0.8; background-color:black; } .mobile-nav li{ height: 50px; } .mobile-nav a{ font-size: 2rem; font-weight: 700; } } 
 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Dice</title> <meta name="description" content=""> <meta name="author" content=""> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css"> <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> <script> $(function(){ $('.bars').on('click',function(){ $('.mobile-nav').show(); }); }); //End of code?// </script> </head> <body> <header> <nav> <img src="dice-logotype-black.png"> <button class="bars"> <ul class="mobile-nav"> <li><a href="#">ABOUT</a></li> <li><a href="#">GAMES</a></li> <li><a href="#">JOBS</a></li> <li><a href="#">NEWS</a></li> <li><a href="#">STORE</a></li> </ul> </button> <ul> <li><a href="#">ABOUT</a></li> <li><a href="#">GAMES</a></li> <li><a href="#">JOBS</a></li> <li><a href="#">NEWS</a></li> <li><a href="#">STORE</a></li> </ul></nav> </header> <div class="global-container"> <div class="video"><video src="dicemovie3-1.mp4" autoplay loop></video> <div class="text"><h1>We share the passion to create something extraordinary.</h1> <button>DISCOVER OUR CULTURE</button><button id="button-2">READ ABOUT OUR GAMES</button> </div> </div> </div> <div class="square-images"> <div class="square-1"></div> <div class="square-2"></div> <div class="square-3"></div> </div> <div class="about-dice-wrapper"><div><h2>MORE THAN COMPUTER SCREENS</h2> <p>DICE is the award-winning developer of the Battlefield franchise and games like Mirror's Edge. We are situated in the world's most picturesque cities, Stockholm, Sweden and in the vibrant city of Los Angeles, USA.</p> <button>About Dice</button></div></div> <div class="tweet-wrapper"><div> <img src="tweet.jpg-thumb"> <p>Meet DICE today! Head to Stockholm Nationalmuseum at 18:00 & learn about character design: https://t.co/WGUbkFNjay https://t.co/0SrHr38HiH<br> @EA_DICE</p> </div> </div> </body> </html>

Hope someone can give me some idea about this issue.

+6
source share
2 answers

The simplest (in my opinion) solution for animated mobile navigation:

 $(document).ready(function(){ $('nav').hide(); $('.show_nav').click(function(){ $('nav').slideToggle('slow'); }); }); 
  .show_nav { padding: 1em 1.4em; background: #ddd; } nav { background: #111; } nav ul { list-style: none; padding: 0; margin: 0; } nav ul li { color: #fff; padding: 1em 1.4em; } 
  <!doctype html> <html class="no-js" lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>test</title> <link rel="stylesheet" href="css/style.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> </head> <body> <button class="show_nav">show nav</button> <nav> <ul> <li>Hello world!</li> <li>Hello world!</li> <li>Hello world!</li> <li>Hello world!</li> <li>Hello world!</li> <li>Hello world!</li> <li>Hello world!</li> </ul> </nav> </body> </html>

Obviously the style you need;)

+1
source

Try the following:

 $(".bars").click(function() { $(".mobile-nav").show(); }); 
 .mobile-nav { display: none; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button class="bars">Click me</button> <ul class="mobile-nav"> <li><a href="#">ABOUT</a></li> <li><a href="#">GAMES</a></li> <li><a href="#">JOBS</a></li> <li><a href="#">NEWS</a></li> <li><a href="#">STORE</a></li> </ul>

Although using toggleClass will be more useful.

  $(".bars").click(function(event) { $(".mobile-nav").toggleClass('opened'); }); 
 .mobile-nav { display: none; } .opened { display: block; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button class="bars">Click to toggle</button> <ul class="mobile-nav"> <li>Blabla</li> <li>Blabla</li> <li>Blabla</li> </ul>
0
source

More articles:


All Articles