CODEWITHSUNDEEP
jqueryhtml
user0129e021939232
user0129e021939232

Reputation: 6355

jquery toggle between nav

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

Answers (2)

Ankit Agrawal
Ankit Agrawal

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

Milan and Friends
Milan and Friends

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

Related Questions