html5 手风琴菜单

因为项目需要,现在需要做个手风琴菜单,于是自己就瞎整了一下,所用只是less.js javascript jquery效果如图: 具体代码如下: <!DOCTYPE html> <html> <head> <title></title> <style type="text/less"> .list{ list-style-image: url(../imag…

查看效果:http://keleyi.com/keleyi/phtml/menu/5.htm 本菜单的HTML代码和JS代码都简洁,完整源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3…

精选10款超酷的HTML5/CSS3菜单

今天向大家精选了10款超酷的HTML5/CSS3菜单,给你的网页添加不一样的精彩,一起来围观一下吧. 1.CSS3手风琴菜单下拉展开带弹性动画利用CSS3技术可以实现各种各样的网页菜单,我们之前也在CSS3菜单栏目中分享了许多CSS3菜单.今天我们分享的这款是CSS3手风琴菜单,菜单项在展开和收缩的时候菜单项会有弹性动画效果.每一层父级菜单有一个小三角,菜单项在展开的时候这个小三角也会出现动画,非常酷. 在线演示源码下载 2.CSS3动画下拉菜单带动画图标利用CSS3可以…

Angular.js+Bootstrap实现手风琴菜单

说是Angular.js+Bootstrap实现手风琴菜单,其实就是用了Bootstrap的样式而已. 上一篇实现了表格+分页,接着学习实现的Demo. 主要练习自定义指令,向指令中传递参数,老规矩先上效果图: <my-page ng-repeat="item in expanders" page-title="item.title">{{item.text}}</my-page> 上面是我自定义的指令,菜单存在标题和内容3条用了 ng-re…

UIKit的手风琴菜单，单条展开和多条同时展开

这个也要进来看看哈. 记得加多个属性时的用法就可以了. 因为官网提供太多的SAPMLE啦.. http://www.getuikit.net/docs/accordion.html <div class="uk-accordion" data-uk-accordion="{collapse: false,showfirst: false}"> 使用手风琴菜单,为容器元素添加 uk-accordion 类和 data-uk-accordion 属性就行.然…

简单jQuery 实现手风琴菜单

简单jQuery 实现手风琴菜单 css代码如下: *{ margin: 0; padding: 0; } #accordion{ width: 500px; } #accordion>div>p{ width: 500px; text-align: center; border: 1px solid #ccc; } #accordion>div>p>img{ width: 500px; height: 190px; } #accordion>div>div{…

jQuery手风琴菜单！！！！

jQuery手风琴菜单第一次发博客也不知道说点什么好,以前敲得一个手风琴菜单刚刚整理出来了,就来分享个大家手风琴的排版排版完事了,接下来就写样式吧,把自己喜欢的颜色或者是图片添加进来,就会变成你心中所想的一片天!!! 我没有用js原生写,个人比较喜欢jQuery,因为jQuery写出来的代码比较简洁,接下来就该写效果了,既然我们用的是jQuery,那么就应该先把jQuery的文件先引进来,才可以进行下面的工作.. jQuery代码里我们用了很多的单词在原生里没有见过,接下来我就给大家把每个…

如何用Mockplus快速做一个手风琴菜单？

手风琴菜单是一种比较常用的菜单形式,利用原型工具来做这种菜单通常要用到中继器.即使是功能强大的Axure,想实现该效果也比较麻烦.但如果你对Mockplus有所了解,你一定知道,利用Mockplus的“面板”组件,可以快速地做一个手风琴式的菜单. 我们来看看具体的操作步骤: 第一步:选择“面板”组件,自定义菜单样式. 在左侧的交互分类中选择“面板”组件,此处为了节省时间我在“面板”中添加一个列表.然后将带列表的面板复制两次.并将第二,第三个面板的名称改为“面板2”和“面板3” “面板”组件的…

炫酷实用的CSS3代码垂直手风琴菜单

今天在微博上看到别人分享的代码,自己拿来自己保存着. 代码效果如下: 下面是源码: index.html <!DOCTYPE html> <html > <head> <meta charset="UTF-8"> <title>炫酷实用的CSS3 3D垂直手风琴菜单DEMO演示</title> <link rel="stylesheet" href="css/style.css&…

Jquery UI accordion手风琴菜单

最近学习jQuery,总结了一些心得. 1.引用 <script type="text/javascript" src=jquery.js></script> 需要放在第一引用: 2.脚本的引用需要写<script></script>,不能够写<script />; 3.当调用jQuery的 Plugin 的时候,需要在 jQuery90.ready.function( '需要调用的plugin')写; 4.jQuery Ac…

js写的一个简单的手风琴菜单

1 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } div{ outline: 1px white solid; } #out{ width: 300px; height: 360px; position…

HTML CSS3 手风琴菜单

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="css/style.css" media="screen" type="text/css" /> </head> <body> <div style=&qu…

jQuery垂直手风琴菜单菜单项带小图标

在线演示本地下载…

jQuery多层级垂直手风琴菜单

在线演示本地下载…

CSS3展开带弹性动画的手风琴菜单

在线演示本地下载…

CSS3手风琴菜单可同时折叠多个菜单

在线演示本地下载…

jQuery 实现手风琴菜单

main.js $(function(){ var tmp = null, $title = $('.title'), $con = $('.title > ul'); $title.click(function(){ $(tmp).children('ul').slideUp().end().children('.arrow').removeClass('arrow-up'); $(this).children('ul').slideToggle().end().children('.arro…

jQuery扁平化风格手风琴菜单

在线演示本地下载…

jQuery实现多级手风琴树形下拉菜单（源码）

前几天因为公司的菜单要调整,公司的UI框架是不支持的,所以就自己在网上找了一个下拉菜单,可以支持多级菜单数据的,菜单数据是从xml文件中配置后读取的,网上有许多这方面的例子感觉不是很好用,就打了个包贴在园子里了.效果图片如下:…

jQuery 手风琴侧边菜单

动手做了一个简单手风琴菜单,上图: 点击 B 可收缩 C 列表,点击 C 改变自身和父节点 B 的样式,悬浮时均有不同的样式改变. 先看页面代码,列表的嵌套: <div id="menuDiv"> <ul id="menu"> <li class="parentLi"> <span>B</span> <ul class="childrenUl"> <…

bootstrap 菜单之手风琴效果

自己用bootstrap搭了个项目,纯属娱乐....为了检验学习bootstrap之成果. 效果如图: 一.搭建中发现一问题,因为以前测试都是写的html页面,这次用了母版页,点击页面的之后,页面会刷新,不会保留菜单选中状态解决办法:用js保留上次的值,页面刷新重新赋值.给当前选中菜单添加class属性in,a标签设置为选中状态. <script type="text/javascript"> $(function () { var divId = localStorag…

[转] CSS3垂直手风琴折叠菜单

[From] http://www.html5tricks.com/css3-ver-accordion-menu.html 之前我们已经分享过很多关于手风琴菜单了,有水平方向的,也有垂直方向的.今天要分享的这款CSS3垂直手风琴折叠菜单也非常不错,这款CSS3手风琴菜单的每一个菜单项都有小图标,而且只能有一项展开,更有意思的是,在菜单折叠和展开式右侧的箭头也会有不错的动画效果. 在线演示源码下载下面我们来一起看看实现这款手风琴折叠菜单的源代码以及实现思路,主要由HTML代码.CSS代码和jQ…

简单实用的二级树形菜单hovertree

原创 hovertree是一个仿京东的树形菜单jquery插件,暂时有银色和绿色两种. 官方网址:http://keleyi.com/jq/hovertree/欢迎下载使用查看绿色效果:http://keleyi.com/jq/hovertree/hovertreegreen.htm 可以设置菜单宽度(width),还可以设置是否最多只能有一个一级菜单展开(isCloseOther). isCloseOther的值为false 或者 true,设为true即成为手风琴菜单. 使用方法可以参考以…

19款绚丽实用的jQuery/CSS3侧边栏菜单

jQuery作为一款主流的JavaScript前端开发框架,深受广告开发者的亲睐,同时jQuery有着不计其数的插件,特别是菜单插件更为丰富,本文将要为大家介绍20个绚丽而实用的jQuery侧边栏菜单,这些侧边栏菜单可以用在不同风格的网页上,如果你觉得不错,也可以进入其下载页面下载菜单源代码. 1.jQuery 3D 垂直多级菜单可筛选菜单项这是一款手风琴样式的垂直多级菜单,其特点是利用CSS3特性让菜单外观显得3D立体的效果,同时你也可以在搜索框中输入关键字来筛选菜单项. 在线演示源码下…

10款web前端基于html5/CSS3应用特效

1.jQuery百叶窗效果焦点图多种百叶窗动画方式对于百叶窗动画效果,我们介绍的不是很多,目前就介绍过一款CSS3百叶窗图片切换.这次要给大家带来一个基于jQuery的多种百叶窗动画效果焦点图,焦点图的切换伴随随机的百叶窗动画,每一种百叶窗动画都非常精巧,当然你也可以定义自己的百叶窗动画,将其加入动画列表中. 在线演示源码下载 2.jQuery多层级垂直手风琴菜单之前我们分享过一款类似的jQuery垂直手风琴菜单CSS3手风琴菜单下拉展开带弹性动画,这次分享的这款手风琴菜单是多层级的,…

HTML5/jQuery动画应用 3D视觉效果

今天我们要来分享几款很酷的HTML5/CSS3动画应用,虽然不是HTML5 3D应用,但也有3D的视觉效果.HTML5结合jQuery,让网页应用变得更加强大了.一起来看看这些HTML5/jQuery动画应用吧. 1.HTML5 3D动画柱形图表这次我们要来分享一款效果非常酷的HTML5 3D柱形图表,这款HTML5图表和之前分享的都不一样,主要是外观上比较吸引人,首先图表是3D立体的,有一种非常棒的视觉效果:其次,当鼠标划过柱形图表时,会有很不错的HTML5动画效果. 在线演示源码下载 2…

7款HTML5的精美应用教程让你立即爱上HTML5

1,HTML5/jQuery雷达动画图表图表配置十分简单分享一款很特别的HTML5图表,它是利用HTML5和jQuery的雷达动画图表,图表数据在初始化的时候带有一定动画. 在线演示源码下载 2,HTML5模拟牛顿力学碰撞的小球介绍一款HTML5模拟物理实验,这次模拟的是HTML5牛顿力学实验,高空挂几个小球来回摆动,互相撞击,来模拟力的传动. 在线演示源码下载 3,HTML5的画布烟花特效场景十分华丽一款基于HTML5 Canvas实现的烟花特效,我们只需在黑色的画布上点击鼠标,即会…

大饱眼福 7款类型各异的CSS3实用菜单

1.清新小图标的HTML5/CSS3侧边栏菜单前我们分享过几款CSS3侧边栏菜单,像CSS3侧边栏菜单带可爱的小图标菜单和CSS3侧边栏手风琴菜单,都非常不错.今天我们要分享的这款CSS3侧边栏菜单和之前这款菜单类似,也带有漂亮可爱的小图标,鼠标滑过菜单项时背景会出现淡入淡出的效果. 在线演示源码下载 2.3D侧躺CSS3菜单 3D展开子菜单今天我们再来分享一款CSS3 3D菜单,这款3D菜单的特点是它侧躺在页面上,展开子菜单时也有漂亮的动画,并且子菜单也呈现3D的效果,大家可以下载这款…

jquery多级手风琴插件–accordion.js

手风琴菜单一般用于下拉导航,由于外观非常简洁,使用起来跟手风琴一样可以拉伸和收缩而得名,项目中适当应用手风琴效果会给用户带来非常好的体验.本文借助jQuery插件轻松打造一个非常不错的手风琴效果的菜单. HTML 1 2 <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <script type="tex…

仿京东树形菜单插件hovertree

hovertree是一个仿京东的树形菜单jquery插件,暂时有银色和绿色两种. 官方网址:http://keleyi.com/jq/hovertree/欢迎下载使用查看绿色效果:http://keleyi.com/jq/hovertree/hovertreegreen.htm 可以设置菜单宽度(width),还可以设置是否最多只能有一个一级菜单展开(isCloseOther). isCloseOther的值为false 或者 true,设为true即成为手风琴菜单. 使用方法可以参考以下HT…