PDA

View Full Version : Javascript menu?

princessboddah
04-03-2007, 09:48 AM
Hey! I'm a beginner with javascript. I want to make menus like these: http://www.emenutree.com/ (the green menu on the left) and http://www.puistoklinikka.fi/index.php?selectedId=6&pageName=Fysioterapia

I want it really simple and clean. I just want that when you click a link there opens new links below.

Please help! thanks!
Ges
04-03-2007, 11:15 AM
Hi princessboddah,
The menu/links you talk of are known as folding menus. They are Javascript based. I have posted one recentely so to save repeating myself take a look at this thread where you will find the complete code. I did it over 2 posts.

http://www.lissaexplains.com/forum/showthread.php?t=63507

If you have any problems then please post back.

Regards,
Ges.
princessboddah
04-03-2007, 01:09 PM
Hi princessboddah,
The menu/links you talk of are known as folding menus. They are Javascript based. I have posted one recentely so to save repeating myself take a look at this thread where you will find the complete code. I did it over 2 posts.

http://www.lissaexplains.com/forum/showthread.php?t=63507

If you have any problems then please post back.

Regards,
Ges.

Thanks Ges!

The sublinks go under the next main links though. and this doesn't really work with firefox :(
Ges
04-03-2007, 02:44 PM
Hi princessboddah,
Sorreeeee! That script was for IE only. I'd had some PM's from those guys and did some more work on it specifically for IE. I should post back to that thread with this one for ALL browsers. So here you are :bow: princessboddah, this is a raw menu and I've seperated out the CSS so you can see whats's going on or make adjustments easily.
I'll do it in 2 posts, the HTML start and <head> section followed by the <body> in post 2.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Ges - Any browser fold menu</title>

<style type="text/css">
<!--
ul#menu
{
width: 150px;
list-style-type: none;
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: 14px;
font-weight:bold;
color: #000000;
}
ul#menu li {line-height: 25px;}
ul#menu ol li {border-bottom: none;}
ul#menu a {text-decoration: none;outline: none;}
ul#menu a:hover {color: #1a9ab7;}
ul#menu a.active {color: #ff0033;}
-->
</style>

<script language="JavaScript" type="text/javascript">
<!--

/* main headings are the paernt nodes */
if(!window.Node)
{
var Node = {ELEMENT_NODE : 1, TEXT_NODE : 3};
}
/* filtering will keep silly browsers happy */
function checkNode(node, filter)
{
return (filter == null || node.nodeType == Node[filter] || node.nodeName.toUpperCase() == filter.toUpperCase());
}
/* sub menu items are the child nodes */
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()};
}
}
/* script is loaded at startup so watch your <body onLoad> stuff */
if(document.createElement)
window.onload = initMenu;

//-->
</script>
</head>


<body> section in next post;
Ges
04-03-2007, 02:54 PM
Hi again :bow: princessboddah,
Here is the <body> section;


<body>

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



If you change the font-size: 14px; then you must change the width: 150px; in the CSS section to give the text some elbow room. They are in 2 seperate places. Once you get the hang of the CSS you can merge them to make it more compact. And YES it works in Firefox and Opera but I can't be bothered with any others cos believe me, when you get things working in IE AND Firefox then you generally own the planet!!

Well, I hope this is ok but I'm sure you'll let me know if it is'nt!!!

Regards,
Ges.
princessboddah
04-03-2007, 07:10 PM
Hi again :bow: princessboddah,
Here is the <body> section;


<body>

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



If you change the font-size: 14px; then you must change the width: 150px; in the CSS section to give the text some elbow room. They are in 2 seperate places. Once you get the hang of the CSS you can merge them to make it more compact. And YES it works in Firefox and Opera but I can't be bothered with any others cos believe me, when you get things working in IE AND Firefox then you generally own the planet!!

Well, I hope this is ok but I'm sure you'll let me know if it is'nt!!!

Regards,
Ges.

Thank you for your help! I'll work with the code tomorrow and let you know how it goes. thanks again :)
princessboddah
04-04-2007, 06:03 AM
the menu works pretty well now! Thank you so much!

If you have time you could explain the javascript code a little to me. So i'd learn something.

Thanks again!
Ges
04-04-2007, 11:09 PM
Hi princessboddah,
I don't know how much knowledge of Javascript you have. So I will explain a concept that the script is based upon. This concept is known as Object Orientated Programming ( OOP ), and is the follow on from Object Orientated Design ( OOD ).
These are methods of software design that are in extensive use today.

Briefly, ( and I really do mean briefly - but don't be put off ), in a professional situation such as when a new project is in the initial stages ( for instances - designing the software for a new networking system for a company ), the first thing that happens is an analysis of every aspect of the tasks that need to be done. This is done, firstly, in a non-technical method whereby the different parts of the system are identified and then logged. From there, everyone can see each part of the system clearly. This is the OOA ( object oriented analysys), stage. One part of that OOA is the details of the software. If we focus in on that software we can identify the component parts of it. We can futher break down this software into single tasks. These then are broken down into smaller manageble parts and eventually comprise the components that deal with ( for instance ), every function that comprises a particukar task. Now, within each task, as we know, we have to do the actual coding - and that's where people like us come in!

Now to your question ( with the above in mind );

If you have time you could explain the javascript code a little to me. So i'd learn something.


The code is designed around the concept of parent/child/siblings and is dead simple if you look closley. Ouch you say! Don't worry.

Each first item of the menu is the PARENT and this has some CHILDREN. The CHILDREN are simply the sub-headings. That is why I gave the functions the names that may seem a little bit odd. But now ( after reading the above ), they are not mysterious afterall.
(And to top all that, you could have sub-sub-menus that would be the 'NEPHEWS and NEICES' of the HEADER!)

The other links are the BROTHERS and SISTERS of the that Main HEADER. they too have CHILDREN ( sub-menus ).

So, as to your question again I would suggest that you take a look at;

http://www.w3schools.com/js/default.asp

to get the idea of the functions that I created and come back to me.

I'm sorry if I information overloaded you but please post back with any questions.

Regrards,
Ges.
princessboddah
04-09-2007, 06:28 PM
Hi princessboddah,
I don't know how much knowledge of Javascript you have. So I will explain a concept that the script is based upon. This concept is known as Object Orientated Programming ( OOP ), and is the follow on from Object Orientated Design ( OOD ).
These are methods of software design that are in extensive use today.

Briefly, ( and I really do mean briefly - but don't be put off ), in a professional situation such as when a new project is in the initial stages ( for instances - designing the software for a new networking system for a company ), the first thing that happens is an analysis of every aspect of the tasks that need to be done. This is done, firstly, in a non-technical method whereby the different parts of the system are identified and then logged. From there, everyone can see each part of the system clearly. This is the OOA ( object oriented analysys), stage. One part of that OOA is the details of the software. If we focus in on that software we can identify the component parts of it. We can futher break down this software into single tasks. These then are broken down into smaller manageble parts and eventually comprise the components that deal with ( for instance ), every function that comprises a particukar task. Now, within each task, as we know, we have to do the actual coding - and that's where people like us come in!

Now to your question ( with the above in mind );


The code is designed around the concept of parent/child/siblings and is dead simple if you look closley. Ouch you say! Don't worry.

Each first item of the menu is the PARENT and this has some CHILDREN. The CHILDREN are simply the sub-headings. That is why I gave the functions the names that may seem a little bit odd. But now ( after reading the above ), they are not mysterious afterall.
(And to top all that, you could have sub-sub-menus that would be the 'NEPHEWS and NEICES' of the HEADER!)

The other links are the BROTHERS and SISTERS of the that Main HEADER. they too have CHILDREN ( sub-menus ).

So, as to your question again I would suggest that you take a look at;

http://www.w3schools.com/js/default.asp

to get the idea of the functions that I created and come back to me.

I'm sorry if I information overloaded you but please post back with any questions.

Regrards,
Ges.


Thanks for having the time! <3