jQuery怎样实现最基础的下拉导航效果
导读：这篇文章给大家介绍了“jQuery怎样实现最基础的下拉导航效果”的相关知识，讲解详细，步骤过程清晰，对大家进一步学习和理解“jQuery怎样实现最基础的下拉导航效果”有一定的帮助，希望大家阅读完这篇文章能有所收获。下面就请大家跟着小编的思路...
这篇文章给大家介绍了“jQuery怎样实现最基础的下拉导航效果”的相关知识，讲解详细，步骤过程清晰，对大家进一步学习和理解“jQuery怎样实现最基础的下拉导航效果”有一定的帮助，希望大家阅读完这篇文章能有所收获。下面就请大家跟着小编的思路一起来学习一下吧。这里粗略做一款基于jquery的下拉导航菜单效果，我觉得挺不错，虽然没有怎么美化，但是代码易懂，另外修补的空间也比较大，相信对学习CSS以及jquery的朋友有不小的帮助。
运行效果截图如下：
在线演示地址如下：
http://demo.jb51.net/js/2015/jquery-xl-down-show-nav-codes/
具体代码如下：
!DOCTYPE HTML>
html>
head>
meta charset="UTF-8">
title>
jQuery下拉导航/title>
script type="text/javascript" src="jquery-1.6.2.min.js">
/script>
script type="text/javascript">
$(function(){
$('.nav').children("li:has(ul)").hover(
function(){
$(this).children("ul").slideDown();
}
,
function(){
$(this).children("ul").hide();
}
);
}
);
/script>
style type="text/css">
*{
margin:0;
padding:0;
}
.nav {
margin:200px;
list-style-type:none;
}
.nav li {
position:relative;
float:left;
margin-right:10px;
}
.nav li ul {
display:none;
position:absolute;
top:20px;
left:0;
list-style-type:none;
}
.nav li ul li {
padding:2px 0;
}
/style>
/head>
body>
ul class="nav">
li>
a href="#">
首页/a>
/li>
li>
a href="#">
链接/a>
ul>
li>
a href="#">
aaa/a>
/li>
li>
a href="#">
bbb/a>
/li>
li>
a href="#">
ccc/a>
/li>
li>
a href="#">
ddd/a>
/li>
/ul>
/li>
li>
a href="#">
相册/a>
ul>
li>
a href="#">
11/a>
/li>
li>
a href="#">
22/a>
/li>
li>
a href="#">
33/a>
/li>
li>
a href="#">
44/a>
/li>
/ul>
/li>
li>
a href="#">
博客/a>
ul>
li>
a href="#">
AA/a>
/li>
li>
a href="#">
BB/a>
/li>
li>
a href="#">
CC/a>
/li>
li>
a href="#">
DD/a>
/li>
/ul>
/li>
li>
a href="#">
关于/a>
/li>
div >
/div>
/ul>
/body>
/html>
希望本文所述对大家的jquery程序设计有所帮助。
以上就是关于“jQuery怎样实现最基础的下拉导航效果”的相关知识，感谢各位的阅读，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注网络，小编每天都会为大家更新不同的知识。
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： jQuery怎样实现最基础的下拉导航效果
本文地址： https://pptw.com/jishu/655129.html