...

View Full Version : Do all DHTML menus relate to Div tags?



SpiritualStorms
07-07-2004, 01:29 PM
I was reading some book, trying to learn this programming language, and as i was trying to see the whole forest as well as the individual trees, it seemed to me like a navigational menu system is built primarily on the foundation of div tags. Is this how they are all done?

For example, a portion of the code looks as follow:



<div id = "bar" >
<a href="#" onmouseover="reveal(1)";> Menu One </a> |
<a href="#" onmouseover="reveal(2)";> Menu Two </a> |
<a href="#" onmouseover="reveal(3)";> Menu Three </a> |
</div>


The above sets a bar with 3 links. When you go over the links, the event-handler triggers a function called reveal(), which seems to activate the appearance of a menu.

Here's how the menu portion is created:



<div id="menu_1" class="menu" style="left:0px">

<a href="target1.html"> Item 1 </a> </br>

<a href="target2.html"> Item 2 </a> </br>

<a href="target3.html"> Item 3 </a> </br>


</div>


Is the above a typical example of how most navigational menu systems are done?

Spudhead
07-07-2004, 05:23 PM
It's certainly common, although I really don't think you could describe any menu system as "typical", there are just so many. More and more seem to be done using list elements and CSS.

SpiritualStorms
07-08-2004, 12:27 AM
Ok, so how do you see the difference between the word common, and typical?

I have never actually done, much less understood, how to do a menu of that kind, but it would stand to reason though there would be a common pattern to most of them.

As for the CSS, well the above script uses CSS. If you look at the div tags, there is a class reference.

SlySecretSpy
07-08-2004, 01:42 AM
Depends on your definition of the word "word" and "and".

I think what he is trying to say is that their is no "way to create a menu". YOu simply have to take the elements available and mash them together until the desired result is created.

I could make a menu with out UL,LI,DIV,A,SPAN,IMG or any of the other major tags. Heck, you could make a menu out of just <em></em> if you really wanted to.

SlySecretSpy
07-08-2004, 05:47 PM
<em style="display:block;background-color:#FFFFCC;width:100px;text-align:center;font-weight:bold;border:1px solid #000000">EMenu
<em style="display:block;font-weight:normal;font-style:normal" onClick="window.location = '#home'" onMouseOut="javascript:this.style.backgroundColor = '#FFFFCC'" onMouseOver="javascript:this.style.backgroundColor = '#FFFFFF'">Home</em>
<em style="display:block;font-weight:normal;font-style:normal" onClick="window.location = '#about'" onMouseOut="javascript:this.style.backgroundColor = '#FFFFCC'" onMouseOver="javascript:this.style.backgroundColor = '#FFFFFF'">About</em>
</em>

Blink Menu


<blink style="display:block;background-color:#FFFFCC;width:100px;text-align:center;font-weight:bold;border:1px solid #000000;text-decoration:none">ME-bliNk-U
<blink style="display:block;font-weight:normal;font-style:normal;text-decoration:none" onClick="window.location = '#home'" onMouseOut="javascript:this.style.backgroundColor = '#FFFFCC'" onMouseOver="javascript:this.style.backgroundColor = '#FFFFFF'">Home</blink>
<blink style="display:block;font-weight:normal;font-style:normal;text-decoration:none" onClick="window.location = '#about'" onMouseOut="javascript:this.style.backgroundColor = '#FFFFCC'" onMouseOver="javascript:this.style.backgroundColor = '#FFFFFF'">About</blink>
</blink>

Roy Sinclair
07-09-2004, 10:10 PM
Here's a newly published DHTML menu that uses Lists: http://www.alistapart.com/articles/horizdropdowns/

SpiritualStorms
07-10-2004, 09:41 AM
I checked out the link you gave. It was interesting.

I guess, it isnt so much the DIV themselves that allows for a Menu of a sort, but rather, any tag capable of an ID, and CSS definitions, correct? Or is it any plain tag that can incorporate CSS definitions, as well, as an ID?

But regardless, of which tag, or element, you do end up using, i guess the main things are the ID property, so that you may direct your code to affect the desired target specifically, and all, the CSS properties that relate to positioning, and visiability.

I liked the code they gave:


startList = function() {

if (document.all && document.getElementById) {

navRoot = document.getElementById("nav");

for ( i = 0 ; i < navRoot.childNodes.length; i ++) {

node = navRoot.childNodes[ i ];

if (node.nodeName == " LI ") {

node.onmouseover = function() {

this.className += " over " ;
}

node.onmouseout = function() {
this.className = this.className.replace(" over", "");
}
}
}
}
}
window.onload = startList ;

The first line is a bit curious: is there a function, or property by the name of function(), or did the author simply chose to name his function function()?

I will assume that the terms in blue in the above script mean variables?

Are the terms in purple like properties, or arrays of some kind?

Garadon
07-10-2004, 12:20 PM
startlist=function() {<--notice that lat { mean that it first ends when you reach a } that is not taken up by a preceeding {.

what he does is he assign a function to the varriable startlist so when startlist is used it either runs the function "startlist();" or assign it on "variableName=startlist;"

And ids in menues is not really necesary only real requirement for a menu to work is that you make an understandable nesting system.

for instance:
<ul><-menu object
<li><-menu item</li>
<li><ul><-nested menu object
<li></li>
</ul>
</li>
</ul>


the only real important thing to remember is that the elements used to make the menu is a bit hard to use to anything else in that menu.

</ul>

SpiritualStorms
07-12-2004, 10:05 PM
....this:


startlist=function() {<--notice that lat { mean that it first ends when you reach a } that is not taken up by a preceeding {.


And i dont really understand why the function was called function, when i thought that the word itself was one of those reserved words.


what he does is he assign a function to the varriable startlist so when startlist is used it either runs the function "startlist();" or assign it on "variableName=startlist;"


But the function is not called startlist, its called function(), and it is assigned to a variable by the name of startlist.

And you lost me on this last comment:


the only real important thing to remember is that the elements used to make the menu is a bit hard to use to anything else in that menu.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum