Junitar Posted September 29, 2016 Share Posted September 29, 2016 (edited) Hi all, I'd like to make a responsive navigation bar with a drop down menu using jQuery but I'm having some difficulties getting it work properly. I've just started learning jQuery so my knowledges in this language are very limited for the moment. I know there is a tutorial precisely for that on w3school but I followed this tutorial on YouTube as the result is closer to what I would like to end up with. Besides, the code looks easier to me. What I'm trying to do is basically the same thing but without using an external <div> for the menu bar, which I would like to include in the list elements. To do so, I hid all the list elements using a max-height to 0 except for the "menu" one, then I toggleClassed all the list elements but the "menu" one so they get the new declaration max-height= 3em. Unfortunately, the menu doesn't drop down when clicking on the "menu" bar. Any help? Thanks. Here is the .html <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="responsiveMenu2.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <title>Test</title> </head> <body> <header> <h2>responsive navigation (mobile first)</h2> <nav> <ul> <li class="menu" id="menu"><a href="#">menu</a></li> <li class=""><a href="#">home</a></li> <li class=""><a href="#">galleries</a></li> <li class=""><a href="#">news</a></li> <li class=""><a href="#">about</a></li> <li class=""><a href="#">contact</a></li> </ul> </nav> </header> <section> <article> Sed maximum est in amicitia parem esse inferiori. Saepe enim excellentiae quaedam sunt, qualis erat Scipionis in nostro, ut ita dicam, grege. Numquam se ille Philo, numquam Rupilio, numquam Mummio anteposuit, numquam inferioris ordinis amicis, Q. vero Maximum fratrem, egregium virum omnino, sibi nequaquam parem, quod is anteibat aetate, tamquam superiorem colebat suosque omnes per se posse esse ampliores volebat. Inter haec Orfitus praefecti potestate regebat urbem aeternam ultra modum delatae dignitatis sese efferens insolenter, vir quidem prudens et forensium negotiorum oppido gnarus, sed splendore liberalium doctrinarum minus quam nobilem decuerat institutus, quo administrante seditiones sunt concitatae graves ob inopiam vini: huius avidis usibus vulgus intentum ad motus asperos excitatur et crebros. Apud has gentes, quarum exordiens initium ab Assyriis ad Nili cataractas porrigitur et confinia Blemmyarum, omnes pari sorte sunt bellatores seminudi coloratis sagulis pube tenus amicti, equorum adiumento pernicium graciliumque camelorum per diversa se raptantes, in tranquillis vel turbidis rebus: nec eorum quisquam aliquando stivam adprehendit vel arborem colit aut arva subigendo quaeritat victum, sed errant semper per spatia longe lateque distenta sine lare sine sedibus fixis aut legibus: nec idem perferunt diutius caelum aut tractus unius soli illis umquam placet. </article> </section> <script> $(".menu").on("click", function(){ $("nav ul li").not(".menu").toggleClass("showing"); }); </script> </body> </html> And the .css *{ box-sizing: border-box; } html{ width: 100%; min-height: 100%; } body{ height: 100%; margin: 0; padding: 0; text-align: center; } header{ background-color: #00795f; width: 100%; padding: 40px 0 0 0; color: white; text-transform: capitalize; } nav{ margin-top: 40px; width: 100%; background-color: #43a286; text-transform: capitalize; } nav ul{ list-style-type: none; padding: 0; margin: 0; } nav ul li:not(#menu){ max-height: 0; -webkit-transition: max-height 0.4s; -moz-transition: max-height 0.4s; -ms-transition: max-height 0.4s; -o-transition: max-height 0.4s; transition: max-height 0.4s; } nav ul li a{ display: block; width: 100%; line-height: 3em; text-decoration: none; color: white; } nav ul li a:hover{ background-color: #399077; } section{ line-height: 1.5em; font-size: 0.9em; padding: 0; width: 100%; } article{ text-align: justify; padding: 5% 4%; } #menu{ background-color: #005c48; cursor: pointer; } .showing{ height: 3em; } @media screen and (min-width: 680px){ #menu{ display: none; } nav{ height: 3em; } nav ul li{ display: inline-block; margin: 0 1%; } nav ul li a{ padding: 0 20px; line-height: 3em; } section{ max-width: 900px; margin: 0 auto; } } Edited September 29, 2016 by Junitar 1 Link to comment Share on other sites More sharing options...
justsomeguy Posted September 29, 2016 Share Posted September 29, 2016 The max-height it still set to 0, changing the line-height doesn't automatically change the max-height also. 1 Link to comment Share on other sites More sharing options...
Junitar Posted September 29, 2016 Author Share Posted September 29, 2016 Thank you for the quick reply. I previously set 'showing' max-height to 20em like in the tutorial. But it didn't work. So I tried with the line-height. Forgot to remove it. Anyway, I've just tried again with this line .showing{ max-height: 20em; } and I still have the same issue. 1 Link to comment Share on other sites More sharing options...
justsomeguy Posted September 29, 2016 Share Posted September 29, 2016 That might be overridden by the other rule, because the other rule has a more specific selector. You might want to use a selector like this in the CSS: nav ul li:not(#menu) .showing That will make it more specific and should override the other rule. If that doesn't work I would go to your browser's developer tools and inspect the elements that you're working with, you'll be able to see which CSS rules apply to them and where they're coming from. 1 Link to comment Share on other sites More sharing options...
Junitar Posted September 30, 2016 Author Share Posted September 30, 2016 The 'showing' selector is indeed overridden by the other rule. I've not managed to fix the problem by using a more specific selector but now that I know where the problem comes from, it will be easier for me to figure it out. Thanks again! 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now