We help IT Professionals succeed at work.

JK Megamenu alignment issues

Dorisn
Dorisn asked
on
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.
Comment
Watch Question

Commented:
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.

Author

Commented:
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.

Author

Commented:

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.

Commented:
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?

Author

Commented:
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.
Commented:
I think you would need to stop/pause the tabs from rotating when you mouseover/hover. The reason being when you open the megamenu now, it pops up but the tabs continue their rotation. By the time the megamenu is closed you are on to a different tab and not the tab you wanted more information on in the first place.

Here is how you would do the Ajax that we discussed:

1st put your content for each of the tabs in a separate file. For Example: (these can be labeled whatever you want.)
foodservice-tab.html
retail-tab.html
supermarket-tab.html
material-tab.html
fabrication-tab.html

Then change the href to the path of these files:

<ul class="ui-tabs-nav">
   <li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1">
      <a href="/foodsevice-tab.html"><strong>Food Service</strong></a>
   </li>
   <li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-2">
      <a href="/retail-tab.html"><strong>Retail</strong></a>
   </li>
   <li class="ui-tabs-nav-item ui-tabs-selected last" id="nav-fragment-3">
      <a href="/supermarket-tab.html"><strong>Supermarket</strong></a>
   </li>
   <li class="ui-tabs-nav-item ui-tabs-selected last" id="nav-fragment-4">
      <a href="/material-tab.html"><strong>Material Handling</strong></a>
   </li>
   <li class="ui-tabs-nav-item ui-tabs-selected last" id="nav-fragment-5">
      <a href="/fabrication-tab.html"><strong>Custom Fabrication</strong></a>
   </li>
</ul>

This will call the pages via ajax.

Now I've tested this a little bit with your content and for some reason the external files are not going into the #featured div. I'm not sure if this is happening because I'm testing it with the combination of your stuff and my stuff or if it's something else. Checking on that next.

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

jquery-ui.min.js
Commented:
Also remove these divs you have wrapped around the content:
<div id="fragment-1" class="ui-tabs-panel"></div>
<div id="fragment-2" class="ui-tabs-panel ui-tabs-hide"></div>
<div id="fragment-3" class="ui-tabs-panel ui-tabs-hide"></div>
<div id="fragment-4" class="ui-tabs-panel ui-tabs-hide"></div>
<div id="fragment-5" class="ui-tabs-panel ui-tabs-hide"></div>


Author

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

Author

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

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


winholtnew.html
Commented:
Wait there's more. Sorry, accidentally hit submit before attaching these. Here are the external tab files (i.e. foodservice-tab.html)

Here is a working example: http://irocwebs.com/_experts/winholt.html

NOTE: My version is a "Frankenstein" version of what I made for you (winholtnew.html) using your files as a base and some of my local files. The above file (winholtnew.html) should work with your stuff as long as you uploaded the version of jquery-ui.min.js that I attached before.

ALSO on the winholtnew.html  file you can remove this line at the top:
<BASE HREF="http://winholt.grq.net/">
This is just so I could use the files/images on your sever while testing changes on mine.

Let me know if you have any questions.
ajaxtabfiles.zip

Commented:
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!

Author

Commented:
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?

Author

Commented:
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.