CODEWITHSUNDEEP
jquerymenuaccordion
David Wang
David Wang

Reputation: 21

JQuery Accordion Menu Flashes When Loading

I implemented a Jquery menu on a site, but whenever I click on a new page, the menu drops down for a second then goes back to normal. Does anyone know why this is?

Here is the link: http://www.knowledgecity.com/alj/ Click on the first menu item "Act Pragmatically", then click on the first item in that menu. As the new page loads, the menu will move a bit. Try it in IE.

thank you in advance for your help.

David

Upvotes: 2

Views: 1629

Answers (2)

BumbleB2na
BumbleB2na

Reputation: 10743

In your div holding the horizontal "Prida | Business | Computer" menu, you could add a nested div and give it a fixed height with css. It's acting jumpy because after the DOM loads, this menu is just a text list. Styles are then injected in to your code and finally applied to the menu.

Currently you have:

<div id="tabs">
    <ul> ... </ul>
</div>

I would try:

<div id="tabs">
    <div id="tabsContainer" style="height:42px">
        <ul> ... </ul>
    </div>
</div>

Or, stick a div with a fixed height in to one of your <li> elements:

<div id="tabs">
    <ul>
        <li><div style="height:42px"></div>...</li>
        ... 
    </ul>
</div>

Upvotes: 0

Hussein
Hussein

Reputation: 42808

The trick is to hide your accordion content then show when calling accordion. This will prevent the flicking that you see.

example

CSS

#element{
 display:none;
}

jQuery

$('#element').accordion().show();

Upvotes: 2

Related Questions