基于jquery实现后台左侧菜单点击上下滑动显示

今天做了一个左侧菜单的效果，做后台的时候应该会经常用到这个效果的,代码同样是简洁明了，复制即可用：
效果图如下：
 
代码如下：（这个上下箭头的图标如上，图标可自己换）


代码如下:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>后台左侧菜单点击上下滑动显示jquery</title>
<script type="text/javascript" src="http://jt.875.cn/js/jquery.js"></script>
<script type="text/javascript">
$(function(){
$(".box dt:first").addClass("active");
$(".box dd:not(:first)").hide();
$(".box dt").click(function(){
$(this).next("dd").slideToggle()
.siblings("dd").slideUp();
$(this).toggleClass('active')
.siblings("dt").removeClass("active");
});
});
</script>
<style type="text/css">
* { padding:0; margin:0; }
body { padding:100px; font:12px "宋体"; }
dl,dt,dd{list-style:none;}
.box { width:500px; border-bottom:1px solid #CCC; }
.box dt { height:30px; line-height:30px; padding:0 10px; font-size:12px; cursor:pointer; border:1px solid #ccc; border-bottom:none; background:#eee url(img/bg.gif) no-repeat right -27px; }
.box dt.active { background-position:right 7px; }
.box dd { border-left:1px solid #ccc; border-right:1px solid #ccc; padding:0 10px; }
.box dd p{line-height:20px; }
</style>
</head>
<body>
<div class="box">
<dl>
<dt>标题一</dt>
<dd>
<p><a href="#">第一项</a></p>
<p><a href="#">第二项</a></p>
<p><a href="#">第三项</a></p>
</dd>
<dt>标题二</dt>
<dd>
<p><a href="#">第一项</a></p>
<p><a href="#">第二项</a></p>
<p><a href="#">第三项</a></p>
</dd>
<dt>标题三</dt>
<dd>
<p><a href="#">第一项</a></p>
<p><a href="#">第二项</a></p>
<p><a href="#">第三项</a></p>
</dd>
<dt>标题四</dt>
<dd>
<p><a href="#">第一项</a></p>
<p><a href="#">第二项</a></p>
<p><a href="#">第三项</a></p>
</dd>
</dl>
</div>
</body>
</html>

赞 (0)

相关推荐

  • jquery背景跟随鼠标滑动导航

    jquery背景跟随鼠标滑动导航

    本文实例讲述了支持背景图片上下滑动的竖向jQuery菜单导航特效代码,分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="gb2312"> <title>左边跟随鼠标滑动导航</title> <meta name="keywords"

  • jQuery实现菜单感应鼠标滑动动画效果的方法

    本文实例讲述了jQuery实现菜单感应鼠标滑动动画效果的方法.分享给大家供大家参考.具体分析如下: 此代码测试环境为IE9 以及GG.FF浏览器,IE8及以下浏览器可能不支持,希望理解. 这款JS鼠标滑动效果使用jQuery实现简单动画的方法,而且也惊喜的发现,jquery有更好的书写方法,可以连写,在animate方法前加上stop方法就可实现鼠标移出后,不再执行滑动效果. 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T

  • jQuery+CSS实现菜单滑动伸展收缩(仿淘宝)

    jQuery+CSS实现菜单滑动伸展收缩(仿淘宝)

    功能很实用,代码非常的简单 效果1. 效果2. 样式代码如下: 复制代码 代码如下: body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,br,pre,form,fieldset,input,textarea,p,blockquote,th,td{ margin:0; padding:0 } span{ color:#FF2B13 } a{ text-decoration:none; color:#515050 } a:hover{ text-decorat

  • 用jquery写的菜单从左往右滑动出现

    用jquery写的菜单从左往右滑动出现

    最近,刚好在研究微网站的制作,查阅了大量的资料都是关于微信3平台开发教程,几乎没有这类的介绍,不过都是第三方平台提供模板制作微站而已,后来很感谢柳峰博客最后写的微网站的解惑, "什么是微网站? 微网站是新瓶装老酒,被一些搞营销的人给神化了,以至于很多开发者都在问什么是微网站,如何开发微网站.微网站本质上就是以微信浏览器为入口的手机网站(Web APP),能够兼容Android.iOS.WP等操作系统.开发微网站用到的技术与开发普通网站一样,都是基于HTML(HTML5).CSS.Javascri

  • jQuery实现菜单式图片滑动切换

    jQuery实现菜单式图片滑动切换

    jQuery菜单式图片滑动切换是一款天猫官方网站的鼠标滑过图片切换导航菜单特效. 复制代码 代码如下: $(function(){     // floorCon-slide     $(".floorCon-slide .floorConSlideImgNav li span").css({opacity:0.95})     $(".floorCon-slide .floorConSlideImgNav li.hover").find("span&qu

  • 基于jquery实现百度新闻导航菜单滑动动画

    基于jquery实现百度新闻导航菜单滑动动画

    本文实例为大家分享jquery实现百度新闻导航菜单滑动动画,供大家参考,具体内容如下 思路与步骤 1.利用UL创建简单横向导航: <!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/199

  • jQuery蓝色风格滑动导航栏代码分享

    jQuery蓝色风格滑动导航栏代码分享

    这是一款基于jQuery蓝色风格滑动导航栏特效源码,实现滑块跟随鼠标左右滑动,和一般的导航相比很有动感,是一段超酷的导航栏滑动代码. 使用方法: 1.依次引入 nicenav.css.jQuery脚本库以及 jquery.nicenav.js 文件: 2.复制代码到页面中即可. 3.可以在代码中的 $.nicenav( )括号中设置滑块的滑动速度. 源码下载地址 为大家分享的jQuery蓝色风格滑动导航栏代码如下 <head> <style type="text/css&quo

  • jQuery弹性滑动导航菜单实现思路及代码

    jQuery弹性滑动导航菜单实现思路及代码

    复制代码 代码如下: <!-- 本文参照了该作者的思路:http://runjs.cn/code/ouvvjqka,jquery代码系另外编写 --> <!-- 本文出自:http://blog.csdn.net/liuyanzhi08 --> <!-- 实现思路: CSS:用一个绝对定位的div作为动画滑块,改变它的left属性来呈现动画效果 javascript:hover()触发移动鼠标到导航nav的动作,和移出导航nav的动作(即返回到current导航) -->

  • Jquery网页内滑动缓冲导航的实现代码

    如果网页过长,需要页内导航的时候,我们一般是在目标出设置ID,比如<div id="footer"></div>,然后在当前页面某个链接地址设置如:<a href="#footer">点击指向到底部</a>,这样点击该链接后就会马上转到网页底部,默认是直接转到底部,有的访客会莫名其妙,怎么突然就到底部了. 在越来越关注用户体验的今天,这点我们要解决,下面就是一段简单的Jquery代码,实现滑动缓冲的方式实现页内导航,用

  • 基于jquery实现后台左侧菜单点击上下滑动显示

    基于jquery实现后台左侧菜单点击上下滑动显示

    今天做了一个左侧菜单的效果,做后台的时候应该会经常用到这个效果的,代码同样是简洁明了,复制即可用:效果图如下: 代码如下:(这个上下箭头的图标如上,图标可自己换) 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>后台左侧

  • 基于jquery实现的树形菜单效果代码

    基于jquery实现的树形菜单效果代码

    本文实例讲述了基于jquery实现的树形菜单效果代码.分享给大家供大家参考.具体如下: 这是一款基于jquery实现的树形菜单代码,点击菜单项可以向下滑出对应的二级菜单,效果流畅自然. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-tree-style-show-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E

  • 基于jQuery代码实现圆形菜单展开收缩效果

    废话不多说了,直接给大家贴代码了,具体代码如下所示: <head> <script src="js/jquery.min.js"></script> <script src="js/jquery.menu.js"></script> <style> body { margin:0 auto; background:none repeat scroll 0 0 #FCFCFC } .outer_c

  • 基于jquery实现无限级树形菜单

    基于jquery实现无限级树形菜单

    本文实例为大家分享了基于jquery实现无限级树形菜单效果,具有一定的参考价值,具体内容如下 效果图: 实现代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无限级树形菜单</title> </head> <script src="jque

  • 基于jQuery倾斜打开侧边栏菜单特效代码

    基于jQuery倾斜打开侧边栏菜单特效代码

    基于jQuery多重图片无限循环动画效果.这是一款非常实用的jQuery多图片无限循环动画特效插件. 效果图如下: 在线预览    源码下载 html代码: <div id="paper-back"> <nav> <div class="close"></div> <a href="#">Home</a> <a href="#">About U

  • 基于Jquery代码实现手风琴菜单

    基于Jquery代码实现手风琴菜单

    先给大家展示效果图: 先看页面代码,列表的嵌套: <div id="menuDiv"> <ul id="menu"> <li class="parentLi"> <span>B</span> <ul class="childrenUl"> <li class="childrenLi"><span>C</sp

  • layui实现左侧菜单点击右侧内容区显示

    layui实现左侧菜单点击右侧内容区显示

    layui这个前端框架对后端人员来说提供了极大的方便,很大一部分同学在刚接触到这个框架就迫不及待的要动手实践了,刚好最近需要开发一个后台管理项目,就拿layui来进行学习和实践. 还没有接触到的同学可以先通读一遍文档,这样在遇到问题的时候才能够对症下药,仔细研究相关的板块 今天我们先来学习一下使用layui来实现左侧点击菜单,内容区显示tab 实验效果 实现过程 html代码 <!DOCTYPE html> <html lang="en"> <head&g

  • 基于jquery的二级联动菜单实现代码

    jQuery 1.3.2 简单实现select二级联动 复制代码 代码如下: <!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

  • js实现的后台左侧管理菜单代码

    js实现的后台左侧管理菜单代码

    本文实例讲述了js实现的后台左侧管理菜单代码.分享给大家供大家参考.具体如下: 这是一个完美的后台左侧管理菜单,从样式来说,貌似出自专业人士之手,风格清新,操作实用,用在WEB管理系统中或用在网站后台管理中,最恰当不过了. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-left-main-menu-style-codes/ 具体代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Tra

  • 基于Jquery制作图片文字排版预览效果附源码下载

    基于Jquery制作图片文字排版预览效果附源码下载

    基于jQuery图文排版图片预览特效.这是一款基于jQuery+CSS3实现的鼠标点击图片弹出画廊切换特效. 效果图如下所示,怎么样感兴趣吗,感兴趣的朋友继续往下学习哦. 效果演示    源码下载 html代码: <div id="fullscreen"> <div id="fullscreen-inner"> <div id="fullscreen-inner-left" class="fullscree

随机推荐