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


Posted in Javascript onMarch 22, 2013

功能很实用,代码非常的简单

效果1.

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

jQuery+CSS实现菜单滑动伸展收缩(仿淘宝)
样式代码如下:

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-decoration:underline; 
color:red 
} 
.box_all{ 
overflow:hidden; 
width:350px; 
font-family:"微软雅黑"; 
font-size:14px; 
border:1px solid #EEEEEE; 
border-top:2px solid #F57A04; 
padding:0 0 10px 0; 
margin:0 auto 
} 
.box{ 
padding-left:45px; 
padding-top:5px 
} 
.box li{ 
line-height:20px; 
margin-right:30px; 
width:120px; 
text-align:left; 
float:left; 
list-style-type:none 
} 
.boxdown{ 
cursor:pointer; 
border:1px solid #EEEEEE; 
width:60px; 
height:14px; 
background:#FFFFFF url(../images/down.png) no-repeat 20px; 
margin-left:150px; 
margin-top:-2px; 
border-top:none; 
margin:0 auto 
} 
.up{ 
cursor:pointer; 
border:1px solid #EEEEEE; 
width:60px; 
height:14px; 
background:#FFFFFF url(../images/up.png) no-repeat 20px; 
margin-left:150px; 
margin-top:-2px; 
border-top:none; 
margin:0 auto 
}

js主要代码如下:
$(document).ready(function(){ 
var a =$(".box ul li:gt(3):not(:last)"); 
a.hide(); 
$(".boxdown").click(function(){ 
if(a.is(':visible')){ 
a.slideUp('fast'); 
$(this).removeClass('up'); 
}else{ 
a.slideDown('fast').show(); 
$(this).addClass('up'); 
} 
}); 
});
Javascript 相关文章推荐
JavaScript SetInterval与setTimeout使用方法详解
Nov 15 Javascript
iscroll碰到Select无法选择下拉刷新的解决办法
May 21 Javascript
关于JS中setTimeout()无法调用带参函数问题的解决方法
Jun 21 Javascript
JavaScript中cookie工具函数封装的示例代码
Oct 11 Javascript
怎样判断jQuery当前元素是隐藏还是显示
Nov 23 Javascript
jQuery序列化后的表单值转换成Json
Jun 16 jQuery
weex slider实现滑动底部导航功能
Aug 28 Javascript
详解为Bootstrap Modal添加拖拽的方法
Jan 05 Javascript
快速搭建vue2.0+boostrap项目的方法
Apr 09 Javascript
产制造追溯系统之通过微信小程序实现移动端报表平台
Jun 03 Javascript
Vue数据驱动表单渲染,轻松搞定form表单
Jul 19 Javascript
解决vue项目中某一页面不想引用公共组件app.vue的问题
Aug 14 Javascript
使用JavaScript构建JSON格式字符串实现步骤
Mar 22 #Javascript
鼠标滚轮控制网页横向移动实现思路
Mar 22 #Javascript
JQuery实现用户名无刷新验证的小例子
Mar 22 #Javascript
jquery文字上下滚动的实现方法
Mar 22 #Javascript
JS模块与命名空间的介绍
Mar 22 #Javascript
JS在textarea光标处插入文本的小例子
Mar 22 #Javascript
JavaScript 验证码的实例代码(附效果图)
Mar 22 #Javascript
You might like
php通过PHPExcel导入Excel表格到MySQL数据库的简单实例
2016/10/29 PHP
jquery的Tooltip插件 qtip使用详细说明
2010/09/08 Javascript
js去空格技巧分别去字符串前后、左右空格
2013/10/21 Javascript
让table变成exls的示例代码
2014/03/24 Javascript
window.location.href的用法(动态输出跳转)
2014/08/09 Javascript
常用的jquery模板插件——jQuery Boilerplate介绍
2014/09/23 Javascript
简介AngularJS的视图功能应用
2015/06/17 Javascript
简述AngularJS相关的一些编程思想
2015/06/23 Javascript
JS+CSS实现的简单折叠展开多级菜单效果
2015/09/12 Javascript
一不小心就做错的JS闭包面试题
2015/11/25 Javascript
jquery.cookie.js实现用户登录保存密码功能的方法
2016/04/15 Javascript
使用jquery.qrcode.js生成二维码插件
2016/10/17 Javascript
jquery仿京东侧边栏导航效果
2017/03/02 Javascript
常用的js方法合集
2017/03/10 Javascript
webpack踩坑之路图片的路径与打包
2017/09/05 Javascript
axios中cookie跨域及相关配置示例详解
2017/12/20 Javascript
js 实现 list转换成tree的方法示例(数组到树)
2019/08/18 Javascript
vue 实现移动端键盘搜索事件监听
2019/11/06 Javascript
微信小程序实现比较功能的方法汇总(五种方法)
2020/03/07 Javascript
JS Html转义和反转义(html编码和解码)的实现与使用方法总结
2020/03/10 Javascript
深入理解python中的浅拷贝和深拷贝
2016/05/30 Python
django中的setting最佳配置小结
2017/11/21 Python
基于DataFrame筛选数据与loc的用法详解
2018/05/18 Python
selenium+python 对输入框的输入处理方法
2018/10/11 Python
在cmder下安装ipython以及环境的搭建
2018/10/19 Python
tornado+celery的简单使用详解
2019/12/21 Python
HTML5 Canvas图像模糊完美解决办法
2018/02/06 HTML / CSS
大学生职业生涯规划书模板
2014/01/03 职场文书
文明之星事迹材料
2014/05/09 职场文书
电气自动化求职信
2014/06/24 职场文书
医院护士党的群众路线教育实践活动对照检查材料思想汇报
2014/10/04 职场文书
党员个人剖析材料(四风问题)
2014/10/07 职场文书
公安机关纪律作风整顿剖析
2014/10/10 职场文书
幼儿园感恩节活动总结
2015/03/24 职场文书
2015年乡镇妇联工作总结
2015/05/19 职场文书
Python中json.load()和json.loads()有哪些区别
2021/06/07 Python