expanding menu

brunette · #1 (**permalink**) Dec 4th, 2006, 18:42

I have copied the code on the expanding menu from the website http://javascript.internet.com/navi...nding-menu.html . It worked well, however, the menu collapses back up and I then have to reopen it again. What do I have to do in order to keep the menu expanded until I click on another mainlink?

I need the sample menu on the website http://www.sense.org.uk/

Hope to hear from you asap.

Thanks

Aaron1988 · #2 (**permalink**) Dec 7th, 2006, 18:23

Hey mate i have done it what you have to do is this

if you look at my code then your see what i have done in the head tag you should have

<LINK href="menu.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="expandingMenu.js"></script>

so what you do is make a menu.css file by opening your notepad editor

and in that menus.css file you input

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

this and save it then you make the Javascript code which is this

// 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[i], filter)) result[result.length] = children[i];
}
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[i];
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[i];
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;

and you input this in your notepad editor and save as expandingMenu.js

then all you do is add in the <body> tag is

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

and edit the links to what you want and the menus.css if you want different colours and stuff so when you done that it should come out like this

P.S BUT DON'T JUST COPY AND PASTE THIS OTHERWISE YOU WON'T LEARN WHAT ITS ABOUT THATS WHAT I WAS TAUGHT OR LEARNED

<HTML>
<HEAD>
<META HTTP-EQUIV="content-type" CONTENT="text/html; charset=iso-1250">
<LINK href="menu.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="expandingMenu.js"></script>

</HEAD>
<BODY bgcolor="#FFFFFF" align="center">
<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>

</BODY>
</HTML>

Ryan Fait · #3 (**permalink**) Dec 7th, 2006, 21:04

Aaron had the right idea, but didn't explain it, so I will. Using JavaScript for a drop down menu isn't nearly as good as using CSS. Using CSS is an easier and better way of making drop downs.

JacobHaug · #4 (**permalink**) Dec 7th, 2006, 22:56

css would be the a better way to accomplish this, not only that, but it in my opinion is much easier...lol

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
expanding menu	lisafelst12	Flash & Multimedia Forum	9	Apr 28th, 2008 20:16
Css expanding menu ?	Accurax	Web Page Design	10	Aug 27th, 2007 14:41
Another Expanding Menu Problem	mispris006	Web Page Design	0	Feb 8th, 2007 18:57

		Webforumz.com > Main Forums > Program Your Website > JavaScript Forum
expanding menu