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 相关文章推荐
xmlHTTP实例
Oct 24 Javascript
JQuery操作元素的css样式
Mar 09 Javascript
jQuery实现hover合成事件的方法
Aug 06 Javascript
JS实现表单中checkbox对勾选中增加边框显示效果
Aug 21 Javascript
轻松学习jQuery插件EasyUI EasyUI创建RSS Feed阅读器
Nov 30 Javascript
简单介绍JavaScript数据类型之隐式类型转换
Dec 28 Javascript
JavaScript中的原型继承基础学习教程
May 06 Javascript
JavaScript程序中的流程控制语句用法总结
May 23 Javascript
bootstrap输入框组使用方法
Feb 07 Javascript
JavaScript解决浮点数计算不准确问题的方法分析
Jul 09 Javascript
微信小程序实现签字功能
Dec 23 Javascript
JavaScript图片旋转效果实现方法详解
Jun 28 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 一个页面执行时间类代码
2010/03/05 PHP
对象失去焦点时自己动提交数据的实现代码
2012/11/06 PHP
Yii2.0预定义的别名功能小结
2016/07/04 PHP
PHP判断表达式中括号是否匹配的简单实例
2016/10/22 PHP
基于CI(CodeIgniter)框架实现购物车功能的方法
2018/04/09 PHP
js数字输入框(包括最大值最小值限制和四舍五入)
2009/11/24 Javascript
封装的原生javascript弹出层代码
2010/09/24 Javascript
JS获取页面窗口大小的代码解读
2011/12/01 Javascript
js 得到文件后缀(通过正则实现)
2013/07/08 Javascript
用javascript判断IE版本号简单实用且向后兼容
2013/09/11 Javascript
Jquery Post处理后不进入回调的原因及解决方法
2014/07/15 Javascript
jquery实现侧边弹出的垂直导航
2014/12/09 Javascript
JS扩展类,克隆对象与混合类实例分析
2016/11/26 Javascript
JSON键值对序列化和反序列化解析
2017/01/24 Javascript
Vue.js中用webpack合并打包多个组件并实现按需加载
2017/02/17 Javascript
ZeroClipboard.js使用一个flash复制多个文本框
2017/06/19 Javascript
如何以Angular的姿势打开Font-Awesome详解
2018/04/22 Javascript
详解JavaScript函数callee、call、apply的区别
2019/03/08 Javascript
javascript异步编程的六种方式总结
2019/05/17 Javascript
js实现表格数据搜索
2020/08/09 Javascript
[41:52]DOTA2-DPC中国联赛 正赛 CDEC vs Dynasty BO3 第二场 2月22日
2021/03/11 DOTA
详解Python中的strftime()方法的使用
2015/05/22 Python
Python解析最简单的验证码
2016/01/07 Python
让python在hadoop上跑起来
2016/01/27 Python
Python3.4解释器用法简单示例
2019/03/22 Python
使用Python OpenCV为CNN增加图像样本的实现
2019/06/10 Python
Pandas透视表(pivot_table)详解
2019/07/22 Python
python-tornado的接口用swagger进行包装的实例
2019/08/29 Python
Python 类的魔法属性用法实例分析
2019/11/21 Python
python 画函数曲线示例
2019/12/04 Python
Python pip使用超时问题解决方案
2020/08/03 Python
妇女儿童发展规划实施方案
2014/03/16 职场文书
2014年财务人员工作总结
2014/11/11 职场文书
2014年度考核工作总结
2014/12/24 职场文书
一文读懂go中semaphore(信号量)源码
2021/04/03 Golang
MySQL表的增删改查(基础)
2021/04/05 MySQL