sunreong :)
HCG Elite
> : Im inactive.deleted.
Posts : 1326
Age : 27
Mood : Determined
Country :
Reg-Date : 2009-05-14
Forum Warning :
Contribution :
|
Subject: CSS menus. Fri Sep 18, 2009 11:45 pm |
|
|
REPUisloveIt is a CSS/HTML code which is a drop down menu that can be used as a navigation to your profile. TO ALL :correct me if im wrong - Code:
-
<html> <head>
<style type="text/css"> ul { margin: 0; padding: 0; list-style: none; } ul li { position: relative; float: left; width: 100px; } li ul { position: absolute; top: 30px; opacity: 0; } ul li a { display: block; text-decoration: none; line-height: 20px; color: #777; padding: 5px; background: #CC0; margin: 0 2px; display: block; -webkit-transition-property: background-color, color, text-shadow; -webkit-transition-duration: .5s; -webkit-transition-timing-function: ease-in; } ul li a:hover { background: #66F; } li:hover ul { opacity: 1; -webkit-transition: opacity 4s linear; } </style>
<script type="text/javascript"> startList = function() { if (document.all&&document.getElementById) { navRoot = document.getElementById("nav"); 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> <ul> <li><a href="">Home</a></li> <li><a href="">Web</a> <ul> <li><a href="#">Browser</a></li> <li><a href="#">Search</a></li> </ul> </li> <li><a href="">Monkey</a> <ul> <li><a href="">Eating Banana</a></li> <li><a href="">Throwing Poop</a></li> </ul> </li> <li><a href="">Contact</a> <ul> <li><a href="">Via Web</a></li> <li><a href="">Via Phone</a></li> <li><a href="">Via tin can and string</a></li> </ul> </li> </ul> </body> </html>
Sorry no preview.just test it:)- Spoiler:
CREDITS TO WEBMONKEY:)
|
|