asked on

JK Megamenu alignment issues

I am having problems with alignment using JK Megamenu I am guessing its because I am trying to use it along with Carousel.

Here's the website: http://winholt.grq.net/

The megamenu - Food Service Products' alignment is below the button, I would like to have it above the button and centered.

The other Megamenus tho aren't even close to the button aligning top left to the page.

Any help would be appreciated... Thanks.

irocwebs

I'm pretty sure because of how the jquery ui script hides the tab info until it displays & how the megamenu loads it's position when the script loads, what you want to do and the way you are doing it wouldn't work. You could use ajax to load the ui content as external files and put the megamenu into those separate files. That way when it the content loads the megamenu gets the correct position.

Check out:
http://jqueryui.com/demos/tabs/#ajax

Once you get the tabs into ajax I can assist you with the position of the mega menu.

Dorisn

ASKER

This seems pretty complicated. Right now I am faking it with styles/margins since I have a presentation tomorrow. I will take a look at what the ajax solution. Thanks I will probably have to take you up on your offer to help once I get the tabs organized.

Dorisn

ASKER

Help, I am looking at Irocwebs solution and don't know where to begin. Please point me in the right direction to placing the ui tabs into ajax.... Also, right now the tabs, tabs panel and photos auto-rotate which I need to keep. Here's the index: http://winholt.grq.net

Thanks.

irocwebs

I think the first thing we need to address is how you plan to stop the tabs from rotating when the user hovers over the menu. Should we do that first?

Dorisn

ASKER

I think the tabs should stop rotating when the tabs panel button is clicked and the megamenu opens. Then, perhaps after the megamenu closes the rotator can begin again.

BTW/FYI, this was a template I purchased and then I added the megamenu to.

ASKER CERTIFIED SOLUTION

irocwebs

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

irocwebs

Found the problem with the files falling outside the #featured div - updated the jquery-ui script - attached.

jquery-ui.min.js

SOLUTION

irocwebs

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Dorisn

ASKER

Ok, I am missing something... I am not sure exactly what goes where ... basically it looks like a mess right now.

Dorisn

ASKER

Can you attach your foodservice-tab.html so I see how you set it up? Thanks.

irocwebs

After a lot of testing I found a work around that hopefully you'll be happy with:

winholtnew.html

SOLUTION

irocwebs

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

irocwebs

Ok after even more testing... you get this crazy bounce effect when doing the mouseover/mouseout events in jquery. I think the hoverintent plugin (http://cherne.net/brian/resources/jquery.hoverIntent.html) may be needed to resolve this. I don't have anymore time tonight to work on this. See if you can figure it out from what I sent you and let me know what you come up with. Thanks!

Dorisn

ASKER

Thanks for all your help. I was able to get most up except for the megamenu... for some reason that isn't running just lists under the tabs and panel. Interesting thing tho... the list pushed down the three column layout below the tabs but the three column kept bouncing up, similar to the issue you have on your site. Would it be better to use ajax for the mega menu?

Dorisn

ASKER

I played with the z-index on the different panels so that the megamenus played along a little better. There's still a problem with the megamenus sticking and bouncing (rolling up) when you go back and click on it a 2nd time.