0

I have made a beginner's attempt at making a vertical navigation menu of which the parents open on hover:

HTML

<ul class="pages-list"> <li class="page_item">Grand Parent 1 <ul class="first-children"> <li class="page_item">Parent 1</li> <li class="page_item">Parent 2 (hover me) <ul class="children"> <li class="page_item">Child 1</li> <li class="page_item">Child 2 <ul class="children"> <li class="page_item">Grandchild 1</li> <li class="page_item">Grandchild 2</li> <li class="page_item">Grandchild 3</li> </ul> </li> <li class="page_item">Child 3</li> </ul> </li> <li class="page_item">Parent 3 (hover me) <ul class="children"> <li class="page_item">Child 1</li> <li class="page_item">Child 2</li> <li class="page_item">Child 3</li> </ul> </li> <li class="page_item">Parent 4</li> </ul> </li> </ul>

CSS

.first-children > .page_item > .children.open { height:auto; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: height 1s ease; -ms-transition: height 1s ease; transition: all 1s ease; } .first-children > .page_item > .children { height: 0; overflow:hidden; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: height 1s ease; -ms-transition: height 1s ease; transition: all 1s ease; }

(tried the transition on both all and height)

jQuery

$(document).ready(function(){ $(".first-children > .page_item").hover(function(){ $(this).find("> .children").toggleClass("open"); }); });

Result http://jsfiddle.net/senlin/DVUZ5/

Now what I would like to have is to use a CSS transition when the children receive the class open

Is that even possible with height:0 and height: auto?

If not how do I need to alter the code so the transition effect becomes possible? I tried it on both "all" and "height", but that doesn't do anything.

Improve this question

1 Answer 1

Reset to default
1

Unfortunately you can not transition height between 0 and auto, but you can transition the max-height-property between 0 and some fixed value.

I have updated your fiddle to show an example: http://jsfiddle.net/ydXs9/2/

This solution is obviously not ideal, but if your menu items are roughly equal in height you can get nice results in this way.

If your sub-menus vary greatly in height, you are probably better off using jQuery.animate.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

thanks @tobi I will try it with max-height. I had a look at the animate function, but I don't think I can figure that out in my context.