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

最新推荐文章于 2020-01-17 16:38:43 发布

wangxiaohui6687

最新推荐文章于 2020-01-17 16:38:43 发布

阅读量717

点赞数

CC 4.0 BY-SA版权

分类专栏： jquary

本文链接：https://blog.youkuaiyun.com/wangxiaohui6687/article/details/8238754

jquary 专栏收录该内容

38 篇文章

订阅专栏

本文介绍了一个使用HTML和jQuery实现的鼠标悬停显示二级导航菜单的示例。通过CSS样式设置页面布局，并利用jQuery的mouseenter和mouseleave事件来控制二级菜单的显示与隐藏。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

分析：

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>