Closed Thread Icon

Topic awaiting preservation: DHTML Menu Pages that link to <a href="https://ozoneasylum.com/backlink?for=22054" title="Pages that link to Topic awaiting preservation: DHTML Menu" rel="nofollow" >Topic awaiting preservation: DHTML Menu\
 
Author Thread
Del Rosario
Neurotic (0) Inmate
Newly admitted

From:
Insane since: Jun 2004

 posted posted 06-05-2004 03:09

I'm trying to create a the DHTML menu you see across the top of most corporate websites. Sony comes to mind. I've been taking an HTML course at university and I am vaguely familiar with HTML and CSS. While I didn't know how to create the menu I thought I knew the basic points. I wanted to create a horizontal list across the top. When I moved my cursor over the list I wanted it to toggle a layer below visible with a verticle list. I found two tutorials that helped me a lot. The first was Listamatic, a tutorial for lists and CSS, and the second was Cross Browswer dHTML Drop Down Menus.

My first problem was the second tutorial used tables, which I wanted to avoid. I was able to strip the tables in the pop down menu and add the lists. Unfortunately, I couldn't figure out a way to get rid of the tables at the top without hiding the text. I was hoping someone could take a look at my results and explain to me where I can fix my problems.

I don't want anyone to actually do this for me. Just give me some basic direction. The code is below. You can find an online version of my script here. Also, I realize its ugly. Since I was just following tutorials, I didn't bother changing the styles. I figured I'd get things working first and then worry about appearance.

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

<html>
<head>
<title>Title</title>
</head>

<body>
<style>


#navcontainer { width: 200px; }

#navcontainer ul
{
margin-left: 0;
padding-left: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
}

#navcontainer a
{
display: block;
padding: 3px;
width: 160px;
background-color: #036;
border-bottom: 1px solid #eee;
}

#navcontainer a:link, #navlist a:visited
{
color: #EEE;
text-decoration: none;
}

#navcontainer a:hover
{
background-color: #369;
color: #fff;
}

</style>
<script>
<!--
// MENU MOUSE OVER
function menuOver(itemName) {
clearTimeout(timeOn)
menuActive = 1
}// MENU MOUSE OUT
function menuOut(itemName) {
if(document.layers) {
menuActive = 0
timeOn = setTimeout("hideAllMenus()", 400)
}
}
// SET BACKGROUND COLOR
function getImage(name) {
if (document.layers) {
return findImage(name, document);
}
return null;
}

function findImage(name, doc) {
var i, img;
for (i = 0; i < doc.images.length; i++)
if (doc.images[i].name == name)
return doc.images[i];
for (i = 0; i < doc.layers.length; i++)
if ((img = findImage(name, doc.layers[i].document)) != null) {
img.container = doc.layers[i];
return img;
}
return null;
}

function getImagePageLeft(img) {
var x, obj;
if (document.layers) {
if (img.container != null)
return img.container.pageX + img.x;
else
return img.x;
}
return -1;
}

function getImagePageTop(img) {
var y, obj;
if (document.layers) {
if (img.container != null)
return img.container.pageY + img.y;
else
return img.y;
}
return -1;
}

//document.write('<style> .menu{position: absolute;}</style>');
var timeOn = null
numMenus = 4;
document.onmouseover = hideAllMenus;
document.onclick = hideAllMenus;
window.onerror = null;

function getStyleObject(objectId) {
// cross-browser function to get an object's style object given its id
if(document.getElementById && document.getElementById(objectId)) {
// W3C DOM
return document.getElementById(objectId).style;
} else if (document.all && document.all(objectId)) {
// MSIE 4 DOM
return document.all(objectId).style;
} else if (document.layers && document.layers[objectId]) {
// NN 4 DOM.. note: this won't find nested layers
return document.layers[objectId];
} else {
return false;
}
} // getStyleObject

function changeObjectVisibility(objectId, newVisibility) {
// get a reference to the cross-browser style object and make sure the object exists
var styleObject = getStyleObject(objectId);
if(styleObject) {
styleObject.visibility = newVisibility;
return true;
} else {
//we couldn't find the object, so we can't change its visibility
return false;
}
} // changeObjectVisibility


function showMenu(menuNumber, eventObj, labelID) {
hideAllMenus();
if(document.layers) {
img = getImage("img" + menuNumber);
x = getImagePageLeft(img);
y = getImagePageTop(img);
menuTop = y + 10; // LAYER TOP POSITION
eval('document.layers["menu'+menuNumber+'"].top="'+menuTop+'"');
eval('document.layers["menu'+menuNumber+'"].left="'+x+'"');
}
eventObj.cancelBubble = true;
var menuId = 'menu' + menuNumber;
if(changeObjectVisibility(menuId, 'visible')) {
return true;
} else {
return false;
}
}

function hideAllMenus() {
for(counter = 1; counter <= numMenus; counter++) {
changeObjectVisibility('menu' + counter, 'hidden');
}
}

function moveObject(objectId, newXCoordinate, newYCoordinate) {
// get a reference to the cross-browser style object and make sure the object exists
var styleObject = getStyleObject(objectId);
if(styleObject) {
styleObject.left = newXCoordinate;
styleObject.top = newYCoordinate;
return true;
} else {
// we couldn't find the object, so we can't very well move it
return false;
}
} // moveObject



// ***********************
// hacks and workarounds *
// ***********************

// initialize hacks whenever the page loads
window.onload = initializeHacks;

// setup an event handler to hide popups for generic clicks on the document
function initializeHacks() {
// this ugly little hack resizes a blank div to make sure you can click
// anywhere in the window for Mac MSIE 5
if ((navigator.appVersion.indexOf('MSIE 5') != -1)
&& (navigator.platform.indexOf('Mac') != -1)
&& getStyleObject('blankDiv')) {
window.onresize = explorerMacResizeFix;
}
resizeBlankDiv();
// this next function creates a placeholder object for older browsers
createFakeEventObj();
}



function createFakeEventObj() {
// create a fake event object for older browsers to avoid errors in function call
// when we need to pass the event object to functions
if (!window.event) {
window.event = false;
}
} // createFakeEventObj



function resizeBlankDiv() {
// resize blank placeholder div so IE 5 on mac will get all clicks in window
if ((navigator.appVersion.indexOf('MSIE 5') != -1)
&& (navigator.platform.indexOf('Mac') != -1)
&& getStyleObject('blankDiv')) {
getStyleObject('blankDiv').width = document.body.clientWidth - 20;
getStyleObject('blankDiv').height = document.body.clientHeight - 20;
}
}

function explorerMacResizeFix () {
location.reload(false);
}

function mClk(src){
if(event.srcElement.tagName=='TD')
src.children.tags('A')[0].click();
}
//-->

</script>

<table width="450" bgcolor="#8b0000" cellpadding="0" cellspacing="0" border="0">
<tr height="20">
<td align="left" valign="middle" width="80" height="20">
<div id="label1"><a href="p_index.asp" class="MenuHeader" onMouseover="return !showMenu('1', event, 'label1'); menuOver('rollimg2');" onMouseOut =" window.status='';return true;">Example 1</a></div>
<div id="menu1" style="width: 150px; height: 52px; position:absolute; z-index:1; visibility:hidden" onmouseover="event.cancelBubble = true;" class="Menu">
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>
</div>
</td>
<td align="left" valign="middle" width="80" height="20">

<div id="label2"><a href="t_index.asp" class="MenuHeader" onMouseover="return !showMenu('2', event, 'label2'); menuOver('rollimg2');" onMouseOut =" window.status='';return true;">Example 2</a></div>
<div id="menu2" style="width: 150px; height: 52px; position:absolute; z-index:1; visibility:hidden" onmouseover="event.cancelBubble = true;" class="Menu">
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>
</div>
</td>
<td align="left" valign="middle" width="120" height="20">
<div id="label3"><a href="c_index.asp" class="MenuHeader" onMouseover="return !showMenu('3', event, 'label3'); menuOver('rollimg2');" onMouseOut =" window.status='';return true;">Example 3</a></div>
<div id="menu3" style="width: 150px; height: 52px; position:absolute; z-index:1; visibility:hidden" onmouseover="event.cancelBubble = true;" class="Menu">
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>
</div>

</td>
<td align="left" valign="middle" width="120" height="20">
<div id="label4"><a href="g_index.asp" class="MenuHeader" onMouseover="return !showMenu('4', event, 'label4'); menuOver('rollimg2');" onMouseOut =" window.status='';return true;">Example 4</a></div>
<div id="menu4" style="width: 150px; height: 52px; position:absolute; z-index:1; visibility:hidden" onmouseover="event.cancelBubble = true;" class="Menu">
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>
</td></tr></table>
</div>

</td>
</tr>
</table>
Text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... <br>
text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... <br>
text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... <br>
text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... <br>
text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... <br>
text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... <br>
text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... <br>
text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... <br>
text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... <br>
text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... <br>
text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... <br>
text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... <br>
text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... <br>
text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... <br>
text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... <br>
text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... <br>
text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... <br>

</body>
</html>

[code]

Any help is appreciated.

(Edited by Del Rosario on 06-05-2004 03:09)
Del Rosario
Obsessive-Compulsive (I) Inmate

From:
Insane since: Jun 2004

 posted posted 06-05-2004 03:17

I thought I would elaborate on what I want in case I wasn't entirely clear. I'm looking to create a drop down menu for my blog that uses no tables. I know enough HTML & CSS to have created a website without tables and I would like to avoid using them here. I want to be able to keep the JavaScript and CSS in external files so I don't make a mess of my files. I'll be applying styles later.

If there are any other questions please ask me. I'm very greatful for the help!
poi
Paranoid (IV) Inmate

From: France
Insane since: Jun 2002

 posted posted 06-05-2004 03:23

Del Rosario: Hello and welcome.

At first sight, your script seems over complicated for what seems to me like a simple visibility toggle. Anyway, since you're willing to stick to web standards and appropriate use of the HTML tags, you should have a look at Eric MEYER's Pure CSS Menus.

Cheers,
PS: no need to paste a huge script. An URL is fairly enough



(Edited by poi on 06-05-2004 03:25)
Del Rosario
Obsessive-Compulsive (I) Inmate

From:
Insane since: Jun 2004

 posted posted 06-05-2004 06:27

Thanks for the reply poi. Eric Meyer's solution is good but it only works in one browser, a browser that the vast majority of users don't use. I'd prefer to stick to webstandards as much as possible but if that means eliminating 80% of users or so, I'd rather deviate slightly.

I'm aware the script is over complicated. Like I said, I have a basic idea of what I'm doing but no real technical idea of what I'm doing. Is there anything that sticks out from the very beginning that I should change or look into?

Sorry about the code. I didn't know if it were appropriate to post a link, code, or both.

Thanks for any help.
Rinswind 2th
Maniac (V) Inmate

From: Den Haag: The Royal Residence
Insane since: Jul 2000

 posted posted 06-05-2004 14:37

http://www.evolt.org/article/How_to_make_a_simple_CSS_dropdown_menu/17/52030
At howtocreate.co.ukyou will find a Javascript tutorial and this example is what you are looking for.

An very elagant solution could be found at ALA in an article called Sugarfish dropdowns

(Edited by Rinswind 2th on 06-05-2004 14:53)
Del Rosario
Nervous Wreck (II) Inmate

From:
Insane since: Jun 2004

 posted posted 06-06-2004 18:47

Thanks for the reply Rinswind.

I checked out ALA's article and found the Sugarfish dropdown to be very similar to what I was looking for. I was able to impliment the sugarfish into my design but I'm having problems customizing it EXACTLY the way I would want. I would like the first & second layer lists to be Rollover Lists. I'm having trouble adding the CSS to the code though.

Is there any advice you can give me?
Rinswind 2th
Maniac (V) Inmate

From: Den Haag: The Royal Residence
Insane since: Jul 2000

 posted posted 06-07-2004 08:19

That should be easy just ad som anchor tags and mark them up right.

The css would be something like this :
a {background-color: #666666}
a:hover {background-color: #333333}

And in the html you would get :
<ul>
<a href="link to something"><li>item-one</li></a>
<a href="link"><li>item two</li></a>
</ul>

Or :
<ul>
<li><a href="link">item one</a></li>
<li><a href="link">item two</a></li>
</ul>

« Backwards — Onwards »

Show Forum Drop Down Menu