jquery 左边分类+插件 

<!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=gb2312" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="menu_left.js"></script>
<style>
ul{ list-style:none; padding:0px; margin:0px;}
li{ list-style:none; padding:0px; margin:0px;}
.menu_left_box{ width:200px; border:1px #CC0000 solid}
.menu_left_box ul{ list-style:none; width:150px;}
.menu_left_box ul li{ list-style:none; line-height:25px; line-height:25px; position: relative;}
.menu_left_box ul li ul{ position:absolute; width:200px; border:1px #CC0000 solid; left:142px; top:0px;  z-index: 999999; display:none;  background-color:#FFFFFF}
.menu_left_box ul li ul li{list-style:none; line-height:25px; line-height:25px;}
.menu_left2_tit{line-height:25px;height:25px; background-color:#6699FF; width:200px;}
.menu_left_tit{line-height:25px;height:25px; background-color:#ff0000; width:200px;}
</style>
</head>

<body>
<div class="menu_left_box">
<ul>
<li><a href="#">栏目一</a>
<ul><li >栏目一>>122</li>
<li>栏目一>>1</li>
<li>栏目一>>1</li>
</ul>
</li>
<li><a href="#">栏目二</a><ul><li>栏目二>>2</li>
<li>栏目二>>3</li>
<li>栏目二>>4</li>
</ul></li>
<li><a href="#">栏目三</a></li>
<li><a href="#">栏目四</a></li>
</ul>
</div>
</body>
</html>
<script type="text/javascript">
$(function(){
$(".menu_left_box ul li").menu_left();
});
</script>

只是用简单的线条，如果想加特效，可以修改CSS

插件部分 同理，如果想更多的效果，可以自行修改

(function($){
$.fn.menu_left=function(){
    
  $(this).hover(function(){
            num=$(this).index(this);    
            $(this).eq(num).addClass("menu_left_tit")
            $(this).find("ul").show();    
                     $(this).find("ul li").hover(function(){
                            index=$(this).index(this);    
                            $(this).eq(index).addClass("menu_left2_tit");
                                                          },function(){
                                                $(this).eq(index).removeClass("menu_left2_tit");              
                                                              });
             },function(){
            $(this).eq(num).removeClass("menu_left_tit")
            $(this).find("ul").hide();                              
                                  
            });

}          
 })(jQuery);

 

posted on 2013-09-18 13:05  小V_chen  阅读(302)  评论(0)  编辑  收藏  举报

导航