Add Css3 Stylish Vertical Side Menu To Blogger Blog

Vertical Side Menu For Blogger Blog. This tutorial will show you How To Add Css3 Stylish Vertical Side Menu To Blogger Blog. The menu is made up using Css3 with just one image and is quick and easy to install.This Vertical Side menu is created by tutorialzine.com

Css3 Vertical Side Menu Demo

LIVE DEMO

How To Add Css3 Vertical Side Menu To Blogger

• Go to Blogger Dashboard --> Layout
• Click on Add a Gadget then select HTML/JavaScript Widget
• Paste the code shown below inside the widget.

<style>

#navigationMenu li{
    list-style:none;
    height:39px;
    padding:2px;
    width:40px;
}

#navigationMenu span{
    /* Container properties */
    width:0;
    left:38px;
    padding:0;
    position:absolute;
    overflow:hidden;

    /* Text properties */
    font-family:'Myriad Pro',Arial, Helvetica, sans-serif;
    font-size:18px;
    font-weight:bold;
    letter-spacing:0.6px;
    white-space:nowrap;
    line-height:39px;
   
    /* CSS3 Transition: */
    -webkit-transition: 0.25s;
    /*-o-transition: 0.25s;*/
   
    /* Future proofing (these do not work yet): */
    -moz-transition: 0.25s;
    transition: 0.25s;
}

#navigationMenu a{
    background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVOD6GpGrUcVYVwMcjXu-KrotmZ14RHV64hCPTWm3I4sqN2wjqbFpw-lJd-ok4ZFKKBTvwVJuvdAiWFy-5aFBhuAa4ZW3FOkTjNoU9KlForzvZtt6SxaKsl8T2IOT7vs6xyuI_keQ7sdSH/s1600/navigation.jpg') no-repeat;

    height:39px;
    width:38px;
    display:block;
    position:relative;
}

/* General hover styles */

#navigationMenu a:hover span{ width:auto; padding:0 20px;overflow:visible; }
#navigationMenu a:hover{
    text-decoration:none;
   
    /* CSS outer glow with the box-shadow property */
    -moz-box-shadow:0 0 5px #9ddff5;
    -webkit-box-shadow:0 0 5px #9ddff5;
    box-shadow:0 0 5px #9ddff5;
}

/* Green Button */

#navigationMenu .home {    background-position:0 0;}
#navigationMenu .home:hover {    background-position:0 -39px;}
#navigationMenu .home span{
    background-color:#7da315;
    color:#3d4f0c;
    text-shadow:1px 1px 0 #99bf31;
}

/* Blue Button */

#navigationMenu .about { background-position:-38px 0;}
#navigationMenu .about:hover { background-position:-38px -39px;}
#navigationMenu .about span{
    background-color:#1e8bb4;
    color:#223a44;
    text-shadow:1px 1px 0 #44a8d0;
}

/* Orange Button */

#navigationMenu .services { background-position:-76px 0;}
#navigationMenu .services:hover { background-position:-76px -39px;}
#navigationMenu .services span{
    background-color:#c86c1f;
    color:#5a3517;
    text-shadow:1px 1px 0 #d28344;
}

/* Yellow Button */

#navigationMenu .portfolio { background-position:-114px 0;}
#navigationMenu .portfolio:hover{ background-position:-114px -39px;}
#navigationMenu .portfolio span{
    background-color:#d0a525;
    color:#604e18;
    text-shadow:1px 1px 0 #d8b54b;
}

/* Purple Button */

#navigationMenu .contact { background-position:-152px 0;}
#navigationMenu .contact:hover { background-position:-152px -39px;}
#navigationMenu .contact span{
    background-color:#af1e83;
    color:#460f35;
    text-shadow:1px 1px 0 #d244a6;
}

</style>


<div style='position: fixed; top: 40%; left: 0%;'/>
<ul id="navigationMenu">
<li>
<a class="home" href="http://www.mybloggertools.org">
<span>Home</span>
</a>

</li>
<li>

<a class="about" href="http://www.mybloggertools.org">
<span>About Us</span>
</a>
</li>

<li>
<a class="services" href="http://www.mybloggertools.org">
<span>Categories</span>
</a>

</li>

<li>
<a class="portfolio" href="http://www.mybloggertools.org">
<span>Disclaimer</span>
</a>
</li>

<li>

<a class="contact" href="http://www.mybloggertools.org/p/contact-us_02.html">

<span>Contact</span>
</a>
</li>
</ul>
</div>

• Replace the URLs in red color with your links
• Now Save the widget 

Like it? Share it.