您所在的位置:小祥子 » 编程 » JavaScript » 正文

jQuery如何实现竖向二级导航菜单

时间:2015-07-08 编辑:一落叶而知秋 来源:Cnblogs

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

关键词:菜单