html5折叠卡片,基于HTML5折叠卡片式下拉菜单代码

基于HTML5折叠卡片式下拉菜单代码。这是一款基于jQuery+CSS3+HTML5实现的下拉列表框特效代码。效果图如下:

3a923cd51b4d769c40ea2a02c105dcb7.png

实现的代码。

hmtl代码:

爱编程

  • 爱编程

  • jQuery特效

  • CSS3特效

  • HTML5特效

  • 音效下载

  • flash动画

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));

201603282312454295.jpg

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/533294.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

fastexcel读取excel追加写入sheet页_python笔记52:python操作excel

主要内容:小目标:掌握excel模块主要内容:excel相关模块,openpyxl安装使用如果看完这篇文章,你还是弄不明excel相关操作; 你来找我,我保证不打你,我给你发100的大红包。1. excel相关操…

HTML音乐播放没声音,网页没有声音但系统显示有声音怎么回事?如何解决?

网友提问:为什么网页没有声音,除了迅雷高清在线影院的视频有声音和本已经下载的歌或视频有声音外,其他网页都没有声音!就是网页没声音,其他一切正常!网页没有声音但系统显示有声音;网页在线视频…

html层次选择器例题,详解强大的jQuery选择器之基本选择器、层次选择器

jQuery允许开发者使用从CSS1到CSS3几乎所有的选择器,以及jQuery独创的高级而复杂的选择器。另外还可以加入插件使其支持XPath选择器,甚至开发者可以编写属于自己的选择器(即选择器插件,参考上篇:jQuery插件原来如此简单——jQuery…

cesium 经纬度绘制点_炫酷大屏地图自定义绘制(一)

现在数据中台的概念炒的火热,那在收集到数据后就要想办法去设计大屏,可视化展现。往往大屏都会涉及到地理位置的显示。对于常见的省市区,网上都已经提供了地理json数据,那对于需要定制化的我们要怎么处理呢?首先我们还…

关于python语言和人工智能下哪个说法不正确_“在资源管理器”窗口中,文件夹图标左侧有“...

【单选题】表示串行数据传输速率的指标为:___。【单选题】串行口工作在方式0时,其波特率:___。【简答题】发布混合碱含量的测定三个锥形瓶的滴定终点颜色【简答题】将自己做的三个锥形瓶的滴定终点颜色拍照发上来(三个瓶子并排摆在白色托盘中)【单选题】Guido van Rossum正式对…

html瞄点四大名著有图片,四大名著手抄报图片图和文字资料

四大名著之【三国演义】罗贯中(1330年一1400年之间),名本,号湖海散人,明代通俗小说家。他的籍贯一说是太原(今山西),一说是钱塘(今浙江杭州),不可确考。据传说,罗贯中曾充任过元末农民起义军张士诚的幕客&a…

shell181网格划分_ANSYS软件中SHELL181单元参数详解(1)

SHELL181单元说明SHELL181单元适合对薄的到具有一定厚度的壳体结构进行分析。它是一个4结点单元,每个结点具有6个自由度:x,y,z方向的位移自由度和绕X,Y,Z轴的转动自由度。(如果应用了薄膜选项的话,那该单元则只有移动自由度了)。简并三角形选…

怎样查询2021高考模拟成绩,2021年高三一模二模三模哪个成绩更接近高考成绩,看看网友是怎么评论...

2021年高三一模二模三模哪个成绩更接近高考成绩虽然大多数人认为一模的成绩最接近高考,基本定型了,但高考变幻莫测,成绩很有可能发生变化,成绩升降都是很难说的。高三一模之后成绩也没有定型,还有最后逆转的机会。高考…

lisp 标记形心_标记-整理算法

定义该算法分为标记和整理两个阶段,标记阶段会遍历并标记活动对象,整理阶段通过数次搜索堆来重新装填活动对象,它们聚集到了堆的一端。lisp2算法forwarding指针表示活动对象的目标地址过程概要初始状态标记结束后整理结束后整理阶段伪代码com…

js遍历json数组给html td赋值,JS实现给json数组动态赋值的方法示例

关注微信公众号JS实现给json数组动态赋值的方法示例转载 更新时间:2017年07月04日 10:19:00 作者:小魏的马仔这篇文章主要介绍了JS实现给json数组动态赋值的方法,结合实例形式分析了javascript针对json数组的遍历、赋值等常用操作技巧,需要的朋友可以…

甘肃民族师范学院计算机科学系,甘肃民族师范学院计算机科学与技术专业2016年在甘肃理科高考录取最低分数线...

类似问题答案衡阳师范学院计算机科学与技术专业2016年在甘肃理科高考录取最低分数线学校 地 区 专业 年份 批次 类型 分数 衡阳师范学院 甘肃 计算机科学与技术 2016 二批 理科 448 学校 地 区 专业 年份 批次 类型 分数 衡阳师范学院 甘肃 计算机科学与技术 2016 二批 理科 44…

python面试题百度云下载_分享三道Python经典面试题

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼验证邮箱格式验证邮箱的格式,不同语言的实现大同小异,通过正则表达式是最快捷的匹配方式,但对于不熟悉正则的同学看着一长串匹配符还是比较头痛的,其实也没那么恐怖。熟悉python 中正…

计算机科学与技术专业实习招聘,中科院研究生院招聘GIS或计算机专业实习生

中科院研究生院招聘GIS或计算机专业实习生由于项目需要,中科院研究生院特招聘GIS或计算机方向实习生,具体要求如下:项目名称:油气田WebGIS系统招聘人数:1人(目前已有1人)主要工作是根据油气田生产需要,实现WebGIS支持下…

r语言regexpr函数_R语言学习笔记-文本挖掘之字符处理(1)

在挖掘分析的过程当中对字符串的处理是极为重要的,且出现也较为频繁,R语言作为当前最为流行的开源数据分析和可视化平台,虽然文本的处理并不是它的强项, 但是R语言还是包含大量的字符串操作工具,本章着重整理了部分常用字符处理函…

html div如何列对其,CSS:自适应N列布局如何解决两端对齐

关于每行N列的这种布局,存在一个两端对齐的问题,因为每一列都会存在一个margin-left或者margin-right,导致最后一个超出父元素的边界。通过一番努力,终于解决了这个遗留很久的问题,废话不多说,先看做完之后…

v380智能快配连接不上怎么办_Win7系统电脑设置连接远程桌面的操作方法

Win7系统电脑远程桌面无法连接怎么办?Win7怎么设置连接远程桌面?请看下文具体操作步骤。一般情况下,对Win7的远程连接只需要5步即可完成远程连接的设置:1)查询并记录远程计算机的IP,开始——运行——输入cmd&#xff0…

计算机专业买win,新买的电脑是win10系统,有的人却费尽心思重装成win7,为什么呢...

简单地说,现在的新电脑几乎都是最新的windows系统,而厂商通常预装的是windows10家庭版,虽说没有多强的功能,但也能够满足我们日常使用的需求。重要的是预装的win10系统是正版的!但不难发现,即便是正版的win…

wireshark网卡权限_网络分析系列之六_Wireshark安装

Wireshark对常见操作系统都支持安装,包括Windows系统、Mac OS X以及基于Linux的系统。你可以在Wireshark的官方网站上,查找所有 Wireshark支持安装的操作系统列表,以及系统版本和硬件要求信息。Wireshark安装系统支持和要求截止Wireshark版本…

c# 替换html注释,C# 替换div标签

C# 替换div标签0fillm2013.11.06浏览24次分享举报estyle"BORDER-BOTTOM: #ccc 1px solid; BORDER-LEFT: #ccc 1px solid; WIDTH: 300px; HEIGHT: 200px; BORDER-TOP: #ccc 1px solid; BORDER-RIGHT: #ccc 1px solid"iddivMediaPlayer>codebase,http://download.ma…

使用物理硬盘_硬盘坏道的几种非专业修复方法介绍

在使用计算机的过程中,我们最担心的就是硬盘出现故障,因为一旦硬盘出现故障就意味着我们的数据受到了严重的威胁。在诸多的硬盘故障中,硬盘坏道是最常见也是最让人头疼的故障之一了。硬盘坏道介绍:引起坏道的原因很多,…