C
cilardi
I have a menu that I use on this website (http://sterneco.editme.com)
that I got from The JavaScript Source. It works great in both Mozilla
and IE and I am very happy with it but I have not been able to figure
out how to make it stay open when a new page is loaded. My programming
experience is pretty limited so I am having a hard time deciphering
some of this code and thus am unsure where to even begin. If anyone has
any ideas it would be greatly appreciated.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
ul#menu {
width: 180px;
list-style-type: none;
border-top-style: none;
margin-left: 20px;
margin-right: 0px;
padding: 0px;
}
ul#menu ol {
display: none;
text-align: left;
list-style-type: none;
margin: 0;
padding: 10px;
}
ul#menu li,
ul#menu a {
font-family: verdana, sans-serif;
font-size: 12px;
color: #0000FF;
}
ul#menu li {
border-bottom: solid 1px #ffcc33;
line-height: 20px;
}
ul#menu ol li {
border-bottom: none;
}
ul#menu a {
text-decoration: none;
outline: none;
}
ul#menu a:hover {
color: #539dbc;
}
ul#menu a.active {
color: #be5028;
}
</style>
<script type="text/javascript">
/* 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;
</script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"
/>
<title>Untitled Document</title>
<!-- To add more items to the menu add them here and the menu will
change accordingly.
Follow the format here and you should have no problems.-->
</head>
<body>
<ul id="menu">
<li>
<a href="Home">Home</a>
<ol>
</ol>
</li>
<li>About Us
<ol>
<li><a href="Introduction">Introduction</a></li>
<li><a href="contribute">Editing Guidelines</a></li>
<li><a href="FAQ">FAQ</a></li>
<li><a href="Contact">Contact Us</a></li>
</ol>
</li>
(....some more code here, like above, but this was getting long)
</ul>
</body>
</html>
that I got from The JavaScript Source. It works great in both Mozilla
and IE and I am very happy with it but I have not been able to figure
out how to make it stay open when a new page is loaded. My programming
experience is pretty limited so I am having a hard time deciphering
some of this code and thus am unsure where to even begin. If anyone has
any ideas it would be greatly appreciated.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
ul#menu {
width: 180px;
list-style-type: none;
border-top-style: none;
margin-left: 20px;
margin-right: 0px;
padding: 0px;
}
ul#menu ol {
display: none;
text-align: left;
list-style-type: none;
margin: 0;
padding: 10px;
}
ul#menu li,
ul#menu a {
font-family: verdana, sans-serif;
font-size: 12px;
color: #0000FF;
}
ul#menu li {
border-bottom: solid 1px #ffcc33;
line-height: 20px;
}
ul#menu ol li {
border-bottom: none;
}
ul#menu a {
text-decoration: none;
outline: none;
}
ul#menu a:hover {
color: #539dbc;
}
ul#menu a.active {
color: #be5028;
}
</style>
<script type="text/javascript">
/* 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;
</script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"
/>
<title>Untitled Document</title>
<!-- To add more items to the menu add them here and the menu will
change accordingly.
Follow the format here and you should have no problems.-->
</head>
<body>
<ul id="menu">
<li>
<a href="Home">Home</a>
<ol>
</ol>
</li>
<li>About Us
<ol>
<li><a href="Introduction">Introduction</a></li>
<li><a href="contribute">Editing Guidelines</a></li>
<li><a href="FAQ">FAQ</a></li>
<li><a href="Contact">Contact Us</a></li>
</ol>
</li>
(....some more code here, like above, but this was getting long)
</ul>
</body>
</html>