...

View Full Version : Probably a simple fix...



pruocco
12-08-2011, 03:39 PM
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!



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



<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>





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

Kor
12-08-2011, 04:16 PM
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.

devnull69
12-08-2011, 04:46 PM
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


ul.menu ul {display: none;}

pruocco
12-08-2011, 06:13 PM
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. :thumbsup:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum