CODEWITHSUNDEEP
jquerydrop-down-menu
supernoob
supernoob

Reputation: 367

jquery dropdown stays open till complete page load

I have markup like this:

<ul class="dropdown">
<li><a href="/home">Home</a></li>
<li><a href="/about">About Us</a></li>
<li><a href="#">Courses</a>
<ul>
    <li><a href='whatever'>A Level</a></li>
    <li><a href='whatever'>Arts</a></li>
    <li><a href='whatever'>Commerce</a></li>
    <li><a href='whatever'>I.B.</a></li>
    <li><a href='whatever'>Science</a></li>
    </ul>

</li>
<li><a href="/college/collegeFinder">Find A College</a></li>
<li><a href="/college">College Reviews</a></li>
<li><a href="/contact">Contact Us</a></li>

</ul>
</nav>

and the jquery:

$(document).ready(function(){
mainmenu();
$('#slider1').bxSlider({
    autoHover: true,
    auto: true,
    pause: 7000,
    prevImage: 'images/upleft.png',
    nextImage: 'images/upright.png'
});

function mainmenu(){
    $(" .dropdown ul ").css({display: "none"}); // Opera Fix
    $(" .dropdown li").hover(function(){
    $(this).find('ul:first').css({visibility: "visible",display: "none"}).slideDown(200);
        },function(){
        $(this).find('ul:first').slideUp(200);
    });
}
});

edit: (ignore the bxslider part)

Im not very good with jquery and just picked this script off from some tutorial. Basically, while the page is loading, the dropdown is open, up until the rest of the page loads. It's only for a second or 2 but its really annoying. It can be seen here: passout.co.in Any ideas ?

Upvotes: 0

Views: 1283

Answers (3)

Pacuraru Daniel
Pacuraru Daniel

Reputation: 1205

You can make it to be hidden by default with CSS:

ul.dropdown li 
{
    display: none;
}

Upvotes: 1

codef0rmer
codef0rmer

Reputation: 10530

Its called FOUC (Flash Of Unstyled Content) and It can be avoided by hiding the stuff which you want to show or applying the styling or event bubbling using jquery. So write some css class which can hide the dropdown on page load.

Upvotes: 0

jdalangin
jdalangin

Reputation: 197

Add CSS rules for ul.dropdown to display:none or opacity:0, which ever is better suited. That way, on page load, it remains hidden until your jQuery is activated.

Cheers!

Upvotes: 0

Related Questions