horizontal css/javasctip menu Q.

Dev Shed Forums Sponsor:

February 21st, 2004, 10:41 AM

darkhalf

Registered User

Join Date: Feb 2004

Posts: 4

Time spent in forums: < 1 sec
Reputation Power: 0

horizontal css/javasctip menu Q.

Hi,

I have a horizontal menu, now what I would like to know how to do, is that once one of the element has focus, I would have another row underneath it that would have my links

link1 | link2 | link3, etc...

here is my menu bar, any info, or ideas would be great

<html>
<head>
<style type="text/css">
.navh LI {
DISPLAY: inline; LIST-STYLE-TYPE: none
}
.navh UL {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; WHITE-SPACE: nowrap
}
.navh A {
border:1px solid #333333; PADDING-RIGHT: 8px; PADDING-LEFT: 24px; PADDING-BOTTOM: 1px; PADDING-TOP: 1px; BACKGROUND-COLOR: #999999
}
.navh A:link {
COLOR: #eeeeee; TEXT-DECORATION: none
}
.navh A:visited {
COLOR: #eeeeee; TEXT-DECORATION: none
}
.navh A:hover {
border:1px solid #333333; COLOR: #333333; BACKGROUND-COLOR: #ff6600
}
</style>
</head>

<body>
<div class="navh">
<ul>
<li><a href="#" >Item 1</a></li>
<li><a href="#" >Item 2</a></li>
<li><a href="#" >Item 3</a></li>
</ul>
</div>

</body>
</html>

February 21st, 2004, 12:56 PM

dslc1000

Contributing User

Join Date: Dec 2003

Location: Ireland

Posts: 73

Time spent in forums: 14 h 11 m 52 sec
Reputation Power: 5

Hi, I hope this helps. It uses tables instead of lists, but achieves pretty much the same

effect.

<html>

<head>
<style type="text/css">
td.table {
width: 100px;
background: cccccc;
}
table.menu {
visibility: hidden;
position: absolute;
background: cccccc;
border-width: 2px;
border-style: solid;
border-color: 000000;
border-collapse: collapse;
}
</style>
<script type="text/javascript">
function showmenu(elmnt) {
document.all(elmnt).style.visibility="visible"
}
function hidemenu(elmnt) {
document.all(elmnt).style.visibility="hidden"
}
</script>
</head>

<body>
<table>
<tr>
<td class="table" onmouseover="showmenu('Item 1')" onmouseout="hidemenu('Item 1')">Item

1<br>
<table class="menu" id="Item 1">
<tr><td class="menu"><a href="link#1.html">Link 1</a></td>
<td class="menu"><a href="link#2.html">Link 2</a></td></tr>
</table>
</td>
<td class="table" onmouseover="showmenu('Item 2')" onmouseout="hidemenu('Item 2')">Item

2<br>
<table class="menu" id="Item 2">
<tr><td class="menu"><a href="link#1.html">Link 1</a></td>
<td class="menu"><a href="link#2.html">Link 2</a></td></tr>
</table>
</td>
<td class="table" onmouseover="showmenu('Item 3')" onmouseout="hidemenu('Item 3')">Item

3<br>
<table class="menu" id="Item 3">
<tr><td class="menu"><a href="link#1.html">Link 1</a></td>
<td class="menu"><a href="link#2.html">Link 2</a></td></tr>
</table>
</td>
</tr>
</table>
</body>

</html>

February 21st, 2004, 02:21 PM