网页左侧边栏二级菜单的学习
来源:互联网 发布:mysql高级教程 百度云 编辑:程序博客网 时间:2024/05/01 08:38
1.二级菜单
手风琴垂直菜单,网上很多(未改),设计上拉下拉来实现
资源地址:http://download.csdn.net/detail/luzhiweistudy/9828978
1. index.html
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>CSS3垂直手风琴折叠菜单DEMO演示</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Iconos --> <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> <link rel="stylesheet" href="css/style.css" media="screen" type="text/css" /></head><body><div style="text-align:center;clear:both"><script src="/gg_bd_ad_720x90.js" type="text/javascript"></script><script src="/follow.js" type="text/javascript"></script></div> <!-- Contenedor --> <ul id="accordion" class="accordion"> <li> <div class="link"><i class="fa fa-paint-brush"></i>Diseño web<i class="fa fa-chevron-down"></i></div> <ul class="submenu"> <li><a href="#">Photoshop</a></li> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> <li><a href="#">Maquetacion web</a></li> </ul> </li> <li> <div class="link"><i class="fa fa-code"></i>Desarrollo front-end<i class="fa fa-chevron-down"></i></div> <ul class="submenu"> <li><a href="#">Javascript</a></li> <li><a href="#">jQuery</a></li> <li><a href="#">Frameworks javascript</a></li> </ul> </li> <li> <div class="link"><i class="fa fa-mobile"></i>Diseño responsive<i class="fa fa-chevron-down"></i></div> <ul class="submenu"> <li><a href="#">Tablets</a></li> <li><a href="#">Dispositivos mobiles</a></li> <li><a href="#">Medios de escritorio</a></li> <li><a href="#">Otros dispositivos</a></li> </ul> </li> <li><div class="link"><i class="fa fa-globe"></i>Posicionamiento web<i class="fa fa-chevron-down"></i></div> <ul class="submenu"> <li><a href="#">Google</a></li> <li><a href="#">Bing</a></li> <li><a href="#">Yahoo</a></li> <li><a href="#">Otros buscadores</a></li> </ul> </li> </ul> <script src='http://codepen.io/assets/libs/fullpage/jquery.js'></script> <script src="js/index.js"></script></body></html>
2. style.css
* { margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}body { background: #2d2c41; font-family: 'Open Sans', Arial, Helvetica, Sans-serif, Verdana, Tahoma;}ul { list-style-type: none;}a { color: #b63b4d; text-decoration: none;}/** ======================= * Contenedor Principal ===========================*/h1 { color: #FFF; font-size: 24px; font-weight: 400; text-align: center; margin-top: 80px; }h1 a { color: #c12c42; font-size: 16px; } .accordion { width: 100%; max-width: 360px; margin: 30px auto 20px; background: #FFF; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }.accordion .link { cursor: pointer; display: block; padding: 15px 15px 15px 42px; color: #4D4D4D; font-size: 14px; font-weight: 700; border-bottom: 1px solid #CCC; position: relative; -webkit-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease;}.accordion li:last-child .link { border-bottom: 0;}.accordion li i { position: absolute; top: 16px; left: 12px; font-size: 18px; color: #595959; -webkit-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease;}.accordion li i.fa-chevron-down { right: 12px; left: auto; font-size: 16px;}.accordion li.open .link { color: #b63b4d;}.accordion li.open i { color: #b63b4d;}.accordion li.open i.fa-chevron-down { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg);}/** * Submenu -----------------------------*/ .submenu { display: none; background: #444359; font-size: 14px; } .submenu li { border-bottom: 1px solid #4b4a5e; } .submenu a { display: block; text-decoration: none; color: #d9d9d9; padding: 12px; padding-left: 42px; -webkit-transition: all 0.25s ease; -o-transition: all 0.25s ease; transition: all 0.25s ease; } .submenu a:hover { background: #b63b4d; color: #FFF; }
3. index.js
$(function() { var Accordion = function(el, multiple) { this.el = el || {}; this.multiple = multiple || false; // Variables privadas var links = this.el.find('.link'); // Evento links.on('click', {el: this.el, multiple: this.multiple}, this.dropdown) } Accordion.prototype.dropdown = function(e) { var $el = e.data.el; $this = $(this), $next = $this.next(); $next.slideToggle(); $this.parent().toggleClass('open'); if (!e.data.multiple) { $el.find('.submenu').not($next).slideUp().parent().removeClass('open'); }; } var accordion = new Accordion($('#accordion'), false);});
0 0
- 网页左侧边栏二级菜单的学习
- 21例创新的侧边栏菜单网页设计作品
- 鼠标移入侧边栏一级菜单后,二级菜单显示
- 网页二级菜单的实现
- JQuery.HoverDir库实现侧边栏二级菜单
- 网页侧边栏三级菜单+面包屑导航栏
- android slidingMenu 侧边栏菜单 的实现
- Ionic 侧边栏菜单的简单实现
- 侧边栏菜单
- 如何添加win7左侧边栏的桌面
- Debug时 Eclipse左侧边栏的白色箭头是什么意思?
- 162.n1-左侧边栏数据的初始化
- 2014网页菜单新趋势——侧边栏菜单设计案例展示
- jquery 侧边商品分类二级导航菜单样式
- 框架网页关闭左菜单
- android实现底部导航栏和顶部导航栏(相当于网页上的一级菜单和二级菜单)
- 二级滑动侧边栏(自定义DrawerLayout)
- zen-cart侧边栏的目录菜单的动态控制
- SPOJ BALLSUM
- 安装Tomcat
- iOS蓝牙开发(一)蓝牙相关基础知识
- zookeeper入门学习总结(持续更新。。)
- maven下载jar包速度慢 导入本地jar包
- 网页左侧边栏二级菜单的学习
- Ribbon脱离Eureka使用
- 大表数据的迁移(一)
- APICloud开发app前端页面结构
- MTKRecipientEditTextView分析
- iPad启动为横屏问题
- Map中如何实现key唯一不重复
- Android 异步方法以同步方式进行
- 9.字符串