zoukankan      html  css  js  c++  java
  • 竖向 两级手风琴 TAB 栏

    <!DOCTYPE html>
    <html>
    
    <head>
    
    	<meta charset="UTF-8">
    
    	<title>CSS3垂直手风琴折叠菜单 - 站长素材</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">
    
    	<style>
    		* {
    			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 {
    			 100%;
    			max- 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,
    		.selected {
    			background: #b63b4d;
    			color: #FFF;
    		}
    	</style>
    </head>
    
    <body>
    	<!-- 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="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    
    	<script>
    		// 默认展开第一个
    		$(function () {
    			$("#accordion").children("li:first-child").addClass("open");
    			$("#accordion li:first-child ul").css('display', 'block');
    			$(".open .submenu li:first-child a").addClass("selected")
    		});
    
    		// 切换
    		$("#accordion").on("click", ".open .submenu li", function () {
    			$("#accordion a").removeClass("selected");
    
    			$(this).children().addClass("selected");
    			console.log($(this).text());
    		});
    	</script>
    
    
    	<script>
    		$(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);
    		});
    	</script>
    </body>
    
    </html>
    

    参考:
    https://www.cnblogs.com/aiqingqing/p/5041526.html
    https://blog.csdn.net/qq_43560721/article/details/83691370
    https://www.suibianlu.com/13972.html

  • 相关阅读:
    Constants and Variables
    随想
    C#基础篇之语言和框架介绍
    Python基础19 实例方法 类方法 静态方法 私有变量 私有方法 属性
    Python基础18 实例变量 类变量 构造方法
    Python基础17 嵌套函数 函数类型和Lambda表达式 三大基础函数 filter() map() reduce()
    Python基础16 函数返回值 作用区域 生成器
    Python基础11 List插入,删除,替换和其他常用方法 insert() remove() pop() reverse() copy() clear() index() count()
    Python基础15 函数的定义 使用关键字参数调用 参数默认值 可变参数
    Python基础14 字典的创建修改访问和遍历 popitem() keys() values() items()
  • 原文地址:https://www.cnblogs.com/wsq-blog/p/10938395.html
Copyright © 2011-2022 走看看