-
Notifications
You must be signed in to change notification settings - Fork 46
/
Copy pathindex.html
executable file
·46 lines (46 loc) · 2.44 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!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>Simple YouTube Menu Effect</title>
<meta name="description" content="A tutorial on how to recreate the effect of YouTube's little left side menu. The idea is to slide a little menu icon to the right side while revealing some menu item list beneath. " />
<meta name="keywords" content="Add keywords" />
<meta name="author" content="_yourName_ for Codrops" />
<link rel="shortcut icon" href="../favicon.ico">
<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">
<!-- Codrops top bar -->
<div class="codrops-top clearfix">
<a href="http://tympanus.net/Development/FullscreenLayoutPageTransitions/"><strong>« Previous Demo: Fullscreen Layout with Page Transitions</strong></a>
<span class="right"><a href="http://tympanus.net/codrops/?p=14806"><strong>Back to the Codrops Article</strong></a></span>
</div><!--/ Codrops top bar -->
<header class="clearfix">
<h1>Simple YouTube Menu Effect <span>A simple drop-down menu as seen on YouTube</span></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>