您的位置：首页 > 其它

jquary 效果之——导航菜单竖向展开

2012-11-29 14:22 288 查看


分析：

1、首先写出主导航

2、在每个li里放一个分的导航

3、通过.find（“”）找出要执行的对象

代码如下：

<!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>无标题文档</title>

<style type="text/css">

body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td,div,span{margin:0;padding:0}

body,button,input,select,textarea{font:12px/1.5 tahoma,arial,'宋体',sans-serif}

h1,h2,h3,h4,h5,h6{font-size:100%}

address,cite,dfn,em,var{font-style:normal}

code,kbd,pre,samp{font-family:courier new,courier,monospace}

small{font-size:12px}

ul,ol{list-style:none}

a{text-decoration:none;}

a:hover{text-decoration:underline}

sup{vertical-align:text-top}

sub{vertical-align:text-bottom}

legend{color:#000}

fieldset,img{border:0}

button,input,select,textarea{font-size:100%}

button{border:none;cursor:pointer;}

table{border-collapse:collapse;}

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,

summary,time,mark,audio,video{display:block;margin:0;padding:0}

mark{background:#ff0}

#nav{margin:50px auto;width:1024px;}

ul .N_li{float:left;width:120px;background:#F90;height:30px;line-height:30px;text-align:center;margin-right:1px;}

ul .N_li a:hover{background:#6CC;display:block;width:120px;height:30px;}

#one{clear:both;}

.N_li ul li{border-top:1px #FFF solid;}

.N_li ul li a {width:120px;background:#F90;height:30px;line-height:30px;text-align:center;display:block;}

.inner_ul{display:none;}

</style>

<script type="text/javascript" src="jquery-1.7.2.min.js"></script>

<script type="text/javascript">

$(function(){

$("li.N_li").mousemove(function(){

$(this).find('ul').slideDown();//找出正在处理的元素(li.N_li)的后代元素(ul)

})

$("li.N_li").mouseleave(function(){

$(this).find('ul').slideUp();

})

})

</script>

</head>

<body>

<div id="nav">

<ul>

<li class="N_li">

<a href="#">首页</a>

<ul class="inner_ul">

<li><a href="#">首页</a></li>

<li><a href="#">首页</a></li>

<li><a href="#">首页</a></li>

<li><a href="#">首页</a></li>

<li><a href="#">首页</a></li>

</ul>

</li>

<li class="N_li">

<a href="#">首页1</a>

<ul class="inner_ul">

<li><a href="#">首页1</a></li>

<li><a href="#">首页1</a></li>

<li><a href="#">首页1</a></li>

<li><a href="#">首页1</a></li>

<li><a href="#">首页1</a></li>

</ul>

</li>

<li class="N_li">

<a href="#">首页2</a>

<ul class="inner_ul">

<li><a href="#">首页2</a></li>

<li><a href="#">首页2</a></li>

<li><a href="#">首页2</a></li>

<li><a href="#">首页2</a></li>

<li><a href="#">首页2</a></li>

</ul>

</li>

<li class="N_li">

<a href="#">首页3</a>

<ul class="inner_ul">

<li><a href="#">首页3</a></li>

<li><a href="#">首页3</a></li>

<li><a href="#">首页3</a></li>

<li><a href="#">首页3</a></li>

<li><a href="#">首页3</a></li>

</ul>

</li>

<li class="N_li">

<a href="#">首页4</a>

<ul class="inner_ul">

<li><a href="#">首页4</a></li>

<li><a href="#">首页4</a></li>

<li><a href="#">首页4</a></li>

<li><a href="#">首页4</a></li>

<li><a href="#">首页4</a></li>

</ul>

</li>

<li class="N_li">

<a href="#">首页5</a>

<ul class="inner_ul">

<li><a href="#">首页5</a></li>

<li><a href="#">首页5</a></li>

<li><a href="#">首页5</a></li>

<li><a href="#">首页5</a></li>

<li><a href="#">首页5</a></li>

</ul>

</li>

</ul>

</div>

</body>

</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航