Question
After I messed around with creating a slideDown submenu for my navigation bar, I was able to finally finish the effect that I wanted. but when I plugged in the finished code to my main code (since I originally tested/created it with only one tab on codepen) and the submenu slides down over top of the main li underneath the one clicked to show the submenu. I also noticed that if I clicked on a different li (on the main nav) it wouldn't hide the menu.
Here's my codepen to the entire side navbar: http://codepen.io/PorototypeX/pen/swvtc
And some people in a different question I asked to post the code here too, so sorry if it's a bit lengthy for your tastes.
HTML:
https://stackoverflow.com/questions/21491671
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian <div class="backing">
<ul class="navbar" id="topnav">
<li class="active">
<a>HOME</a>
<!-- Below this is the code for the submenu. For now I just put in example names for testing. eventually I will have a submenu for each li after I get this working on the first li -->
<ul class="menu-home">
<li><a href="#"><span>Home</span></a></li>
<li><a href="#"><span>About</span></a></li>
<li><a href="#"><span>Info</span></a></li>
</ul>
</li>
<li>
<a>OUR CHAPTER</a>
</li>
<li>
<a>ABOUT US</a>
</li>
<li>
<a>DESIGN BRIEF</a>
</li>
<li>
<a>MEMBERS</a>
</li>
<li>
<a>EVENTS</a>
</li>
<li>
<a>COMPETITIONS</a>
</li>
<li>
<a>CONTACT INFO</a>
</li>
<li>
<a>JOIN US</a>
</li>
</ul>
<!-- --------------------------------------------------------------------------------------- -->
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
CSS:
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
}
.backing {
transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
}
.navbar {
padding: 0;
margin: 0;
width: 100%;
display: inline;
list-style-type: none;
position: relative;
top: 86.62px;
text-align: center;
}
.navbar > li {
background: #3F4A4F;
height: 50px;
border-top: 1px solid #8A8A94;
border-bottom: 1px solid black;
}
.navbar a {
color: #EDEDED;
font-family: 'Open Sans', sans-serif;
font-size: 140%;
width: 100%;
height: 100%;
line-height: 50px;
display: block;
outline: 0;
letter-spacing: 1px;
cursor: pointer;
transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
border-left: 5px solid transparent;
}
li.active a {
color: #EC6E00;
border-left: 5px solid #EC6E00;
background-color: #323C40;
outline: 0;
}
.navbar > li:not(.active):hover a {
color: #FAFAFA;
border-left: 5px solid #FAFAFA;
background-color: #323C40;
}
/*The background/container for the entire navigation section. I would like to possibly see if the height of this can also expand to the given height of the submenu when they drop down. but thats obviously not the main issue currently*/
div.backing {
background-color: #687C85;
margin: 0;
padding: 0;
height: 576.62px;
width: 262.5px;
display: block;
position: absolute;
box-shadow: 4px 4px 20px black;
}
ul[class^="menu"] {
list-style-type: none;
padding: 0;
}
ul[class^="menu"] a {
color: white;
background-color: #51595C;
position: relative;
text-decoration: none;
line-height: 35px;
font-size: 110%;
display: block;
border-left: 5px solid #0055BA;
z-index: 1;
}
ul[class^="menu"] a:before {
content: "";
background-color: #0055BA;
position: absolute;
left: 0px;
height: 35px;
width: 0px;
transition: all 0.3s ease 0s;
-webkit-transition: all 0.3s ease 0s;
z-index: -1;
}
ul[class^="menu"] a:hover:before {
width: 100%;
}
ul[class^="menu"] a:hover span {
color: white;
transition-delay: 0.09s;
z-index: 1;
}
ul[class^="menu"] span {
z-index: 3;
}
ul[class^="menu"] {
display: none;
}
JQuery:
$(document).ready(function(){
//Code so that when a link is clicked from the main nav it will slide down/slide up the submenu
$("#topnav a").click(function(){
$(this).next().slideUp();
if(!$(this).next().is(":visible"))
{
$(this).next().slideDown();
}
});
//This is so that when you click on other li in the #topnav menu, it will switch it to the "active" class which will slide down the submenu (since it was clicked on) and slide up if clicked again
$("ul.navbar > li").click(function () { $(this).siblings().removeClass('active');
$(this).addClass('active');
});
});
Solution
Taking out the fixed height: 50px on .navbar > li solves the issue, or changing it to min-height.
It was confusing for me because it visually looked like the submenu was position: absolute - but it's really related to the z-indexing. The content of the li is contained so it overflows, but the z-indexing causes it to appear above the other list items.
OTHER TIPS
You can use one function to do the event of slideUp/slideDown and also change the current active li:
$("#topnav a").click(function(){
var el = $(this).parent();
if(el.parent().hasClass('navbar')){
$(this).next().slideDown();
var active = el.siblings('.active');
active.children('ul:first').slideUp();
active.removeClass('active');
el.addClass('active');
}
});
You can se a working example here.
Thanks a lot to @BotskoNet for helping me with the li height issue and @Dudu for the issue regarding the submenu not closing with other li . After fiddling around with @dudu 's code I was able to get the issue of the active class to also slideUp and slideDown the submenu.
Here's what I came with:
$("#topnav a").click(function(){
var el = $(this).parent();
if(el.hasClass('active') && $(this).next().is(':visible')){
var active = el.siblings('.active');
$(this).next().slideUp();
}
else if(el.hasClass('active') && !$(this).next().is(':visible')){
var active = el.siblings('.active');
$(this).next().slideDown();
}
else if(!el.hasClass('active')){
$(this).next().slideDown();
var active = el.siblings('.active');
active.children('ul:first').slideUp();
active.removeClass('active');
el.addClass('active');
}
});
And the live demo if you want to see it hands on (only first tab): http://codepen.io/PorototypeX/pen/swvtc
