Jump to content
Junitar

Responsive drop down menu using jQuery

Recommended Posts

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 by Junitar
  • Like 1

Share this post


Link to post
Share on other sites

The max-height it still set to 0, changing the line-height doesn't automatically change the max-height also.

  • Like 1

Share this post


Link to post
Share on other sites

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.

  • Like 1

Share this post


Link to post
Share on other sites

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.

  • Like 1

Share this post


Link to post
Share on other sites

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!

  • Like 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...