letscreateLab: Youtube old Style Menu

By: Unknown on 06:44

Share it Please

Google has just changed the UI of the youtube but the old menu system was just inspiring. so i tried to design it and completed within 20 min and said myself "that was nice!" .So i decided to share the tutorial with all of friends and followers.The concept is just simple and i used a js file "ytmenu.js" and the result was there!
I used simple icons to make more interesting and fun try the demo and comment your feeling.

DEMO HERE

Creating The Page
Index.html

<body>
<div class="container">
<header class="header">
<h1>Simple YouTube Menu Effect <span text color="red">A simple drop-down menu as seen on YouTube</span></h1>
</header>
<div class="main">
<p text align="center">YOUTUBE'S OLD STYLE MENU </p>
<div class="side">
<nav class="dr-menu">
<div class="dr-trigger">
<span class=" icon-menu"></span><a class="label">Account</a></div>
<ul>
<li><a class="icon-user" href="#">Venkatesh Pillai</a></li>
<li><a class="icon-camera" href="#">Videos</a></li>
<li><a class="heart" href="#">Favorites</a></li>
<li><a class="bullhorn" href="#">Subscriptions</a></li>
<li><a class="download" href="#">Downloads</a></li>
<li><a class="settings" href="#">Settings</a></li>
<li><a class="icon-switch" href="#">Logout</a></li>
</ul>
</nav>
</div>
</div>
</div>
</div>

Styling The Menu
component.css

.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;
   float:right;
}

.menu > div {
   cursor: pointer;
   position: absolute;
   width: 100%;
   z-index: 100;
}

.menu > div .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;
}

.menu.menu-open > div .icon {
   color: #1C73FF;
   left: 100%;
   -webkit-transform: translateX(-100%);
   -moz-transform: translateX(-100%);
   -ms-transform: translateX(-100%);
   transform: translateX(-100%);
}

.menu > div .icon:after {
   content: "\e008";
   position: absolute;
   font-size: 50%;
   line-height: 3.25;
   left: -10%;
   opacity: 0;
}

.menu.menu-open > div .icon:after {
   opacity: 1;
}

.menu > div .label {
   padding-left: 3em;
   position: relative;
   display: block;
   color: #1C73FF;
   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;
}

.menu.menu-open > div .label {
   -webkit-transform: translateY(-90%);
   -moz-transform: translateY(-90%);
   -ms-transform: translateY(-90%);
   transform: translateY(-90%);
}

.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;
}

.menu.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;
}

.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;
}

.menu.menu-open ul li {
   opacity: 1;
}

.menu.menu-open ul li:nth-child(2) {
   -webkit-transition-delay: 35ms;
   -moz-transition-delay: 35ms;
   transition-delay: 35ms;
}

.menu.menu-open ul li:nth-child(3) {
   -webkit-transition-delay: 70ms;
   -moz-transition-delay: 70ms;
   transition-delay: 70ms;
}

.menu.menu-open ul li:nth-child(4) {
   -webkit-transition-delay: 105ms;
   -moz-transition-delay: 105ms;
   transition-delay: 105ms;
}

.menu.menu-open ul li:nth-child(5) {
   -webkit-transition-delay: 140ms;
   -moz-transition-delay: 140ms;
   transition-delay: 140ms;
}

.menu.menu-open ul li:nth-child(6) {
   -webkit-transition-delay: 175ms;
   -moz-transition-delay: 175ms;
   transition-delay: 175ms;
}

.menu.menu-open ul li:nth-child(7) {
   -webkit-transition-delay: 205ms;
   -moz-transition-delay: 205ms;
   transition-delay: 205ms;
}

.menu ul li a {
   display: inline-block;
   padding: 0 20px;
   color: #fff;
}

.menu ul li a:hover {
   color: #1C73FF;
   background-color:#fff;
}

.icon:before,
.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;
}

letscreateLab

Thursday 17 October 2013

Youtube old Style Menu

Share it Please

No comments:

Post a Comment