YouTube左侧菜单效果特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 YouTube左侧菜单效果特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
		<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
		<title>YouTube左侧菜单效果</title>
		<link rel="stylesheet" type="text/css" href="css/default.css" />
		<link rel="stylesheet" type="text/css" href="css/component.css" />
		<script src="js/modernizr.custom.js"></script>
	</head>
	<body>
		<div class="container">	
			<header class="clearfix">
				<h1>YouTube左侧菜单效果</h1>	
			</header>
			<div class="main">
				<p>This menu is inspired by the left side menu found on YouTube. When clicking on the menu label and icon, the main menu appears beneath and the menu icon slides to the right side while the label slides up. To close the menu, the menu icon needs to be clicked again.</p>
				<div class="side">
					<nav class="dr-menu">
						<div class="dr-trigger"><span class="dr-icon dr-icon-menu"></span><a class="dr-label">Account</a></div>
						<ul>
							<li><a class="dr-icon dr-icon-user" href="#">Jason Quinn</a></li>
							<li><a class="dr-icon dr-icon-camera" href="#">Videos</a></li>
							<li><a class="dr-icon dr-icon-heart" href="#">Favorites</a></li>
							<li><a class="dr-icon dr-icon-bullhorn" href="#">Subscriptions</a></li>
							<li><a class="dr-icon dr-icon-download" href="#">Downloads</a></li>
							<li><a class="dr-icon dr-icon-settings" href="#">Settings</a></li>
							<li><a class="dr-icon dr-icon-switch" href="#">Logout</a></li>
						</ul>
					</nav>
				</div>
			</div>
		</div><!-- /container -->
		<script src="js/ytmenu.js"></script>
	</body>
</html>

JS代码(ytmenu.js):

/** * ytmenu.js v1.0.0 * http://www.codrops.com * * Licensed under the MIT license. * http://www.opensource.org/licenses/mit-license.php * * Copyright 2013,Codrops * http://www.codrops.com */
var YTMenu = (function(){
	function init(){
	[].slice.call( document.querySelectorAll( '.dr-menu' ) ).forEach( function( el,i ){
	var trigger = el.querySelector( 'div.dr-trigger' ),icon = trigger.querySelector( 'span.dr-icon-menu' ),open = false;
	trigger.addEventListener( 'click',function( event ){
	if( !open ){
	el.className += ' dr-menu-open';
	open = true;
}
}
,false );
	icon.addEventListener( 'click',function( event ){
	if( open ){
	event.stopPropagation();
	open = false;
	el.className = el.className.replace(/\bdr-menu-open\b/,'');
	return false;
}
}
,false );
}
);
}
init();
}
)();

CSS代码(component.css):

@font-face{font-family:'icomoon';src:url('../fonts/icomoon.eot');src:url('../fonts/icomoon.eot?#iefix') format('embedded-opentype'),url('../fonts/icomoon.woff') format('woff'),url('../fonts/icomoon.ttf') format('truetype'),url('../fonts/icomoon.svg#icomoon') format('svg');font-weight:normal;font-style:normal;}
.dr-menu{width:100%;max-width:400px;min-width:300px;position:relative;font-size:1.3em;line-height:2.5;font-weight:400;color:#fff;padding-top:2em;}
.dr-menu > div{cursor:pointer;position:absolute;width:100%;z-index:100;}
.dr-menu > div .dr-icon{top:0;left:0;position:absolute;font-size:150%;line-height:1.6;padding:0 10px;-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;transition:all 0.2s ease;}
.dr-menu.dr-menu-open > div .dr-icon{color:#60a773;left:100%;-webkit-transform:translateX(-100%);-moz-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);}
.dr-menu > div .dr-icon:after{content:"\e008";position:absolute;font-size:50%;line-height:3.25;left:-10%;opacity:0;}
.dr-menu.dr-menu-open > div .dr-icon:after{opacity:1;}
.dr-menu > div .dr-label{padding-left:3em;position:relative;display:block;color:#60a773;font-size:0.9em;font-weight:700;letter-spacing:1px;text-transform:uppercase;line-height:2.75;-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;transition:all 0.2s ease;}
.dr-menu.dr-menu-open > div .dr-label{-webkit-transform:translateY(-90%);-moz-transform:translateY(-90%);-ms-transform:translateY(-90%);transform:translateY(-90%);}
.dr-menu ul{padding:0;margin:0 3em 0 0;list-style:none;opacity:0;position:relative;z-index:0;pointer-events:none;-webkit-transition:opacity 0s linear 205ms;-moz-transition:opacity 0s linear 205ms;transition:opacity 0s linear 205ms;}
.dr-menu.dr-menu-open ul{opacity:1;z-index:200;pointer-events:auto;-webkit-transition:opacity 0s linear 0s;-moz-transition:opacity 0s linear 0s;transition:opacity 0s linear 0s;}
.dr-menu ul li{display:block;margin:0 0 5px 0;opacity:0;-webkit-transition:opacity 0.3s ease;-moz-transition:opacity 0.3s ease;transition:opacity 0.3s ease;}
.dr-menu.dr-menu-open ul li{opacity:1;}
.dr-menu.dr-menu-open ul li:nth-child(2){-webkit-transition-delay:35ms;-moz-transition-delay:35ms;transition-delay:35ms;}
.dr-menu.dr-menu-open ul li:nth-child(3){-webkit-transition-delay:70ms;-moz-transition-delay:70ms;transition-delay:70ms;}
.dr-menu.dr-menu-open ul li:nth-child(4){-webkit-transition-delay:105ms;-moz-transition-delay:105ms;transition-delay:105ms;}
.dr-menu.dr-menu-open ul li:nth-child(5){-webkit-transition-delay:140ms;-moz-transition-delay:140ms;transition-delay:140ms;}
.dr-menu.dr-menu-open ul li:nth-child(6){-webkit-transition-delay:175ms;-moz-transition-delay:175ms;transition-delay:175ms;}
.dr-menu.dr-menu-open ul li:nth-child(7){-webkit-transition-delay:205ms;-moz-transition-delay:205ms;transition-delay:205ms;}
.dr-menu ul li a{display:inline-block;padding:0 20px;color:#fff;}
.dr-menu ul li a:hover{color:#60a773;}
.dr-icon:before,.dr-icon:after{position:relative;font-family:'icomoon';speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;-webkit-font-smoothing:antialiased;}
.dr-menu ul .dr-icon:before{margin-right:15px;}
.dr-icon-bullhorn:before{content:"\e000";}
.dr-icon-camera:before{content:"\e002";}
.dr-icon-heart:before{content:"\e003";}
.dr-icon-settings:before{content:"\e004";}
.dr-icon-switch:before{content:"\e005";}
.dr-icon-download:before{content:"\e006";}
.dr-icon-user:before{content:"\e001";}
.dr-icon-menu:before{content:"\e007";}

CSS代码(default.css):

/* General Demo Style */
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);body,html{font-size:100%;padding:0;margin:0;}
/* Reset */
*,*:after,*:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
/* Clearfix hack by Nicolas Gallagher:http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,.clearfix:after{content:" ";display:table;}
.clearfix:after{clear:both;}
body{font-family:'Lato',Calibri,Arial,sans-serif;color:#fff;background:#91cfa1;font-weight:300;}
a{color:#f0f0f0;text-decoration:none;}
a:hover{color:#fff;}
.main,.container > header{width:100%;margin:0 auto;padding:0 1.875em 3.125em 1.875em;}
.main{max-width:69em;min-height:600px;padding:2em 0 0 0;}
.side{float:right;width:30%;padding-right:20px;min-width:320px;box-shadow:1px 0 rgba(0,0,0,0.1);}
.main p{font-size:2em;padding:0 1em;margin:0;line-height:1.5;float:right;width:70%;}
.container > header{padding:2.875em 1.875em 2.875em;text-align:center;background:rgba(0,0,0,0.02);}
.container > header h1{font-size:2.625em;line-height:1.3;margin:0;color:#fff;font-weight:300;}
.container > header span{display:block;font-size:60%;color:rgba(255,255,255,0.7);padding:0 0 0.6em 0.1em;}
/* Header Style */
.codrops-top{background:#fff;background:rgba(255,255,255,0.85);text-transform:uppercase;position:relative;font-size:0.68em;box-shadow:1px 0px 2px rgba(0,0,0,0.2);line-height:2.2;}
.codrops-top a{padding:0 1em;letter-spacing:0.1em;color:#333;display:inline-block;}
.codrops-top a:hover{background:rgba(255,255,255,0.99);color:#000;}
.codrops-top span.right{float:right;}
.codrops-top span.right a{float:left;display:block;}
@media screen and (max-width:66.9375em){.side,.main p{float:none;width:100%;box-shadow:none;padding:1em;}
.main p{font-size:130%;}
}

附件:下载该文件资源,减少时间成本(增值服务)