基于HTML5代码实现折叠菜单附源码下载


Posted in HTML / CSS onNovember 27, 2015

基于html5代码实现折叠菜单附源码下载。效果图如下所示,喜欢的亲们还可以下载源码哦!

效果展示   源码下载

hmtl代码

复制代码
代码如下:

<div class="container">
<div class="card-drop">
<a class='toggle' href="#">
<i class='fa fa-suitcase'></i>
<span class='label-active'>爱编程</span>
</a>
<ul>
<li class='active'>
<a data-label="Everyting" href="#"><i class='fa fa-suitcase'></i> 爱编程</a>
</li>
<li>
<a data-label="Design" href="#"><i class='fa fa-magic'></i> jQuery特效</a>
</li>
<li>
<a data-label="UI-UX" href="#"><i class='fa fa-bolt'></i> CSS3特效</a>
</li>
<li>
<a data-label="Print" href="#"><i class='fa fa-tint'></i> HTML5特效</a>
</li>
<li>
<a data-label="Photography" href="#"><i class='fa fa-camera-retro'></i> 音效下载</a>
</li>
<li>
<a data-label="Photography" href="#"><i class='fa fa-camera-retro'></i> flash动画</a>
</li>
</ul>
</div>
</div>

js代码:

复制代码
代码如下:

(function ($) {
var cards = $('.card-drop'), toggler = cards.find('.toggle'), links = cards.find('ul>li>a'), li = links.parent('li'), count = links.length, width = 100;
li.each(function (i) {
$(this).css('z-index', count - i);
});
function setClosed() {
li.each(function (index) {
$(this).css('top', index * 4).css('width', width - index * 0.5 + '%').css('margin-left', index * 0.25 + '%');
});
li.addClass('closed');
toggler.removeClass('active');
}
setClosed();
toggler.on('mousedown', function () {
var $this = $(this);
if ($this.is('.active')) {
setClosed();
} else {
$this.addClass('active');
li.removeClass('closed');
li.each(function (index) {
$(this).css('top', 60 * (index + 1)).css('width', '100%').css('margin-left', '0px');
});
}
});
links.on('click', function (e) {
var $this = $(this), label = $this.data('label');
icon = $this.children('i').attr('class');
li.removeClass('active');
if ($this.parent('li').is('active')) {
$this.parent('li').removeClass('active');
} else {
$this.parent('li').addClass('active');
}
toggler.children('span').text(label);
toggler.children('i').removeClass().addClass(icon);
setClosed();
e.preventDefault;
});
}(jQuery));
HTML / CSS 相关文章推荐
css3动画效果抖动解决方法
Sep 03 HTML / CSS
css3 条纹化和透明化表格Firefox下测试成功
Apr 15 HTML / CSS
纯css3实现的动画按钮的实例教程
Nov 17 HTML / CSS
CSS3的resize属性使用初探
Sep 27 HTML / CSS
CSS3 实现童年的纸飞机
May 05 HTML / CSS
canvas实现图片马赛克的示例代码
Mar 26 HTML / CSS
HTML5印章绘制电子签章图片(中文英文椭圆章、中文英文椭圆印章)
Jun 03 HTML / CSS
HTML5计时器小例子
Oct 15 HTML / CSS
用html5实现语音搜索框的方法
Mar 18 HTML / CSS
HTML5图片预览实例分享
Jun 04 HTML / CSS
Html5获取高德地图定位天气的方法
Dec 26 HTML / CSS
浅谈amaze-ui中datepicker和datetimepicker注意的几点
Aug 21 HTML / CSS
HTML5标签使用方法详解
Nov 27 #HTML / CSS
推荐WEB开发者最佳HTML5和CSS3代码生成器
Nov 24 #HTML / CSS
分享29个基于Bootstrap的HTML5响应式网页设计模板
Nov 19 #HTML / CSS
不可轻视HTML5!App三年内将被html5顶替彻底消失
Nov 18 #HTML / CSS
使用纯HTML5编写一款网页上的时钟的代码分享
Nov 16 #HTML / CSS
五个2015 年最佳HTML5 框架
Nov 11 #HTML / CSS
使用html5 canvas 画时钟代码实例分享
Nov 11 #HTML / CSS
You might like
基于empty函数的输出详解
2013/06/17 PHP
zf框架的校验器InArray使用示例
2014/03/13 PHP
PHP依赖倒置(Dependency Injection)代码实例
2014/10/11 PHP
PHP中array_slice函数用法实例详解
2014/11/25 PHP
php生成zip文件类实例
2015/04/07 PHP
PHP长网址与短网址的实现方法
2017/10/13 PHP
PHP实现数组和对象的相互转换操作示例
2019/03/20 PHP
div移动 输入框不能输入的问题
2009/11/19 Javascript
基于JQuery的密码强度验证代码
2010/03/01 Javascript
jQuery EasyUI中对表格进行编辑的实现代码
2010/06/10 Javascript
jquery聚焦文本框与扩展文本框聚焦方法
2012/10/12 Javascript
如何在JavaScript中实现私有属性的写类方式(一)
2013/12/04 Javascript
javascript实现简单的贪吃蛇游戏
2015/03/31 Javascript
JavaScript实现公历转农历功能示例
2017/02/13 Javascript
Angular2 http jsonp的实例详解
2017/08/31 Javascript
JavaScript表单即时验证 验证不成功不能提交
2017/08/31 Javascript
extjs图形绘制之饼图实现方法分析
2020/03/06 Javascript
[01:45]2014DOTA2 TI预选赛预选赛 战前探营!
2014/05/21 DOTA
[01:36:57]【09DOTA2第一视角】小骷髅
2014/04/16 DOTA
[57:29]Alliance vs KG 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/17 DOTA
初步探究Python程序的执行原理
2015/04/11 Python
python微信跳一跳游戏辅助代码解析
2018/01/29 Python
Python实现的基于优先等级分配糖果问题算法示例
2018/04/25 Python
Numpy之将矩阵拉成向量的实例
2019/11/30 Python
python画环形图的方法
2020/03/25 Python
HTML5本地存储之IndexedDB
2017/06/16 HTML / CSS
HTML5仿微信聊天界面、微信朋友圈实例代码
2018/01/29 HTML / CSS
WWE美国职业摔角官方商店:WWE Shop
2018/11/15 全球购物
网站域名和主机:Domain.com
2019/04/01 全球购物
物流管理毕业生自荐信
2013/10/24 职场文书
初中优秀教师事迹材料
2014/08/18 职场文书
贪污检举信范文
2015/03/02 职场文书
新员工试用期自我评价
2015/03/10 职场文书
《陶罐和铁罐》教学反思
2016/03/03 职场文书
2016年大学生党员承诺书
2016/03/24 职场文书
Redis做数据持久化的解决方案及底层原理
2021/07/15 Redis