Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    Sep 2010
    Posts
    460
    Thanks
    214
    Thanked 1 Time in 1 Post

    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');
    		};

  • #2
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    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;
      }
    );
    Last edited by DanInMa; 09-19-2011 at 07:56 PM.

  • Users who have thanked DanInMa for this post:

    Jenny Dithe (09-20-2011)

  • #3
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,801
    Thanks
    8
    Thanked 131 Times in 129 Posts
    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
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • Users who have thanked harbingerOTV for this post:

    Jenny Dithe (09-20-2011)

  • #4
    Regular Coder
    Join Date
    Sep 2010
    Posts
    460
    Thanks
    214
    Thanked 1 Time in 1 Post
    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.

  • #5
    Regular Coder
    Join Date
    Sep 2010
    Posts
    460
    Thanks
    214
    Thanked 1 Time in 1 Post
    Thank you. That worked. I think it was just taking a while for the new style sheet to be read.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •