Dropdown Menus

Greetings WPMU Community,

I'm not sure if this question is beyond the realm of support, but I wanted to throw it out there to see if I could get any feedback.

I'm currently working on a client site and have run into a little hiccup with the dropdown menu working correctly.

The client wants the drop down to push the content below it down when it expands. I changed the CSS from "position:absolute" to "position:relative" assuming it would work, but instead it causes the menu to freak out a little bit.

Wondering if anyone could take a look at it for me to see if they can figure out my problem? I currently have it set to "position:relative" so you can see what I am talking about it.

impact.creativ3group.com

Cheers.

  • Kimberly

    Hi there!

    doing some looking around...wow that's a crazy behavior you've got :slight_smile:

    I added a padding-bottom: 90px; to your #nav{

    just to move the slider out of the way, to see if that's causing a problem and see that the issue still persists. It seems the issue is with your menu bar.

    I've tried every variable I can think of, and I'm stumped!

    I'll see if I can't get anyone who is a bit more experienced in css to help out here :slight_smile:

    Best,

    Kimberly

  • 3SixtyEvolve

    Hi Creativ3group

    Kimberley asked us to have a look into the css, but it seems you got sorted, well done!

    I did notice that the sub-menu for 'Get Started' is slightly larger than the others due to the length of 'My Annuity Resources', thus making it loose the small white space between the main menu and the slider. Other than that it it working perfectly now :slight_smile:

    All the best with your project. You're really getting there!

    Gina

  • Tyler Orr

    Hey Gina,

    I actually reverted it back to the original "position:absolute" because I was demoing it last night to the client.

    They are still wanting it to push down the bottom content. Such as if you go to impact.creativ3group.com/about-us/ - the menu currently partially covers the page title a little bit when it comes down.

    If you use Firebug and change the position to 'relative' it still causes the menu to freak out.

    If you wouldn't mind taking another quick look at it I would greatly appreciate it!

    Thanks so much for the help!

  • Paul

    @creativ3group, I don't think this is possible using just CSS. The reason your are seeing the nav flip out when you change from absolute to relative is due to the structure of the main nav and secondary nav elements. As you might be aware the nav is a nested unordered list. In the code you have the first top item 'About Us'. Then its subnav items. Followed by the next top item 'Solutions'. Then its subnav items, etc.

    When you change the 'position' value to 'relative' the hover action will reveal those subnav items in their relative position to the parent. In order words the subnav elements will display just to the right of the parent instead of below then in a normal drop down.

    So your solution will not be via a simple CSS change. The simplest solution I can see is changing the height of the #nav div when the hover occurs. This height change will push the #content-wrapper div down.

    For the solution below you need to put your CSS back to its original position: absolute setting.

    So looking at your code I see the JavaScript for the nav hovers close to line 343 in the output HTML source. Not sure where this will live in your theme. Surely you can locate it.

    In the JS you have two functions set for mouseenter and mouseleave Above these functions I'm capturing some global variables. One is the original height of the #nav div. The second is a hardcoded height of the subnav element. This is hardcoded because they are current not visible so height returns 1. You can set this to the value you need.

    I've pasted the changes below and added some notes. Might be easier to grab the code from a Dropbox file https://dl.dropbox.com/u/2616987/WPMUDev/nav_hover.txt

    Add this to the top of the JS just inside the ready()

    var nav_org_height = jQuery('#nav').height();
    var nav_sub_height = 34;

    Inside each the mouseenter and mouseleave functions I added a line to change the height of the #nav. On the mouseenter we want to add include the height of the subnav. On mouseleave we set the height of #nav back to the original.

    jQuery("#nav ul li").mouseenter(function() {
    jQuery(this).find("ul:first").filter(':not(:animated)').slideDown(300);

    // Set height of #nav to include height of subnav section
    jQuery('#nav').height(nav_org_height+nav_sub_height);
    });

    jQuery(this).mouseleave(function() {
    jQuery(this).find("ul:first").slideUp(200);

    // Set the height of #nav to original
    jQuery('#nav').height(nav_org_height);
    });

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.