2 Replies - 276 Views - Last Post: 10 February 2013 - 01:25 PM

#1 Mad_Griffith  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 10-February 13

Adding Menu height to submenu height

Posted 10 February 2013 - 09:29 AM

Hello, here I am attempting at making the topmenu extend its own height as the submenus reveal. Can you please explain to me why it is not working?


$('#topmenu a').hover(function() {
        $('#topmenu').stop(true, true).animate({
         'height': $("#topmenu").css('height') + $(".sub-menu").css('height')
     }, 'fast');
    });
 
 $('#topmenu').mouseout(function() {
        $('#topmenu').animate({
         'height': $("#topmenu").css('height')
     }, 'fast');
    });


Is This A Good Question/Topic? 0
  • +

Replies To: Adding Menu height to submenu height

#2 andrewsw  Icon User is offline

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3517
  • View blog
  • Posts: 12,008
  • Joined: 12-December 12

Re: Adding Menu height to submenu height

Posted 10 February 2013 - 11:19 AM

Using css-height includes the 'px' text at the end, so

'height': $("#topmenu").css('height') + $(".sub-menu").css('height')

will result in, for example: '400px' + '200px' = '400px200px'.

Use the height() method which is just the numerical value:

'height': ($("#topmenu").height() + $(".sub-menu").eq(0).height()) + 'px'

When you mouseout you are setting the height to what it currently is:

'height': $("#topmenu").css('height')

You might set it to a pre-determined value:

'height': '200px'

However, you should not really use hover and mouseout to change the height of the element that is hovered, and moused-out. For example, reducing the height on hover might trigger mouseout, which increases the height, etc., causing flicker. (I know you are increasing the height on hover, but the same principle applies.)

You should use hover to change the height of a child (or other) element, and there can be two parts to jQuery hover, so you don't need to create a separate mouseout event.
Was This Post Helpful? 0
  • +
  • -

#3 Mad_Griffith  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 10-February 13

Re: Adding Menu height to submenu height

Posted 10 February 2013 - 01:25 PM

Thank you. I am trying to put in practice what you said and have edited the function like this:

$('#topmenu a').hover(function() { $('#topmenu ul').animate({ 'height': ($('#topmenu').height() + $(".sub-menu").height()) + 'px' }, 'fast'); $('#topmenu').animate({ 'height': '67px' }, 'fast'); });

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1