Javascript JQuery syntax, work fine. give me comment. thanks
<html>
<head>
<style>
body, span, ul, li, a, div{color:white; padding:0px; margin:0px; border:none; }
ul {list-style:none; }
ul li {height:22px;margin:8px;}
ul li a {line-height:20px;}
ul li span {display:inline;visibility:hidden; position:absolute; }
span {border: 1px solid white; width:100px;}
</style>
</head>
<body >
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<div id="menu" style="margin:200px; background-color:red;">
<ul id="rootMenu" style="list-style:none;height:40px;">
<li style="float: left; background-color:green;"><div><a>home</a></div>
<span style="z-index:10001;background-color:blue;">
<ul>
<li><a href="google.com">about</a></li>
<li><a href="google.com">contact</a></li>
<li style="background-color:green;"><div style="clear:both;"><a>links</a></div>
<span style="z-index:10001;background-color:blue;display:inline;">
<ul>
<li><a href="google.com">google</a></li>
<li><a href="yahoo.com">yahoo</a></li>
<li><a href="microsoft.com">microsoft</a></li>
</ul>
</span>
</li>
<li><a href="google.com">terms of user</a></li>
</ul>
</span>
</li>
<li style="float: left; background-color:green;"><div><a>link</a></div>
<span style="z-index:10001;background-color:blue;">
<ul>
<li><a href="google.com">google</a></li>
<li><a href="yahoo.com">yahoo</a></li>
<li><a href="microsoft.com">microsoft</a></li>
</ul>
</span>
</li>
<li style="float:left;background-color:green;"><div><a>asdfasdasdf</a></div></li>
</ul>
</div>
<script type="text/javascript">
$(document).ready(function(){
$("#menu ul").children().mouseenter(function(){
if($(this).children().size() < 2) return;
var par = $(this).parent();
if(par.data("data") != null && !(typeof par.data("data") == 'undefined')) {
$(par.data("data")).css("visibility", "hidden");
}
$(this).data("backgroundcolor", "" + $(this).css("background-color"));
$(this).css("background-color", "silver");
$($(this).children().get(1)).css("visibility", "visible");
if(!(par.get(0).id == 'rootMenu')) $($(this).children().get(1)).css("margin-left", "60px");
par.data("data", $(this).children().get(1));
}).mouseleave(function(){
var par = $(this).parent();
if($(this).data("backgroundcolor") != null && !(typeof $(this).data("backgroundcolor") == 'undefined')) {
$(this).css("background-color", $(this).data("backgroundcolor"));
}
if(par.data("data") != null && !(typeof par.data("data") == 'undefined')) {
$(par.data("data")).css("visibility", "hidden");
}
});
});
</script>
</body>
</html>
No comments:
Post a Comment