tutorial to make DHTML menu? 1

geuis · Jun 14, 2005

I've been looking all over the place for something like this and I cannot find it anywhere.

I want to learn how DHTML menus made with <div> tags work.

I've seen the examples of the Suckerfish Dropdown, but I don't want to use unordered lists. Just DIVs.

What I've learned so far is that some divs need float:left and positioning:absolute or position:relative, and you need a z-index greater than 1, or greater than theo z-index of other elements on your page. I just can't find a simple example that lays it all out. I've tried writing some code to do it but I can't get my div's to overlap correctly.

Can someone point me to a tutorial that shows in plain HTML and CSS how the divs in a dynamic menu are structured?

The code I've written so far is here:

<script language="javascript">

function changeMenu(menu){
//set menu being passed to a variable
var m_enu = menu;

var x = document.getElementsByTagName('div');
for (var i=0;i<x.length;i++)
{
var temp = x.id;
temp2 = temp.substring(0,4);

if (temp2 == 'menu')
x.style.display='none';
}

document.getElementById(m_enu).style.display='block';

}

</script>

<body>



<div style="float:left; position:relative;" class="holdBox">
<div onclick="changeMenu('menu1');" style="width:100%; border-style:solid; border-width:0px; border-bottom-width: 1px">TEMP1</div>
<div onclick="changeMenu('menu2');" style="width:100%; border-style:solid; border-width:0px; border-bottom-width: 1px">TEMP2</div>

</div>

<div style="float:left; position:relative; z-index:2;">

<div id="menu1" style="position:relative; display:none; border-width:1px;border-style:dashed;">Menu2<br/>Menu2<br/>Menu2<br/></div>
<div id="menu2" style="position:relative; margin-top:21px; display:none; border-width:1px;border-style:dashed;">Menu2<br/>Menu2<br/>Menu2<br/></div>

</div>

<div style="clear:both; z-index:1" class="holdBox">
Text
</div>

Vragabond · Jun 15, 2005

Just one question: Why don't you want to use unordered lists? They are used (over divs) because in browsers that don't support stylesheets, unordered lists make much more sense as menu options than simple divs.

dmacster · Jun 15, 2005

I agree with Vragabond about the lists, but you might try:

http://www.projectseven.com/tutorials/navigation/index.htm

ChrisHunt · Jun 16, 2005

I don't want to use unordered lists. Just DIVs.

I can't imagine why you'd want to do this, but if you insist - follow the Suckerfish example and build a working menu with unordered lists. Then use a text editor to replace all <ul>s with <div class="ul"> and all <li>s with <div class="li">. It's a pointless exercise, and one that removes semantic information from your document, but that's your problem.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

tutorial to make DHTML menu? 1

geuis

Programmer

Vragabond

Programmer

dmacster

Technical User

ChrisHunt

Programmer

Similar threads

Part and Inventory Search

Sponsor