Jump to content

Responsive drop down menu using jQuery


Junitar

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
Link to comment
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
Link to comment
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
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...