基于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 calc()会计算属性详解
Feb 27 HTML / CSS
CSS3五个技巧给你的网站带来出色的效果
Apr 02 HTML / CSS
CSS3哪些新特性值得称赞
Mar 02 HTML / CSS
使用CSS3滤镜的filter:blur属性制作毛玻璃模糊效果的方法
Jul 08 HTML / CSS
纯CSS3大转盘抽奖示例代码(响应式、可配置)
Jan 13 HTML / CSS
HTML5中canvas中的beginPath()和closePath()的重要性
Aug 24 HTML / CSS
HTML5 Canvas之测试浏览器是否支持Canvas的方法
Jan 01 HTML / CSS
用canvas画心电图的示例代码
Sep 10 HTML / CSS
HTML5中外部浏览器唤起微信分享
Jan 02 HTML / CSS
AmazeUI 导航条的实现示例
Aug 14 HTML / CSS
CSS 使用 resize 实现图片拖拽切换预览功能(强大功能)
Aug 23 HTML / CSS
CSS 实现角标效果的完整代码
Jun 28 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
经典的星际争霸,满是回忆的BGM
2020/04/09 星际争霸
PHP仿盗链代码
2012/06/03 PHP
php中cookie实现二级域名可访问操作的方法
2014/11/11 PHP
PHP转盘抽奖接口实例
2015/02/09 PHP
laravel ORM 只开启created_at的几种方法总结
2018/01/29 PHP
实例讲解PHP表单
2020/06/10 PHP
将HTML自动转为JS代码
2006/06/26 Javascript
autoPlay 基于jquery的图片自动播放效果
2011/12/07 Javascript
JavaScript实现的in_array函数
2014/08/27 Javascript
封装了jQuery的Ajax请求全局配置
2015/02/05 Javascript
javascript断点调试心得分享
2016/04/23 Javascript
标准的js无缝滚动效果
2016/08/30 Javascript
jquery实现输入框实时输入触发事件代码
2016/12/21 Javascript
利用Query+bootstrap和js两种方式实现日期选择器
2017/01/10 Javascript
js实现抽奖效果
2017/03/27 Javascript
VS Code转换大小写、修改选中文字或代码颜色的方法
2017/12/15 Javascript
浅谈Vue下使用百度地图的简易方法
2018/03/23 Javascript
Angularjs实现数组随机排序的方法
2018/10/02 Javascript
JavaScript禁用右键单击优缺点分析
2019/01/20 Javascript
基于Vue的商品主图放大镜方案详解
2019/09/19 Javascript
小程序websocket心跳库(websocket-heartbeat-miniprogram)
2020/02/23 Javascript
[01:10:27]DOTA2-DPC中国联赛正赛 SAG vs XG BO3 第二场 3月5日
2021/03/11 DOTA
Python Tkinter基础控件用法
2014/09/03 Python
Python实现的从右到左字符串替换方法示例
2018/07/06 Python
Python实现聊天机器人的示例代码
2018/07/09 Python
新手如何发布Python项目开源包过程详解
2019/07/11 Python
python搜索包的路径的实现方法
2019/07/19 Python
Numpy 中的矩阵求逆实例
2019/08/26 Python
Anaconda+Pycharm环境下的PyTorch配置方法
2020/03/13 Python
Python pip安装模块提示错误解决方案
2020/05/22 Python
SEPHORA新西兰官方网站:购买化妆品和护肤品
2016/12/02 全球购物
生产部厂长助理职位说明书
2014/03/03 职场文书
三好生演讲稿
2014/09/12 职场文书
一波干货,会议主持词开场白范文
2019/05/06 职场文书
浅谈Python协程asyncio
2021/06/20 Python
Python 中的 copy()和deepcopy()
2021/11/07 Python