CODEWITHSUNDEEP
javascriptcssmenudelaystyling
Graham McDonnell
Graham McDonnell

Reputation: 129

Delay in CSS styling of Javascript Drop Down Menu

I have used the Smooth Navigation JavaScript menu on a website and the client is complaining that there is a delay in the styling of the main navigation when navigating around the website.

True enough, there is a delay of maybe 1s when you open a page before the CSS kicks in and styles is correctly. The css is at the top of the page and JS is at the bottom so I've no idea what is causing this delay?

The website is http://jomast.co.uk/

Any help would be greatly appreciated.

Thanks.

Upvotes: 1

Views: 779

Answers (3)

Mark Simpson
Mark Simpson

Reputation: 2384

You don't need and shouldn't be using Javascript for a simple dropdown menu like that.

In any case, add the class "navv" to the menu container and see if that fixes the issue.

Change this:

<div id="nav>

to this:

<div id="nav" class="navv">

Upvotes: 1

pete
pete

Reputation: 25091

When navigating the site, the smooth navigation doesn't kick in right away. Try re-ordering your script tags:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="scripts/js/ddsmoothmenu.js"></script>
<script type="text/javascript">
    ddlevelsmenu.init("ddtopmenubar", "topbar") //ddlevelsmenu.setup("mainmenuid", "topbar|sidebar")
</script>
<script type="text/javascript" src="scripts/js/news.js"></script>
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('.slideshow').cycle({
            fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
        });
    });
</script>

This will also take care of the consistent:

Uncaught ReferenceError: $ is not defined               news.js:1
Uncaught ReferenceError: jQuery is not defined          jquery.cycle.all.latest.js:918
Uncaught ReferenceError: $ is not defined               index.php:149
Uncaught ReferenceError: ddlevelsmenu is not defined    index.php:158

Upvotes: 1

bezmax
bezmax

Reputation: 26152

Basically, the javascript executes after the document was fully loaded and processing that Javascript also takes some time. During that delay you can see the "unstyled" version of the menu showing up as the browser tries to display everything as fast as possible.

Easiest fix would be to style your menu such a way, that it's "unstyled" version would look the same as "styled" one. Then there will be no blinking, and the script will add it's slow-appearing animation when the page is fully loaded.

Upvotes: 0

Related Questions