你的位置:首页 > Java教程

[Java教程]jQuery如何实现竖向二级导航菜单


jQuery如何实现竖向二级导航菜单:
二级导航菜单在网页设计中数不胜数,有横向导航菜单,也有竖向导航菜单。在个人的印象中,好像介绍实现横向导航的教程比较多,所以在这里咱们就单独介绍一下如何使用jQuery实现竖向导航菜单,这里只介绍如何实现此种功能,对于效果的美观度,可以自行修改设计。下面简单介绍一下如何实现此效果:
静态代码如下:

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.51texiao.cn/" /><title>蚂蚁部落</title><style type="text/css"> body {  font-size:12px;  padding:0px;  margin:0px; } #menu,#menu ul {  list-style-type:none;  margin: 0;  padding: 0;  width:160px; } #menu a {  display:block;  text-decoration: none;     } #menu li {  margin-top: 1px; } #menu li ul {  display:none; } #menu li a {  background:#ccc;  color: #fff;      padding:5px; } #menu li ul li a {  background-color:green;  color:#000;  padding-left:20px; }</style></head><body><ul id="menu"> <li> <a href="#">div+css专区</a>  <ul>   <li><a href="#">CSS学习</a></li>   <li><a href="#">div+css教程</a></li>  </ul> </li> <li> <a href="#">jQuery专区</a>  <ul>   <li><a href="#">实例教程</a></li>   <li><a href="#">jQuery教程</a></li>   <li><a href="#">jQuery特效</a></li>  </ul> </li> <li> <a href="#">交流专区</a>  <ul>   <li><a href="#">搜索优化</a></li>   <li><a href="#">运营交流</a></li>  </ul> </li></ul></body></html>

以上代码是代码的代码,这个时候二级菜单式是隐藏的。需要特别注意的是,二级菜单的ul是嵌套在li元素中,之所以这样,是为了便于jQuery代码的处理,比如当鼠标指针离开附近li的时候,二级菜单就可以隐藏,否则不容易当鼠标指针一旦一级菜单的li,二级菜单就会隐藏,无法选中二级菜单。为静态代码添加jQuery代码:

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.51texiao.cn/" /><title>蚂蚁部落</title><style type="text/css"> body {  font-size:12px;  padding:0px;  margin:0px; } #menu,#menu ul {  list-style-type:none;  margin: 0;  padding: 0;  width:160px; } #menu a {  display:block;  text-decoration: none;     } #menu li {  margin-top: 1px; } #menu li ul {  display:none; } #menu li a {  background:#ccc;  color: #fff;      padding:5px; } #menu li ul li a {  background-color:green;  color:#000;  padding-left:20px; }</style><script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script><script type="text/javascript">$(document).ready(function(){ jQuery.mymenu=function(selector){  $(selector).click(function(){   $(this).find("ul").css("display","block");  });  $(selector).mouseleave(function(){   $(this).find("ul").css("display","none");  })  } $.mymenu("#menu li");  })</script></head><body><ul id="menu"> <li> <a href="#">div+css专区</a>  <ul>   <li><a href="#">CSS学习</a></li>   <li><a href="#">div+css教程</a></li>  </ul> </li> <li> <a href="#">jQuery专区</a>  <ul>   <li><a href="#">实例教程</a></li>   <li><a href="#">jQuery教程</a></li>   <li><a href="#">jQuery特效</a></li>  </ul> </li> <li> <a href="#">交流专区</a>  <ul>   <li><a href="#">搜索优化</a></li>   <li><a href="#">运营交流</a></li>  </ul> </li></ul></body></html>

以上代码实现了我们想要的效果,不是太美观,不过框架和方法已经有了,可以根据需要自行修饰。

原文地址是:http://www.51texiao.cn/jqueryjiaocheng/2015/0427/242.html