Reputation: 6355
Hi I'm trying to make a jQuery navigation which is collapsible. I've got some code which hides the children class on the page load. I can collapse the navigation but after I collapse the first one none of the others seem to collapse, also when they do they collapse the parent class seems to drop by a couple of pixels!
If any one good very jQuery could help that would be amazing!
My code is below or click to view my jsFiddle
index.html
<div class="headernav">
<ul id="header_nav">
<li class="header_parent">Reports
<ul class="header_child">
<li class="h_child">Download CSV</li>
<li class="h_child">URLS CSV</li>
<li class="h_child">Partners CSV</li>
<li class="h_child">Google Analytics CSV</li>
</ul>
</li>
<li class="header_parent">Manage
<ul class="header_child">
<li class="h_child">Domain</li>
<li class="h_child">Account</li>
<li class="h_child">Design</li>
</ul>
</li>
<li class="header_parent">Subscriptions
<ul class="header_child">
<li class="h_child">A</li>
<li class="h_child">B</li>
<li class="h_child">C</li>
</ul>
</li>
<li class="header_parent">Media Store
<ul class="header_child">
<li class="h_child">Image Store</li>
<li class="h_child">Document Store</li>
<li class="h_child">Media Store</li>
</ul>
</li>
</ul>
</div>
js/js.js
$('.header_child').hide();
$('.header_parent').on('click', function() {
$(this).find('ul').stop(true, false).slideToggle();
}).on('mouseout', function() {
$('.header_child').find('li').stop(true, false).slideUp();
});
css/style.css
.headernav {
color:#FFF;
width:auto;
height:150px;
background-color:#000;
}
.headernav ul {
float:left;
list-style:-inline;
}
.header_parent {
padding-left:20px;
display:inline-block;
}
.h_child {
display:block;
}
Upvotes: 1
Views: 97
Reputation: 6124
Try this code some css change also did
<script>
$(document).ready(function(){
$('.header_child').hide();
$('.header_parent').hover(
function(){
$(this).find('ul').stop(true, false).slideDown('slow');
},
function(){
$(this).find('ul').stop(true, false).slideUp('slow');
}
)
});
</script>
<style>
.headernav {
color:#FFF;
width:auto;
height:150px;
background-color:#000;
}
.headernav ul {
float:left;
list-style:-inline;
}
.header_parent {
padding-left:20px;
display:inline-block;
position:relative;
}
.header_parent .header_child{
width:200px;
position:absolute;
padding:0px 0px 0px 20px;
left:0px;
margin:0px;
}
.h_child {
display:block;
}
</style>
<div class="headernav">
<ul id="header_nav">
<li class="header_parent">Reports
<ul class="header_child" >
<li class="h_child">Download CSV</li>
<li class="h_child">URLS CSV</li>
<li class="h_child">Partners CSV</li>
<li class="h_child">Google Analytics CSV</li>
</ul>
</li>
<li class="header_parent">Manage
<ul class="header_child">
<li class="h_child">Domain</li>
<li class="h_child">Account</li>
<li class="h_child">Design</li>
</ul>
</li>
<li class="header_parent">Subscriptions
<ul class="header_child">
<li class="h_child">A</li>
<li class="h_child">B</li>
<li class="h_child">C</li>
</ul>
</li>
<li class="header_parent">Media Store
<ul class="header_child">
<li class="h_child">Image Store</li>
<li class="h_child">Document Store</li>
<li class="h_child">Media Store</li>
</ul>
</li>
</ul>
</div>
Upvotes: 1
Reputation: 5610
I'm trying something on Fiddle
$('.header_parent').click(function() {
$(this).find('.header_child').stop().slideDown('slow');
}).mouseleave(function() {
$(this).find('.header_child').stop().slideUp('slow');
});
Upvotes: 1