您的位置：首页 > Web前端 > JQuery

jQuery简单特效之 ----- jQuery实现简单的下拉菜单

2017-04-08 13:49 771 查看

HTML文件 (包含js代码)

<!DOCTYPE html> <html> <head>

<title>  </title>
<link rel="stylesheet" type="text/css" href="test_13.css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">

$(document).ready( function(){
$('#navigation li').hover( function(){
$(this).find('.subnav').animate({
opacity:1.0,
height:'toggle'
} , 500);
},function(){
$(this).find('.subnav').animate({
opacity:0,
height:'toggle'
},500 );
$(this).find('a').removeClass('active');
});
});
</script>

</head> <body>

<div id="header">
<ul id="navigation">
<li> <a href="#"> HOME </a> </li>
<li> <a href="#"> Our work </a>
<ul class="subnav">
<li> <a href="#"> Example 1 </a></li>
<li> <a href="#"> Example 2 </a></li>
<li> <a href="#"> Example 3 </a></li>
</ul>
</li>
<li>
<a href="#"> Services </a>
<ul class="subnav">
<li> <a href="#"> Services 1 </a> </li>
<li> <a href="#"> Services 2 </a> </li>
<li> <a href="#"> Services 3 </a> </li>
</ul>
</li>
<li> <a href="#"> About Us </a> </li>
<li> <a href="#"> Contact  </a></li>
</ul>
</div>

</body> </html>

CSS文件

.container{

width:950px;
margin:10px auto;
font: 14px "Helvetica Neua",Arial,Helvetica,Geneva,sans-serif;
border: 1px solid #333;

}

p{

margin: 10px;

}

ul#navigation{

list-style-type: none;
background:#CE0100;
height: 63px;
font-size: 24px;

}

ul#navigation li{

float: left;
width: 175px;
text-align: center;
position: relative;
height
ccc0
: 63px;
padding: 20px 5px 10px 5px;

}

ul#navigation li a{

color: #fff;
text-decoration: none;
display: block;

}

ul#navigation li a.active{

border: 1px solid blue;

}

ul#navigation li ul.subnav{

background:#E7F1D2;
width: 175px;
clear: both;
display: none;
position: absolute;
top: 63px;
-moz-border-radius-bottomleft:8px;
-moz-border-radius-bottomright:8px;
-webkit-border-bottom-left-radius:8px;
-webkit-border-bottom-right-radius:8px;
border-left:2px solid #998;
border-bottom:2px solid #998;

}

ul#navigation li ul.subnav li{

clear: both;
height: 40px;
padding: 0;
text-align: center;
margin:0px;

}

ul#navgation li ul.subnav li a{

background:none;
font-size: 18px;
color: #333;
text-decoration: none;
padding: 10px 0;
border: none;

}

ul#navgation li ul.subnav li a:hover{

background:#DBF1AD;
font-size: 18px;
color: #333;
border: none;

}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jquery javascript html 界面

相关文章推荐

新的分享

章节导航