Thursday, 17 October 2013

Youtube old Style Menu

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.

Creating The Page

<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>
<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>
<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>

<script src="js/ytmenu.js"></script>

Styling The Menu

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

.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;
} > 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;
} > 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;
} > 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;
} 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;
} ul li {
    opacity: 1;
} ul li:nth-child(2) {
    -webkit-transition-delay: 35ms;
    -moz-transition-delay: 35ms;
    transition-delay: 35ms;
} ul li:nth-child(3) {
    -webkit-transition-delay: 70ms;
    -moz-transition-delay: 70ms;
    transition-delay: 70ms;
} ul li:nth-child(4) {
    -webkit-transition-delay: 105ms;
    -moz-transition-delay: 105ms;
    transition-delay: 105ms;
} ul li:nth-child(5) {
    -webkit-transition-delay: 140ms;
    -moz-transition-delay: 140ms;
    transition-delay: 140ms;
} ul li:nth-child(6) {
    -webkit-transition-delay: 175ms;
    -moz-transition-delay: 175ms;
    transition-delay: 175ms;
} 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;

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

No comments:

Post a Comment