View Full Version : menu problem

09-30-2003, 06:36 PM
Im trying to put together a small menu using javascript.

I have a couple of question, if you take a look at the page http://larsandre.mine.nu/menu.htm

Why is the second menu item using two lines ? There should be enough space using one line ?

How can I get the <div> tag to fill the whole table cell ? Atm they are only partly filled and it looks rather stupid.

One annoying little thing, if I select for instance the 'project' menu then a submenu appears, which is excellent but If I then remove the cursor from the menu all together the menu still stays put. I need some help making a hide_menu function of some sort.

Appreciate any help you guys can give.

09-30-2003, 06:42 PM
Well, for a start, use CSS instead of HTML to style your divs.

I'll post more when I get back, I've got to go for a while.

09-30-2003, 07:47 PM

I am new here, but try this;

.menu {background-color:003366;width:200; color: white; text-align: center;}
.submenu {position:absolute;background-color:#77AADD;width:200}

var cm=null;
document.onclick = new Function("show(null)")
function getPos(el,sProp)
var iPos = 0
while (el!=null)
iPos+=el["offset" + sProp]
el = el.offsetParent
return iPos

function show(el,m)
if (m)
m.style.pixelLeft = getPos(el,"Left")
m.style.pixelTop = getPos(el,"Top") + el.offsetHeight

if ((m!=cm) && (cm)) cm.style.display='none'

<table width="800" border="1">
<td hight="15" width="200"><DIV ID="d1" onclick="parent.location.href = 'http://www.cnn.com/'" class="menu">News</DIV></td>
<td hight="15" width="200"><DIV ID="d2" onmouseover="show(this,ds2);" class="menu">A very long title name</DIV></td>
<td hight="15" width="200"><DIV ID="d3" onmouseover="show(this,ds3);" class="menu">Project</DIV></td>
<td hight="15" width="200"><DIV ID="d4" onmouseover="show(this,ds4);" class="menu">Member area</DIV></td>

<DIV ID="ds1" CLASS="submenu" STYLE="display:none">
<A HREF="http:\\www.siteexperts.com">Site Experts</A>
<A HREF="http:\\www.webtools.com">Web Tools</A>
<A HREF="http:\\www.webdevelopersjournal.com">Web Developers Journal</A>
<DIV ID="ds2" CLASS="submenu" STYLE="display:none">
<A HREF="">item1</A>
<A HREF="">item2</A>
<A HREF="">item3</A>
<A HREF="">item4</A>
<DIV ID="ds3" CLASS="submenu" STYLE="display:none">
<A HREF="">about ....</A>
<A HREF="">doc's</A>
<A HREF="">download</A>
<div ID="ds4" class="submenu" style="display:none">
<A HREF="login.asp">Login</A>

Hope it works for you,

Soter :)

09-30-2003, 08:41 PM
Thanks soterboy that solved two of my problems. Now I only need some sort of function that makes the submenu dissappear once the user takes the cursor off the menu\submenu.

me' : I will switch to css :)

09-30-2003, 10:08 PM
Okay, also, get rid of the table and use float: left on the div styles to give the same effect. Then set the width of your divs to whatever you want them to be. Finally, make sure you spell height with an e ;)