...

View Full Version : javascript menu



gogo1
02-10-2007, 10:12 PM
Hi all Really hoping you can help

I have a webiste which consits of two frames, left (with a menu in it) and right (main contect frame). Its the menu in the left frame i am having difficulty with.

I created a javascript menu which expands vertically when a item is selected to show the sub menu items. When i select a menu item the menu expands and shows sub menu items , i can get these sub menu items to load up, when clicked, in the right frame and leave the menu in its current state (expanded) but cannot make it so that when a main menu item is selected, a link opens in the right frame and the menu expands in the left so basically if i selected , in this example eggs the main pages for eggs would open in the right frame and the menu in the left would expand to show all the egg submenu items so thats eggs can be looked into further if they dont get the info they need from the first page.

this is the left frame code


<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link href="test.css" rel="stylesheet" type="text/css" />

<script>



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, b, i;
menus = getChildrenByElement(document.getElementById("menu"));
for(i = 0; i < menus.length; i++){
menu = menus[i];
text = getFirstChildByText(menu);
b = document.createElement("b");


menu.replaceChild(b, text);
b.appendChild(text);
b.href = "transport";
b.onclick = showMenu;
b.onfocus = function(){this.blur()};
}
}

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

</script>
</head>

<body>
<div class ="contentmenu">
<ul id="menu">

<li>Home</li>
<li>Eggs
<ol>
<li><a href="#"> egg1</a></li>
<li><a href="#"> egg2</a></li>
<li><a href="#"> egg3 </a></li>
<li><a href="#"> egg4 </a></li>
</ol>
</li>

<li> ham
<ol>
<li>ham1</li>
<li>ham2</li>
<li>ham3></li>
<li>ham4</li>
<li>ham5</li>
</ol>


<li>Links
<ol>
<li><a href="#">Sub Item </a></li>
<li><a href="#">Sub Item </a></li>
<li><a href="#">Sub Item </a></li>
</ol>
</li>

</ul>
</div>


</body>
</html>

and this is the style sheet behind it all


ul#menu {
width: 130px;
list-style-type: none;
border-top: 1px solid #b9a894;
margin: 0px;
padding: 0px;
font-size:14px;
background-image:url(images/menuitem.jpg);

}

ul#menu ol {
display: none;
list-style-type: none;
margin: 0;
padding: 0px;
font-family: verdana, sans-serif;
font-size: 14px;
color: #FFFFFF;
background-color:#000066;

}


ul#menu li,
ul#menu a {
font-family: verdana, sans-serif;
font-size: 12px;
color: #E4E4E4;
}

ul#menu li {

border-bottom: dotted 1px #FFFFFF;
line-height: 13px;
margin-bottom: 10px;
margin-top:10px;

}

ul#menu ol li {
margin-bottom: 0px;
margin-top:5px;

}


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

ul#menu a:hover {
color: #0066CC;
}

ul#menu a.active {

font-weight: 900;
color:#FFFFFF;
}

Really hopeing someone can help ive tried everything i can think of but the menu will not expand and open in the right frame

Any help at all is greatfully accepted

Thank you

gogo

gogo1
02-12-2007, 12:27 PM
Can anyone please help with this, ive tried so many resouces but had no luck

shyam
02-12-2007, 08:06 PM
whats ur problem? u want the main menu item to expand as well as load a page in the content frame?

MikeFoster
02-12-2007, 08:06 PM
Hi gogo1,

For your menu html structure I suggest you use something like I used in this demo: xTreeMenu (http://cross-browser.com/x/menus/xtreemenu.html), which is similar to what you are using but has main menu items like this:


<li><a href='aUrl'>top level item (a "label")</a></li>

Now your script can access the href when the item is clicked. It can load that href into the right frame and then expand the menu. Additionally, the menu is now closer to working when Js is disabled.

Btw... Welcome to Coding Forums :)

gogo1
02-13-2007, 02:38 PM
Hello

Thank you very much for your response and the welcome to coding forums :)

I tried what you sugested but still no luck, the link opens in the right frame but menu does not expand and the rest of the menu below seems to be disabled. I may be doing it wrong tho with my experience :)

Any more ideas ?

Thanks again

gogo

gogo1
02-13-2007, 02:45 PM
shyam

yeah thats exactly what im after :)

gogo

MikeFoster
02-13-2007, 03:07 PM
Show us your code.

gogo1
02-13-2007, 03:18 PM
hello :)

i put it in my first post, i havent got the site uploaded yet.

gogo

MikeFoster
02-13-2007, 09:51 PM
Try this:


// (mf) I made no changes to code above this line.

// Menu Functions & Properties

var activeA = null;

function showMenu() {
var ol, li;
if(activeA){
li = activeA.parentNode;
if (li) li.className = "";
ol = getNextSibling(activeA, 'ol');
if (ol) ol.style.display = "none";
}
if(this == activeA){
activeA = null;
} else {
activeA = this;
li = activeA.parentNode;
if (li) li.className = "active";
ol = getNextSibling(this, 'ol');
if (ol) ol.style.display = "block";
}
}

function initMenu(){
var menus, menu, a, i;
menus = getChildrenByElement(document.getElementById("menu"));
for(i = 0; i < menus.length; i++){
menu = menus[i];
a = getFirstChild(menu, 'a');
if (a) a.onclick = showMenu;
}
a = document.getElementById("menu").getElementsByTagName('a');
for (i = 0; i < a.length; ++i) {
a[i].target = 'rightFrame'; // (mf) Assumes name of right frame !!!
}
}

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

</script>
</head>

<body>

<!-- (mf) I made several changes to the menu html.
The main items are now wrapped in 'A' elements.
You'll need to make the corresponding changes to your CSS. -->

<div class ="contentmenu">
<ul id="menu">
<li><a href='index.html'>Home</a></li>
<li><a href='eggs.html'>Eggs</a>
<ol>
<li><a href=''>egg1</a></li>
<li><a href=''>egg2</a></li>
<li><a href=''>egg3</a></li>
<li><a href=''>egg4</a></li>
</ol>
</li>
<li><a href='ham.html'>Ham</a>
<ol>
<li><a href=''>ham1</a></li>
<li><a href=''>ham2</a></li>
<li><a href=''>ham3</a></li>
<li><a href=''>ham4</a></li>
<li><a href=''>ham5</a></li>
</ol>
</li>
<li><a href='links.html'>Links</a>
<ol>
<li><a href=''>link1</a></li>
<li><a href=''>link2</a></li>
<li><a href=''>link3</a></li>
</ol>
</li>
</ul>
</div>

</body>
</html>


Some things to note:

1. The main items are now wrapped in 'A' elements.

2. activeA now points to the 'A' clicked - not its parent 'LI'.

3. During initialization it sets the 'target' attribute of all 'A' elements contained in 'menu' to the name of the right frame. Change this to the name you are using for your right frame. Actually, this should be hard-coded in the html so the menu will load its links into the right frame even when Js is disabled.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum