CodingForums.com - JQuery display none menu loading first as block

CodingForums.com (http://www.codingforums.com/index.php)

- JavaScript frameworks (http://www.codingforums.com/forumdisplay.php?f=62)

- - JQuery display none menu loading first as block (http://www.codingforums.com/showthread.php?t=238536)

JQuery display none menu loading first as block

Hi,

I have a menu and if you hover over the headings it shows an inline sub menu. The problem I have is that the page loads and for a second shows the full menu with all the subs before hiding the subs and just showing the top navigation headings.

I have tried
.css ('visibility', 'hidden')
$.('.ul').css('visibility', 'hidden')
$('.topnav > li > ul').hide();

I have added and removed visibility:hidden; from the style sheet relating to this ul.

I am completely out of ideas but it looks really messy having everything showing for that second.

Here is my code:

Code:

        $('.topnav > li > ul').css('display', 'none');



        $('.topnav > li').bind('mouseover', openSubMenu);

        $('.topnav > li').bind('mouseout', closeSubMenu);

                

                function openSubMenu(){

                        $(this).find('ul').css('display', 'block');

                };



                function closeSubMenu(){

                        $(this).find('ul').css('display', 'none');

                };

1. you can just use plain old CSS to take care of it

2. you dont need those functions

css:

Code:

.topnav li ul{

display:none;

}

Code:



$(".topnav > li").hover(

  function () {

   $(this).find('ul').toggle;

  }, 

  function () {

    $(this).find('ul').toggle;

  }

);

or maybe,

Code:

$(".topnav > li").hover(

  function () {

   $(this).find('ul').slideToggle;

  }, 

  function () {

    $(this).find('ul').slideToggle;

  }

);

The reason is because the HTML is being written before the JS changes the style. You need to use your style sheet to hide the elements.

edit: yeah, what he said ;)

This is how my style sheet looks:

Code:

.topnav{

        margin:0;

        padding:0;

        }

.topnav li {

        list-style:none;

        float:left;

        font-size:100%;

        width:11.1%;

        }



.topnav li a:link, .topnav li a:visited {

        display:block;

        background-color:#800000;

        text-decoration:none; 

        color:white; 

        }

.topnav li a:hover {

        background-color:#7B68EE; 

        text-decoration:bold;

        }

.topnav li ul {

        visibility:hidden;

        position:absolute;

        z-index:20;

        margin:0;

        padding:0;

        }

.topnav li ul li {

        visibility:hidden;

        display:inline;

        float:none;

        }



.topnav li ul li a:link, .topnav li ul li a:visited{

        visibilty:hidden;

        background-color:#800000;

        text-decoration: none;

        color: white;

        width:auto;

        opacity:0.6;

        filter:alpha(opacity=60);

        }

.topnav li ul li a:hover{

        visibility:hidden;

        background-color:#7B68EE; 

        opacity:0.6;

        filter:alpha(opacity=60);

        text-decoration:bold;

        }

I went for visibility:hidden so that it didn't clash with the display:inline for ul li - I don't know if that is causing the problem, but it is still showing the full menu and sub menu.

Thank you. That worked. I think it was just taking a while for the new style sheet to be read.