On Hover appear Fixed Vertical Menus with Icons For Blogger / Website

Here is the simple Pure CSS n HTML menus by “Rachid Laasri”. COnverted by BuildNextWeb Team. Simple Menu designed using CSS3&HTML5 easy to use, can be added to any design easily. This Menu come with 10 different colors and can be used “right to left” or “left to right”.
You can also add your links in social networking (Facebook, Twitter, YouTube …).

Live Demo here http://punjabimix.blogspot.com/

Stunting Features

• HTML5 & CSS3 Valid
• Works on all major browsers
• Clean & simple desig
• Pure Css
• Easy to use.
• CSS Animations
• Social Networks
• Right and Left direction.

 The Source Code

You can simple Install it at Layout >> Add a new Widget >> HTML/JAVASCRIPT
 Pasting Below Code there >>

<style>
ul{
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}
#BuildNextWebMenu{
    width: 240px;
    height: 100%;
    position: fixed;
}

.BuildNextWebMenu-left{
    left: -180px;
    top: 0px;
    transition:left 1s;
}

.BuildNextWebMenu-left:hover{
    left:0px;
}

/*################## RIGHT MENU ##############*/
.BuildNextWebMenu-right{
    right: -180px;
    top: 0px;
    direction: rtl;
    transition:right 1s;
}
.BuildNextWebMenu-right ul>li i,#toggle{
    right: 200px;
}

.BuildNextWebMenu-right:hover{
    right:0px;
}


#menuHeader{
    width: 100%;
    height: 60px;
    cursor: pointer;
}

#toggle{
    position: absolute;
    left: 195px;
    top: 10px;
}

#menuLogo{
    position: absolute;
    top: 10px;
}

#BuildNextWebMenu ul>li{
    position: relative;
    height: 45px;
    width: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

#BuildNextWebMenu ul>li a{
    color: #fff;
    line-height: 48px;
    margin: 20px;
    font-family: 'Alegreya Sans SC', sans-serif;
    transition: color 0.5s;
    text-decoration: none;
}
#BuildNextWebMenu ul>li i{
    position: absolute;
    left: 200px;
    top:15px;
    color: rgba(255, 255, 255, 0.3);
    transition: color 0.5s;
}
#social{
    width: 85%;
    height: 100px;
    margin: 20px auto auto auto;
}

#social a{
    text-decoration: none;
}

#social i{
    width: 36px;
    height: 36px;
    color: #fff;
    text-align: center;
    line-height: 37px;
    border: 1px solid rgba(255, 255, 255, 0.03);
    transition: background 0.5s;
}

#social .fa-facebook:hover{
    background: #305891;
}

#social .fa-twitter:hover{
    background: #2CA8D2;
}

#social .fa-youtube:hover{
    background: #C82828;
}

#social .fa-google-plus:hover{
    background: #CE4D39;
}

#BuildNextWebMenu{
    background: #222222;
    color: #fff;
}
#menuHeader{
    background: #24AAE9;
}

#BuildNextWebMenu ul>li:hover  a{
    color: #24AAE9;
}
#BuildNextWebMenu ul>li:hover  i{
    color: #24AAE9;
}
</style>
<div id="BuildNextWebMenu" class="BuildNextWebMenu-left">
    <div id="menuHeader">
        <div id="toggle"><i class="fa fa-bars fa-2x"></i></div>
      <div id="menuLogo"><img src="img/logo.png" alt="BuildNextWebMenu"/></div>
    </div>
    <nav>
        <ul>
            <li>
                <a href="#">
                    HOME <i class="fa fa-home"></i>
                </a>
            </li>
            <li>
                <a href="#">
                    ABOUT <i class="fa fa-user"></i>
                </a>
            </li>
            <li>
                <a href="#">
                    CLIENTS    <i class="fa fa-users"></i>
                </a>
            </li>
            <li>
                <a href="#">
                    SHOP <i class="fa fa-shopping-cart"></i>
                </a>
            </li>
            <li>
                <a href="#">
                    NEWS <i class="fa fa-file"></i>
                </a>
            </li>
            <li>
                <a href="#">
                    SERVICES <i class="fa fa-laptop"></i>
                </a>
            </li>
            <li>
                <a href="#">
                    PORTFOLIO <i class="fa fa-home"></i>
                </a>
            </li>
            <li>
                <a href="#">
                    TEAM <i class="fa fa-group"></i>
                </a>
            </li>
            <li>
                <a href="#">
                    BLOG <i class="fa fa-folder"></i>
                </a>
            </li>
            <li>
                <a href="#">
                    MAP <i class="fa fa-map-marker"></i>
                </a>
            </li>
            <li>
                <a href="#">
                    CONTACT <i class="fa fa-envelope"></i>
                </a>
            </li>
        </ul>
    </nav>

    <div id="social">
        <a href="#">
            <i class="fa fa-facebook fa-2x"></i>
        </a>   
        <a href="#">
            <i class="fa fa-google-plus fa-2x"></i>
        </a>   
        <a href="#">
            <i class="fa fa-twitter fa-2x"></i>
        </a>   
        <a href="#">
            <i class="fa fa-youtube fa-2x"></i>
        </a>   
    </div>

</div>

If you have any questions that are beyond the scope of this help file, please feel free to email  .
THANKUHH,,,,,

FIX:: -- For the Icons to work please Take these steps

Paste the below given lines in your template editor under meta content of you blog (e.g. <meta content=)

<link href='http://lipis.github.io/bootstrap-social/assets/css/font-awesome.css' rel='stylesheet'/>
<link href='http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet'/>

Hope the Problem with icons have been fixed now.