Side Navigation ẩn hiện cho Blogger/Blogspot. Kiểu 3: Fixed Side Menu

Side Navigation With Animation

Style 3: Fixed Side Menu

 <aside class='sidebar'>
  <div class='main-nav'>
    <ul>
      <li class='logo'>
        <a>Menu</a>
        <span class='entypo-list'></span>
      </li>
      <li>
        <a>Home</a>
        <span class='entypo-home'></span>
      </li>
      <li>
        <a>Features</a>
        <span class='entypo-gauge'></span>
      </li>
      <li>
        <a>Analytics</a>
        <span class='entypo-chart-line'></span>
      </li>
      <li>
        <a>Premium</a>
        <span class='entypo-rocket'></span>
      </li>
      <li>
        <a>Account</a>
        <span class='entypo-vcard'></span>
      </li>
      <li>
        <a>Settings</a>
        <span class='entypo-cog'></span>
      </li>
    </ul>
  </div>
</aside> 

 @import url(http://fonts.googleapis.com/css?family=Open+Sans:400,800,700,600,300);

@import url(http://weloveiconfonts.com/api/?family=entypo);
/* entypo */
[class*="entypo-"]:before {
    font-family: 'entypo', sans-serif;
}

.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 50px;
    height: 100%;
    background-color: #252a32;
    color: #fff;
    overflow: hidden;
    transition: width .3s ease-in-out;
    z-index: 100;
}

.sidebar:hover {
    width: 200px;
}

.sidebar:hover .main-nav ul li a {
    opacity: 1;
    left: 0;
    transition-delay: .2s;
}

.sidebar .main-nav ul li {
    min-height: 50px;
    line-height: 50px;
    position: relative;
    border-bottom: 1px solid #303641;
    transition: all .3s ease-in-out;
}

.sidebar .main-nav ul li.logo a {
    text-transform: uppercase;
    font-weight: 800;
}

.sidebar .main-nav ul li.logo span:before {
    color: #ea4c89;
    font-size: 1.5em;
}

.sidebar .main-nav ul li.logo + li {
    border-top: 1px solid #303641;
}

.sidebar .main-nav ul li a {
    display: block;
    padding-left: 50px;
    position: relative;
    left: 15px;
    opacity: 0;
    transition: all .3s ease-in-out;
    transition-delay: 0s;
    cursor: pointer;
    font-weight: 300;
}

.sidebar .main-nav ul li span {
    position: absolute;
    width: 50px;
    height: 50px;
    top: 0;
    left: 0;
    text-align: center;
}

.sidebar .main-nav ul li span:before {
    font-size: 1.25em;
    transition: all .3s ease-in-out;
}

.sidebar .main-nav ul li:hover {
    background-color: #1b1e24;
}

.sidebar .main-nav ul li:hover span:before {
    color: #ea4c89;
} 

• DEMO

Created by Iris Tips

• Twitter
• Facebook
• Google+
• LinkedIn
• Pinterest

Iris Tips

Có thể bạn quan tâm