0

So, here's the thing, I followed this guide to make a drop down menu http://matthewjamestaylor.com/blog/centered-dropdown-menus

The main difference is that I gave an specific ID to each menu entry:

<li class="yellow" id="adm">
                <a href="#"><p class="maintext">Administration</p></a>
                <a href="0001.jsp"><p class="subtext">Info 1</p></a>
                <a href="0002.jsp"><p class="subtext">Info 2</p></a>
                <a href="0003.jsp"><p class="subtext">Info 3</p></a>
</li>
<li class="yellow" id="com">
                <a href="#"><p class="maintext">Comunication</p></a>
                <a href="0001.jsp"><p class="subtext">Info 1</p></a>
                <a href="0002.jsp"><p class="subtext">Info 2</p></a>
                <a href="0003.jsp"><p class="subtext">Info 3</p></a>
                <a href="0004.jsp"><p class="subtext">Info 4</p></a>
                <a href="0005.jsp"><p class="subtext">Info 5</p></a>  
</li>

That way I can set different parameters for the drop down animation height:

$("#adm").mouseover(function(){
    $(this).stop().animate({height:'90px'},{queue:false, duration:600, easing: 'easeOutBounce'})
});

$("#com").mouseover(function(){    
    $(this).stop().animate({height:'150px'},{queue:false, duration:600, easing: 'easeOutBounce'})
});

Here's the problem, different users will have different views of the this particular menu, meaning that the number of items on the <li> element will vary a little. It seems that I could count the number of entries ( jQuery: Count number of list elements? )

So my solution was to var admHeight = $("#adm li").length * 30 and then use said variable to set the height.

The actual page is a mix of JS and Java -since it's necessary to check what the user should see on the front page. But I think that as long as the JS scipt ran after the page was loaded, I shouldn't have any problems.

Is this a bad solution? Is this a valid solution? Am I missing some more obvious way of doing this?

Should I do this?

Community
  • 1
  • 1
Johnny Bigoode
  • 578
  • 10
  • 31
  • 1
    http://api.jquery.com/slideDown/ may be a good alternative to `animate` in this situation. That way, you won't have to calculate the height. – Rick Hitchcock Sep 23 '14 at 13:42

1 Answers1

1

I think that this: http://api.jquery.com/slidedown/ can achieve what you want to do.

$(".sub-menu").hide();
$( ".has-sub" ).hover(function() {
  $( this ).children(".sub-menu").slideToggle( "fast" );
});

http://jsfiddle.net/munucggq/7/

Berthy
  • 358
  • 2
  • 8