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 4 of 4
  1. #1
    New Coder
    Join Date
    Sep 2011
    Posts
    20
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Probably a simple fix...

    Hello,
    Below is my Javascript, CSS and HTML code for the navigation menu on http://033691f.netsolhost.com/stnew/ -- a test site for my company. Note: I did not write the Javascript code nor do I know how to write javascript. I take no credit.

    When the page first opens, the navigation shows fully expanded for a second, then collapses all. I would like to cut out the expanded view if possible and have the page load with the menu fully collapsed. Is there any way that would work?

    Thank you in advance for any input!

    Code:
    function initMenus() {
    	$('ul.menu ul').hide();
    	$.each($('ul.menu'), function(){
    		var cookie = $.cookie(this.id);
    		if(cookie === null || String(cookie).length < 1) {
    			$('#' + this.id + '.expandfirst ul:first').show();
    		}
    		else {			
    			$('#' + this.id + ' .' + cookie).next().show();
    		}
    	});
    	$('ul.menu li a').click(
    		function() {
    
    			var checkElement = $(this).next();
    			var parent = this.parentNode.parentNode.id;
    
    			if($('#' + parent).hasClass('noaccordion')) {
    				if((String(parent).length > 0) && (String(this.className).length > 0)) {
    					if($(this).next().is(':visible')) {
    						$.cookie(parent, null);
    					}
    					else {
    						$.cookie(parent, this.className);
    					}
    					$(this).next().slideToggle('normal');
    				}				
    			}
    			if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
    				if($('#' + parent).hasClass('collapsible')) {
    					$('#' + parent + ' ul:visible').slideUp('normal');
    				}
    				return false;
    			}
    			if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
    				$('#' + parent + ' ul:visible').slideUp('normal');
    				if((String(parent).length > 0) && (String(this.className).length > 0)) {
    					$.cookie(parent, this.className);
    				}
    				checkElement.slideDown('normal');
    				return false;
    			}
    		}
    	);
    }
    $(document).ready(function() {initMenus();});
    Code:
    			<ul id="menu1" class="menu" style="margin-top:20px;">
    			<li><a class="m0" href="index.php" style="background-color:#222; color:#fff;">HOME</a></li>
    			<li><a class="m1" href="">WHO WE ARE ...</a>
    				<ul><li><a href="">Company Overview</a></li>
    					<li><a href="">Clientele</a></li>
    					<li><a href="">Multimedia</a></li>
    					<li><a href="">Careers</a></li>
    					<li><a href="">Contact Us</a></li>
    				</ul>
    			</li>
    			<li><a class="m1" href="">WHAT WE DO ...</a>
    				<ul><li><a href="">Promotional Products</a></li>
    					<li><a href="">Screen Printing</a></li>
    					<li><a href="">Embroidery</a></li>
    					<li><a href="">Signage</a></li>
    					<li><a href="">Web Design</a></li>
    				</ul>
    			</li>
    			<li><a class="m3" href="">FIND PRODUCTS ...</a>
    				<ul><li><a href="">Web Search</a></li>
    					<li><a href="">Online Catalogs</a></li>
    				</ul>
    			</li>
    			<li><a class="m4" href="">SUPPORT TOPICS ...</a>
    				<ul><li><a href="">General Information</a></li>
    					<li><a href="">Available Brands</a></li>
    					<li><a href="">Artwork Submissions</a></li>
    					<li><a href="">Color & Substrate Charts</a></li>
    					<li><a href="">Dartman Game</a></li>
    				</ul>
    			</li>
    			<li><a class="m5" href="http://www.screentek.net/blog">READ OUR BLOG</a></li>
    			</ul>
    Code:
    ul.menu { border-bottom:1px solid #ccc; }
    
    ul.menu, ul.menu ul {
      list-style-type:none;
      margin: 0;
      padding: 0;
      width: 240px;
    }
    
    ul.menu a {
      display: block;
      text-decoration: none;	
    }
    
    ul.menu li {
      margin-top: 0px;
      border-top:1px solid #ccc;
      font-size:10pt;
      font-family: Segoe-B;
    }
    
    ul.menu li a {
      background: #fff;
      color: #333;	
      padding: 3px 20px;
    }
    
    ul.menu li a:hover {
      background: #2b76b7;
      color:#fff;
    }
    
    ul.menu li ul li a {
      background: #fff;
      color: #2b76b7;
      padding-left: 35px;
      font-size:10pt;
      font-family: Segoe-R;
    }
    
    ul.menu li ul li a:hover {
      background: #eee;
      border-left: 5px #000 solid;
      padding-left: 25px;
      color:#333;
    }
    
    .code { border: 1px solid #ccc; list-style-type: decimal-leading-zero; padding: 5px; margin: 0; }
    .code code { display: block; padding: 3px; margin-bottom: 0; }
    .code li { background: #ddd; border: 1px solid #ccc; margin: 0 0 2px 2.2em; }
    .indent1 { padding-left: 1em; }
    .indent2 { padding-left: 2em; }
    .indent3 { padding-left: 3em; }
    .indent4 { padding-left: 4em; }
    .indent5 { padding-left: 5em; }

  • #2
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Quote Originally Posted by pruocco View Post
    Note: I did not write the Javascript code nor do I know how to write javascript. I take no credit.
    If so you should first learn JavaScript. Or hire a professional.

    Note: that syntax is, probably, JQuery syntax. That could make (or not, if you learn how to use JQuery, as well) things more complicated for you.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #3
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,396
    Thanks
    12
    Thanked 569 Times in 562 Posts
    The answer to your question has nothing to do with neither Javascript nor jQuery. If you want to hide something right from the beginning you should rely on CSS. Add this
    Code:
    ul.menu ul {display: none;}

  • Users who have thanked devnull69 for this post:

    pruocco (12-08-2011)

  • #4
    New Coder
    Join Date
    Sep 2011
    Posts
    20
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Worked perfectly. I assumed it would have been somewhere in the JS.. thats what I get for assuming.

    Thank you for helping and not telling me to "learn javascript" like it's a simple task that can be done in a couple hours.


  •  

    Posting Permissions

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