PDA

View Full Version : Multiline navigation menu

silverdove
02-04-2003, 06:01 PM
I am helping to maintain our church's website. I have a problem, that I know can be solved in Java (which I don't know) and wondered if you can help. I have a menu in the following format:

Line1
Line2
Line3
Very long Line4
Line5
Line6

All I want to be able to do is to somehow highlight each item as the mouse goes over it (OnMouseOver?). I have found java script that can do this as it is shown or as buttons, but they only seem to do it for a single line of text. I need to split "Very long line 4" over two lines:

Line1
Line2
Line3
Very long
Line4
Line5
Line6

I suppose I could have it as two separate links pointing to the same place, but I think that you would agree that that is untidy.

Help please.
Michael
02-04-2003, 07:48 PM
hi
could you show me where you found the script, or could you post the scripts?
because I don't think there is any well written javascripts which ONLY allows you to put text all squeeze together on one line and force the text to split!:D
PS. Please post your site too! it will be helpful for other and I to help you!:D
Dr. Web
02-04-2003, 08:55 PM
maybe this will help:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
</head>

<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0" height="15">
<tr bgcolor=#a9a9a9>
<td width=20%>Company</td>
<td width=20%>Rate</td>
<td width=20%>Set-up fee</td>
<td width=20%>Database connectivity?</td>
<td width=20%><a href="http://www.yahoo.com" style="text-decoration: none;">Details</a></td>
</tr>
<tr onMouseOver="this.style.backgroundColor='98cafe';this.style.cursor='hand';" onMouseOut="this.style.backgroundColor='';" onClick="this.style.backgroundColor='red'; document.location='http://www.yahoo.com';">
<td>Perl Host Master</td>
<td>$19.95 month</td>
<td>$5.99</td>
<td>Yes</td>
<td width=20%><a href="http://www.yahoo.com" style="text-decoration: none;">Details</a></td>
</tr>
<tr onMouseOver="this.style.backgroundColor='98cafe';this.style.cursor='hand';" onMouseOut="this.style.backgroundColor='';" onClick="this.style.backgroundColor='red'; document.location='http://www.yahoo.com';" >
<td>Perl Host Master</td>
<td>$19.95 month</td>
<td>$5.99</td>
<td>Yes</td>
<td width=20%><a href="http://www.yahoo.com" style="text-decoration: none;">Details</a></td>
</tr>
<tr onMouseOver="this.style.backgroundColor='98cafe';this.style.cursor='hand';" onMouseOut="this.style.backgroundColor='';" onClick="this.style.backgroundColor='red'; document.location='http://www.yahoo.com';">
<td>Perl Host Master</td>
<td>$19.95 month</td>
<td>$5.99</td>
<td>Yes</td>
<td width=20%><a href="http://www.yahoo.com" style="text-decoration: none;">Details</a></td>
</tr>
<tr onMouseOver="this.style.backgroundColor='98cafe';this.style.cursor='hand';" onMouseOut="this.style.backgroundColor='';" onClick="this.style.backgroundColor='red'; document.location='http://www.yahoo.com';" >
<td>Perl Host Master</td>
<td>$19.95 month</td>
<td>$5.99</td>
<td>Yes</td>
<td width=20%><a href="http://www.yahoo.com" style="text-decoration: none;">Details</a></td>
</tr>
<tr onMouseOver="this.style.backgroundColor='98cafe';this.style.cursor='hand';" onMouseOut="this.style.backgroundColor='';" onClick="this.style.backgroundColor='red'; document.location='http://www.yahoo.com';">
<td>Perl Host Master</td>
<td>$19.95 month</td>
<td>$5.99</td>
<td>Yes</td>
<td width=20%><a href="http://www.yahoo.com" style="text-decoration: none;">Details</a></td>
</tr>
<tr onMouseOver="this.style.backgroundColor='98cafe';this.style.cursor='hand';" onMouseOut="this.style.backgroundColor='';" onClick="this.style.backgroundColor='red'; document.location='http://www.yahoo.com';" valign=top>
<td>this line is intentionally repeated for effect... </td>
<td>$19.95 month</td>
<td>$5.99</td>
<td>Yes</td>
<td width=20%><a href="http://www.yahoo.com" style="text-decoration: none;">Details</a></td>
</tr>
</table>
</body>
</html>
silverdove
02-05-2003, 04:46 AM
Thanks Dr Web...just what I wanted. :)
silverdove
02-25-2003, 07:27 AM
Now I've been asked to expand the menu (which sits in a frame on the LHS) to somthing like this :

Line1
Line2
Hidden Line a
Hidden Line b
Line3
Very long
Line4
Line5
Hidden Line c
Hidden Line d
Hidden Line e
Hidden Line b
Line6

The hidden lines should only bee seen when the mouse passes over the main item.

It is possible usung the code previously supplied?

Thanks