以下是 jquery UI渐变下拉菜单js特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery UI渐变下拉菜单</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<link href="css/lanrenzhijia.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(document).ready(function() {
$("li").hover(function() {
var itemwidth = $(this).width(); /* Getting the LI width */
$(this).prepend("<div class='hover'></div>"); /* Inserting a blank div into within li above the <a> tag*/
$(this).find("div").fadeIn('10000').css({ 'width' : itemwidth}); /* Using the itemwidth for the div to display properly*/
$(this).find("ul").fadeIn('1000').slideDown('10000').css("display", "block");
} , function() {
$(this).find("div").slideUp('1000').fadeOut('1000');/* sliding up and fading out the hover div */
$(this).find("div").remove();/* removing the <div> code from html at every mouseout event*/
$(this).find("ul").fadeOut('1000'); /* fading out the sub menu */
});
$(".search-input").focus(function(){
$(this).animate({width:'180px'}, 500); /* on focus, increasing the input width of search to left side*/
});
$(".search-input").focusout(function(){
$(this).animate({width:'117px'}, 500); /* on focus, decreasing the input width of search to left side*/
});
});
</script>
</head>
<body>
<div class="main-navigation">
<ul>
<li><a href="#">Home</a>
<ul>
<li><a href="#">Sub Menu Item 1</a></li>
<li><a href="#">Sub Menu Item 2</a></li>
<li><a href="#">Sub Menu Item 3</a></li>
<li><a href="#">Sub Menu Item 4</a></li>
<li><a href="#">Sub Menu Item 5</a></li>
</ul>
</li>
<li><a href="#">Services</a>
<ul>
<li><a href="#">Sub Menu Item 1</a></li>
<li><a href="#">Sub Menu Item 2</a></li>
<li><a href="#">Sub Menu Item 3</a></li>
<li><a href="#">Sub Menu Item 4</a></li>
<li><a href="#">Sub Menu Item 5</a></li>
</ul>
</li>
<li><a href="#">Portfolio</a>
<ul>
<li><a href="#">Sub Menu Item 1</a></li>
<li><a href="#">Sub Menu Item 2</a></li>
<li><a href="#">Sub Menu Item 3</a></li>
<li><a href="#">Sub Menu Item 4</a></li>
<li><a href="#">Sub Menu Item 5</a></li>
</ul>
</li>
<li><a href="#">Contact</a>
<ul>
<li><a href="#">Sub Menu Item 1</a></li>
<li><a href="#">Sub Menu Item 2</a></li>
<li><a href="#">Sub Menu Item 3</a></li>
<li><a href="#">Sub Menu Item 4</a></li>
<li><a href="#">Sub Menu Item 5</a></li>
</ul>
</li>
</ul>
<div class="search">
<input type="text" name="search" class="search-input" />
<input type="submit" name="search" value="" class="search-btn" />
</div>
</div>
</body>
</html>
CSS代码(lanrenzhijia.css):
@charset "utf-8";/* 代码整理：懒人之家 lanrenzhijia.com */
body{background:#000;font-family:Arial,LucidaGrande,Lucida Sans,Arial;color:#FFFFFF}
a{color:#FFCC66}
.main-navigation{width:890px;height:44px;border:1px dashed #a2d2cf;background:url(../images/nav-bg.jpg) left repeat-x;top:50%;left:50%;margin:-22px 0 0 -445px;position:absolute;}
ul{margin:0px;padding:0px;list-style:none;}
li{float:left;font-size:15px;color:#FFFFFF;height:42px;display:block;position:relative;}
li .hover{color:#FFFFFF;text-decoration:none;position:absolute;background:url(../images/hover-bg.png) top left no-repeat;top:0;left:0;z-index:0;height:44px;display:none;}
li a{display:block;color:#FFFFFF;text-decoration:none;padding:14px 43px 13px 44px;z-index:1000;position:relative;}
.search{float:right;margin:9px 26px 0 0;padding:0px;}
.search-input{font-family:LucidaGrande,Lucida Sans,Arial;font-size:12px;color:#FFFFFF;width:117px;height:26px;padding:0 5px 0 10px;padding:5px 5px 0 10px \9;/* IE 7 and 8 */
border:0;outline:none;background:url(../images/search-input-bg.png) top left no-repeat;float:left;}
.search-btn{width:37px;height:26px;border:0;outline:none;background:url(../images/search-btn.png) top left no-repeat;float:left;}
ul li ul{width:200px;position:absolute;display:none;top:44px;padding:1px 0 0 0;}
ul li:hover ul{display:block;}
ul li ul li{display:block;padding:10px 10px 10px 0;width:200px;padding:0px;margin:0px;background:url(../images/nav-bg.jpg) left repeat-x;position:relative;}
ul li ul li a{display:block;color:#FFFFFF;text-decoration:none;padding:14px 43px 13px 28px;z-index:1000;position:relative;}
/* 代码整理：懒人之家 lanrenzhijia.com */
分享到QQ
分享到微博
微信扫一扫
