I thought I could make it better for IE users to fail gracefully, and here is it:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> Hot Off The Presses </title>
<style type='text/css'>
<!--
ul, ol, pre, dl, p { margin-top:0px; margin-bottom:0px; }
code { white-space: nowrap; }
.vspace { margin-top:1.33em; }
.indent { margin-left:40px; }
.outdent { margin-left:40px; text-indent:-40px; }
img { border:0px; }
.multilink { margin-left: 2px; padding-right: 4px; margin-right: 2px; }
.multilink ul { padding: 0px; margin: 0px; display: inline; position: relative; border: 1px solid #ccc; }
.multilink ul li { list-style: none; display: inline; padding: 0px; margin: 0px; padding-left: 4px;}
.multilink ul li:hover ul { display: block; background: #444; }
.multilink ul li:hover { color: black; background: #ddd; }
.multilink ul li ul { display: none; position: absolute; padding: 0px 0px 4px 0px; left: -2px; top: -2px; z-index: 9;}
.multilink ul li ul li { display: block; padding: 0px 8px 0px 8px;}
.multilink ul li ul li:hover { color: white; background: #444; }
.p0 { color: #eee; text-decoration: underline; }
.p0 a, .p0 a:visited, .p0 a:hover { color: #eee; text-decoration: none; }
.p1, .p1 a, .p1 a:visited { color: #ccc; }
.p2, .p2 a, .p2 a:visited { color: #aaa; }
.p3, .p3 a, .p3 a:visited { color: #888; }
.p4, .p4 a, .p4 a:visited { color: #777; }
.p5, .p5 a, .p5 a:visited { color: #666; }
.p6, .p6 a, .p6 a:visited { color: #555; }
.p1 a:hover,
.p2 a:hover,
.p3 a:hover,
.p4 a:hover,
.p5 a:hover,
.p6 a:hover
{ color: white; text-decoration: none; }
.pseudo_multilink { border: 1px solid #ccc; padding: 1px 2px 1px 2px;}
.extra_link, .extra_link a { font-size: 8pt; }
.multilink_field_title { font-size: 8pt; color: #888; }
.odd_row { background-color: #edf3fe; }
-->
</style>
<script type="text/javascript">
<!--//--><![CDATA[//><!--
startList =
function()
{
if (document.all && document.getElementById) {
//navRoot = document.getElementById("menu");
navRoot = (document.getDocumentElement) ? document.getDocumentElement() : document.body;
for (i = 0; i < navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName == "LI") {
node.onmouseover =
function() { this.className += " over"; }
node.onmouseout =
function() { this.className = this.className.replace(" over", ""); }
}
}
}
}
window.onload = startList;
//--><!]]>
</script>
</head>
<body>
<span class="multilink">
<ul>
<li><a href="http://www.Marketine.com/">target</a>
<ul>
<li class="p0">
target (<a href="/project/mlink/index.php?mlink=Main.HomePage.Target.mlink&action=mlinkedit">edit</a>
[<a href="http://www.google.com/search?q=target">Google</a>]
[<a href="http://en.wikipedia.org/wiki/Special:Search?search=target">Wikipedia</a>])
</li>
<li class="p1"><a href="http://www.Marketine.com/">http://www.Marketine.com/</a></li>
<li class="p2"><a href="http://www.PrinceOfBali.com/">http://www.PrinceOfBali.com/</a></li>
<li class="p3"><a href="http://www.ESV-i.net/">http://www.ESV-i.net/</a></li>
<li class="p4"><a href="http://www.ESV-i.com/">http://www.ESV-i.com/</a></li>
<li class="p5"><a href="http://www.apple.com/">http://www.apple.com/</a></li>
</ul>
</li>
</ul>
</span>
</body>
</html>
Too easy!
Derived from The Original!
2 comments:
Great! But what happens when Javascript is disabled? The original code uses server-side browser detection to degrade gracefully when dealing with non-Firefox browsers without using client-side scripting. This approach is viable because it was meant to be a wiki solution. I've also attempted the ALA suckerfish dropdown technique, but that was designed more for a couple of statically defined menus, with statically defined IDs, as opposed to massively generated ones (a wiki page with lots of multilinks). Let me know if you have any thoughts on how to solve this problem. Thanks!
Could you just display: none the rest of the LI's after the first one, javascript to alter that? Hmm... IE you SOB!
Post a Comment