expanding menu - how to hide submenus

[pgv19]

Hi everyone,

I am new to javascript so I need help from the experts. I am using the code for an expanding menu that I got from here:

http://javascript.internet.com/navig...ding-menu.html

It works perfect. However, i would like the submenus to be hidden on default. I was wondering how i can do that. Right now, everytime I open the page, everything is shown.

Please help.

Thank you so much.

 

[BabyJeffy]

I suggest you get in touch with the author of the script you have downloaded. That's going to be your best bet. Alternatively, let us know a specific problem you are experiencing with your code - and help us by letting us know what you have already tried etc.

Cheers,
Jeff

[tt]Jeff's Blog [!]@[/!] CodeRambler

http://www.coderambler.com/

http://www.coedit.co.uk/

[/tt]

Make sure your web page and css validates properly against the doctype you have chosen - before you attempt to debug a problem!

FAQ216-6094

 

[pgv19]

the site directs me to this forum in case there are questions... here's the code, btw.


<!-- Paste this code into the CSS section of your HTML document -->

ul#menu {
width: 100px;
list-style-type: none;
border-top: solid 1px #b9a894;
margin: 0;
padding: 0;
}

ul#menu ol {
display: none;
text-align: right;
list-style-type: none;
margin: 0;
padding: 5px;
}

ul#menu li,
ul#menu a {
font-family: verdana, sans-serif;
font-size: 11px;
color: #785a3c;
}

ul#menu li {
border-bottom: solid 1px #b9a894;
line-height: 15px;
}

ul#menu ol li {
border-bottom: none;
}

ul#menu ol li:before {
content: "- ";
}

ul#menu a {
text-decoration: none;
outline: none;
}

ul#menu a:hover {
color: #539dbc;
}

ul#menu a.active {
color: #be5028;
}



<!-- Paste this code into an external JavaScript file named: expandingMenu.js -->

/* This script and many more are available free online at
The JavaScript Source ::

http://javascript.internet.com

Created by: Travis Beckham ::

http://www.squidfingers.com

|

http://www.podlob.com

version date: 06/02/03 :: If want to use this code, feel free to do so,
but please leave this message intact. (Travis Beckham) */

// Node Functions

if(!window.Node){
var Node = {ELEMENT_NODE : 1, TEXT_NODE : 3};
}

function checkNode(node, filter){
return (filter == null || node.nodeType == Node[filter] || node.nodeName.toUpperCase() == filter.toUpperCase());
}

function getChildren(node, filter){
var result = new Array();
var children = node.childNodes;
for(var i = 0; i < children.length; i++){
if(checkNode(children, filter)) result[result.length] = children;
}
return result;
}

function getChildrenByElement(node){
return getChildren(node, "ELEMENT_NODE");
}

function getFirstChild(node, filter){
var child;
var children = node.childNodes;
for(var i = 0; i < children.length; i++){
child = children;
if(checkNode(child, filter)) return child;
}
return null;
}

function getFirstChildByText(node){
return getFirstChild(node, "TEXT_NODE");
}

function getNextSibling(node, filter){
for(var sibling = node.nextSibling; sibling != null; sibling = sibling.nextSibling){
if(checkNode(sibling, filter)) return sibling;
}
return null;
}
function getNextSiblingByElement(node){
return getNextSibling(node, "ELEMENT_NODE");
}

// Menu Functions & Properties

var activeMenu = null;

function showMenu() {
if(activeMenu){
activeMenu.className = "";
getNextSiblingByElement(activeMenu).style.display = "none";
}
if(this == activeMenu){
activeMenu = null;
} else {
this.className = "active";
getNextSiblingByElement(this).style.display = "block";
activeMenu = this;
}
return false;
}

function initMenu(){
var menus, menu, text, a, i;
menus = getChildrenByElement(document.getElementById("menu"));
for(i = 0; i < menus.length; i++){
menu = menus;
text = getFirstChildByText(menu);
a = document.createElement("a");
menu.replaceChild(a, text);
a.appendChild(text);
a.href = "#";
a.onclick = showMenu;
a.onfocus = function(){this.blur()};
}
}

if(document.createElement) window.onload = initMenu;



<!-- Paste this code into the HEAD section of your HTML document.
You may need to change the path of the file. -->

<script type="text/javascript" src="expandingMenu.js"></script>



<!-- Paste this code into the BODY section of your HTML document -->

<ul id="menu">
<li>Menu Item 1
<ol>
<li><a href="#">Sub Item 1.1</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
</ol>
</li>
<li>Menu Item 2
<ol>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Sub Item 2.2</a></li>
<li><a href="#">Sub Item 2.3</a></li>
</ol>
</li>
<li>Menu Item 3
<ol>
<li><a href="#">Sub Item 3.1</a></li>
<li><a href="#">Sub Item 3.2</a></li>
<li><a href="#">Sub Item 3.3</a></li>
</ol>
</li>
<li>Menu Item 4
<ol>
<li><a href="#">Sub Item 4.1</a></li>
<li><a href="#">Sub Item 4.2</a></li>
<li><a href="#">Sub Item 4.3</a></li>
</ol>
</li>
<li>Menu Item 5
<ol>
<li><a href="#">Sub Item 5.1</a></li>
<li><a href="#">Sub Item 5.2</a></li>
<li><a href="#">Sub Item 5.3</a></li>
</ol>
</li>
</ul>
<p><div align="center">
<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
by <a href="

http://javascriptsource.com">The

JavaScript Source</a></font>
</div><p>

 

[BabyJeffy]

...the site directs me to this forum in case there are questions

Could you be a little more precise, please? Are you saying that the site (

http://javascript.internet.com)

suggests you seek help here in this forum (on Tek-tips)? Could you provide a specific link/directions to show this suggestion?

On another note, have you contacted the author of this script (Travis Beckham) using the contact details provided in the script? He's going to the best person to assist with modifying the code.

Cheers,
Jeff

[tt]Jeff's Blog [!]@[/!] CodeRambler

http://www.coderambler.com/

http://www.coedit.co.uk/

[/tt]

Make sure your web page and css validates properly against the doctype you have chosen - before you attempt to debug a problem!

FAQ216-6094

 

[pgv19]

http://javascript.internet.com/feedback.html

 

[pgv19]

oopps.. nm... i was thinking of another forum...

and yes, ive tried to contact the author, no reply...

 

[pgv19]

I tried copying/pasting several times. Tried notepad, word and dreamweaver but i swear it would not work - even tried on the desktop and laptop. Anyway, after maybe the hundredth time, it just suddenly worked. I keep tracing back, still cant figure out what the mistake was.

Thanks anyway to whoever is reading this right now and was planning to reply.