<!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);

jquery 左边分类+插件的更多相关文章

  1. 一款简洁大气的jquery日期日历插件

    本jquery插件名为manhuaDate,暂时只支持jquery 1.9.0以下版本,比如jquery-1.8.3.min.js 查看效果网址:http://keleyi.com/a/bjad/em ...

  2. jQuery语音播放插件

    自己做jQuery插件:将audio5js封装成jQuery语音播放插件   日前的一个项目需要用到语音播放功能.发现Audio5js符合需求且使用简单,又鉴于jQuery控件便于开发操作,于是有了以 ...

  3. 拍案惊奇！9款神奇的jQuery/CSS3经典插件

    款非常给力的jQuery/CSS3经典插件,插件包括CSS3图片特效.jQuery动画菜单.jQuery时尚登录表单等,一起来看看这些jQuery插件. .CSS3图片重力感应特效 这是一款应用重力感 ...

  4. 第一百九十节，jQuery，编辑器插件

    jQuery,编辑器插件 学习要点: 1.编辑器简介 2.引入 uEditor 编辑器(Editor),一般用于类似于 word 一样的文本编辑器,只不过是编辑为 HTML 格式的.分类纯 JS 类型 ...

  5. 推荐几款jquery图片切换插件

    一.前言 毕业季到了,大家都在匆匆忙忙的记录大学里最美好的时光,照片中各种花式.各种姿势都涌现出来了.这么多的照片怎么展示出来给自己的好友看呢?有人选择做成视频,有人选择ps之后做成图片集,而我选择利 ...

  6. 提升用户体验的最佳免费 jQuery 表单插件

    网页表单是一个老生常谈的话题.出于这样或那样的目的,一些示例中都会包括用户注册,电子商务结算,用户设置甚至联系人表格.而输入栏是非常容易用现代的CSS3技术来应用样式.但是到底什么决定整体用户体验? ...

  7. jQuery为开发插件提拱了两个方法:jQuery.fn.extend(); jQuery.extend();

    jQuery为开发插件提拱了两个方法,分别是: jQuery.fn.extend(); jQuery.extend(); jQuery.fn jQuery.fn = jQuery.prototype ...

  8. jQuery 人脸识别插件，支持图片和视频

    jQuery Face Detection 是一款人脸检测插件,能够检测到图片,视频和画布中的人脸坐标.它跟踪人脸并输出人脸模型的坐标位置为一个数组.我们相信,面部识别技术能够给我们的 Web 应用带 ...

  9. myWaterfall - jQuery瀑布流布局插件

    myWaterfall - jQuery瀑布流布局插件 Demo http://jsfiddle.net/q3011893/p5k2ogy8/embedded/result,html,css,js/ ...

随机推荐

  1. js nextSibling属性和previousSibling属性概述及使用注意

    1:nextSibling属性 该属性表示当前节点的下一个节点(其后的节点与当前节点同属一个级别):如果其后没有与其同级的节点,则返回null. 需要特别注意的是:该属性在不同的浏览器中的执行结果并不 ...

  2. hdu_5818_Joint Stacks(线段树模拟)

    题目链接:hdu_5818_Joint Stacks 题意: 给你两个栈,多了个合并操作,然后让你模拟 题解: 很容易想到O(1)的单个栈操作,O(n)的合并操作,这样肯定超时,所以我们要将时间复杂度 ...

  3. 可靠通信的保障 —— 使用ACK机制发送自定义信息——ESFramework 通信框架4.0 快速上手（12）

    使用ESPlus.Application.CustomizeInfo.Passive.ICustomizeInfoOutter接口的Send方法,我们已经可以给服务端或其它在线客户端发送自定义信息了, ...

  4. BestCoder Round #85 A B C

    本来没有写博客的打算,可是看完了题解感觉这三道题这么水,我却只做出来一道,实在不应该,还是写点东西吧…… A.sum 问题描述 给定一个数列,求是否存在连续子列和为m的倍数,存在输出YES,否则输出N ...

  5. chapter9_1 协同程序

    协同程序与线程差不多,也就是一条执行序列:有自己独立的栈.局部变量.指令指针,以及和其他协同程序共享的全局变量和其他大部分东西. 两者区别在于:一个多线程的程序可以同时运行几个线程,而协同程序却需要彼 ...

  6. Python 文本处理的应用

    最近根据公司运营部需求要对mongo数据库中的相关信息进行统计,本人一般喜欢将数据库服务器中相关的数据导出来(PS:其一由于Mongo为Nosql,在涉及关联表时不好处理,其二是因为虽然为测试环境,但 ...

  7. redis win版安装

    直接来看看redis怎么安装到windows系统上,并开启他的服务. 可以在这里下载https://github.com/dmajkic/redis/downloads. 我用的是64位的,解压后的结 ...

  8. SSL+socket详解

    转自:http://hengstart.iteye.com/blog/842529 一.        SSL概述 SSL协议采用数字证书及数字签名进行双端实体认证,用非对称加密算法进行密钥协商,用对 ...

  9. mongodb type it for more

    当使用MongoChef Core 链接mongodb的时候 ,需要查看更多的数据时候,系统提示  type it for more 可以设置系统参数 DBQuery.shellBatchSize = ...

  10. 自定义UICollectionView

    1.创建一个UICollectionView工程,点击鼠标右侧按钮选择New File->Cocoa Class->点击Next,Class选项填写一个合理的名称,如:MyCollecti ...