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

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();

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>