Tuesday, July 19, 2005

MultiLinks

I just saw this on /.

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!
Post a Comment