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 相关文章推荐
jquery 图片预加载 自动等比例缩放插件
Dec 25 Javascript
JS对象与JSON格式数据相互转换
Feb 20 Javascript
JS动态添加与删除select中的Option对象(示例代码)
Dec 25 Javascript
动态加载js、css等文件跨iframe实现
Feb 24 Javascript
用jquery.sortElements实现table排序
May 04 Javascript
JS实现简易图片轮播效果的方法
Mar 25 Javascript
安装使用Mongoose配合Node.js操作MongoDB的基础教程
Mar 01 Javascript
在Html中使用Requirejs进行模块化开发实例详解
Apr 15 Javascript
Bootstrap每天必学之响应式导航、轮播图
Apr 25 Javascript
BooStrap对导航条的改造实践小结
Sep 21 Javascript
整理关于Bootstrap过渡动画的慕课笔记
Mar 29 Javascript
javascript中undefined的本质解析
Jul 31 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
在smarty中调用php内置函数的方法
2013/02/07 PHP
php使用COPY函数更新配置文件的方法
2015/06/18 PHP
PHP实现常用排序算法的方法
2020/02/05 PHP
用javascript作一个通用向导说明
2011/08/30 Javascript
ASP.NET jQuery 实例2 (表单中使用回车在TextBox之间向下移动)
2012/01/13 Javascript
jquery聚焦文本框与扩展文本框聚焦方法
2012/10/12 Javascript
js 回车提交表单两种实现方法
2012/12/31 Javascript
同域jQuery(跨)iframe操作DOM(实例讲解)
2013/12/19 Javascript
javascript实现验证身份证号的有效性并提示
2015/04/30 Javascript
JavaScript的9种继承实现方式归纳
2015/05/18 Javascript
jQuery mobile 移动web(4)
2015/12/20 Javascript
jQuery UI Grid 模态框中的表格实例代码
2017/04/01 jQuery
bootstrap datepicker插件默认英文修改为中文
2017/07/28 Javascript
JS实现的简单下拉框联动功能示例
2018/05/11 Javascript
JavaScript实现身份证验证代码实例
2019/08/26 Javascript
JavaScript 面向对象基础简单示例
2019/10/02 Javascript
简单实现节流函数和防抖函数过程解析
2019/10/08 Javascript
javascript实现弹幕墙效果
2019/11/28 Javascript
[52:10]LGD vs Optic Supermajor小组赛D组胜者组决赛 BO3 第二场 6.3
2018/06/04 DOTA
[38:32]完美世界DOTA2联赛循环赛 Forest vs DM 第二场 11.06
2020/11/06 DOTA
TensorFlow利用saver保存和提取参数的实例
2018/07/26 Python
Python中按键来获取指定的值
2019/03/02 Python
python3.6生成器yield用法实例分析
2019/08/23 Python
Python从文件中读取指定的行以及在文件指定位置写入
2019/09/06 Python
记一次pyinstaller打包pygame项目为exe的过程(带图片)
2020/03/02 Python
Python json读写方式和字典相互转化
2020/04/18 Python
tensorflow基于CNN实战mnist手写识别(小白必看)
2020/07/20 Python
Python接口自动化测试的实现
2020/08/28 Python
python 提高开发效率的5个小技巧
2020/10/19 Python
Maje德国官网:法国女性成衣品牌
2017/02/10 全球购物
韩都衣舍天猫官方旗舰店:天猫女装销售总冠军
2017/10/10 全球购物
战友聚会邀请函
2014/01/18 职场文书
2014年酒店服务员工作总结
2014/12/08 职场文书
小学数学教师研修感悟
2015/11/18 职场文书
Python+Tkinter打造签名设计工具
2022/04/01 Python
Vue ECharts实现机舱座位选择展示功能
2022/05/15 Vue.js