Collidal A Sticky Sidebar Menu For Blogger 2014

Hie Readers,Today I m back with new menu for blogger,There is been trend to have sticky sidebar menu so i've decided to design it for blogger,So here It is

Check out Live Demo For Blogger :-

How Add This To Your Blog

Add below Code Before ]]></b:skin> Tag:-

@import url(//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);

}

@import url(http://fonts.googleapis.com/css?family=Titillium+Web:300);

.fa-2x {

font-size: 2em;

}

.fa {

position: relative;

display: table-cell;

width: 60px;

height: 36px;

text-align: center;

vertical-align: middle;

font-size:20px;

}

.mbsmain-menu:hover,nav.mbsmain-menu.expanded {

width:250px;

overflow:visible;

}

.mbsmain-menu {

background:#fbfbfb;

border-right:1px solid #e5e5e5;

position:absolute;

top:0;

bottom:0;

height:100%;

left:0;

width:60px;

overflow:hidden;

-webkit-transition:width .05s linear;

transition:width .05s linear;

-webkit-transform:translateZ(0) scale(1,1);

z-index:1000;

}

.mbsmain-menu>ul {

margin:7px 0;

}

.mbsmain-menu li {

position:relative;

display:block;

width:250px;

}

.mbsmain-menu li>a {

position:relative;

display:table;

border-collapse:collapse;

border-spacing:0;

color:#999;

 font-family: arial;

font-size: 14px;

text-decoration:none;

-webkit-transform:translateZ(0) scale(1,1);

-webkit-transition:all .1s linear;

transition:all .1s linear;

  

}

.mbsmain-menu .nav-icon {

position:relative;

display:table-cell;

width:60px;

height:36px;

text-align:center;

vertical-align:middle;

font-size:18px;

}

.mbsmain-menu .nav-text {

position:relative;

display:table-cell;

vertical-align:middle;

width:190px;

  font-family: 'Titillium Web', sans-serif;

}

.mbsmain-menu>ul.logout {

position:absolute;

left:0;

bottom:0;

}

.no-touch .scrollable.hover {

overflow-y:hidden;

}

.no-touch .scrollable.hover:hover {

overflow-y:auto;

overflow:visible;

}

a:hover,a:focus {

text-decoration:none;

}

nav {

-webkit-user-select:none;

-moz-user-select:none;

-ms-user-select:none;

-o-user-select:none;

user-select:none;

}

nav ul,nav li {

outline:0;

margin:0;

padding:0;

}

.mbsmain-menu li:hover>a,nav.mbsmain-menu li.active>a,.dropdown-menu>li>a:hover,.dropdown-menu>li>a:focus,.dropdown-menu>.active>a,.dropdown-menu>.active>a:hover,.dropdown-menu>.active>a:focus,.no-touch .dashboard-page nav.dashboard-menu ul li:hover a,.dashboard-page nav.dashboard-menu ul li.active a {

color:#fff;

background-color:#5fa2db;

}

.mbs {

float: left;

background: #e2e2e2;

width: 100%;

height: 100%;

}

@font-face {

  font-family: 'Titillium Web';

  font-style: normal;

  font-weight: 300;

  src: local('Titillium WebLight'), local('TitilliumWeb-Light'), url(http://themes.googleusercontent.com/static/fonts/titilliumweb/v2/anMUvcNT0H1YN4FII8wpr24bNCNEoFTpS2BTjF6FB5E.woff) format('woff');

}

Add Below Code After <body> Tag :-

<div class="mbs"></div><nav class="mbsmain-menu">

            <ul>

                <li>

                    <a href="#">

                        <i class="fa fa-home fa-2x"></i>

                        <span class="nav-text">

                            Dashboard

                        </span>

                    </a>

                  

                </li>

                <li class="has-subnav">

                    <a href="#">

                        <i class="fa fa-laptop fa-2x"></i>

                        <span class="nav-text">

                            UI Components

                        </span>

                    </a>

                    

                </li>

                <li class="has-subnav">

                    <a href="#">

                       <i class="fa fa-list fa-2x"></i>

                        <span class="nav-text">

                            Forms

                        </span>

                    </a>

                    

                </li>

                <li class="has-subnav">

                    <a href="#">

                       <i class="fa fa-folder-open fa-2x"></i>

                        <span class="nav-text">

                            Pages

                        </span>

                    </a>

                   

                </li>

                <li>

                    <a href="#">

                        <i class="fa fa-bar-chart-o fa-2x"></i>

                        <span class="nav-text">

                            Graphs and Statistics

                        </span>

                    </a>

                </li>

                <li>

                    <a href="#">

                        <i class="fa fa-font fa-2x"></i>

                        <span class="nav-text">

                            Typography and Icons

                        </span>

                    </a>

                </li>

                <li>

                   <a href="#">

                       <i class="fa fa-table fa-2x"></i>

                        <span class="nav-text">

                            Tables

                        </span>

                    </a>

                </li>

                <li>

                   <a href="#">

                        <i class="fa fa-map-marker fa-2x"></i>

                        <span class="nav-text">

                            Maps

                        </span>

                    </a>

                </li>

                <li>

                    <a href="#">

                       <i class="fa fa-info fa-2x"></i>

                        <span class="nav-text">

                            Documentation

                        </span>

                    </a>

                </li>

            </ul>

            <ul class="logout">

                <li>

                   <a href="#">

                         <i class="fa fa-power-off fa-2x"></i>

                        <span class="nav-text">

                           <a href='http://www.mybloggerskill.blogspot.in'>MBS</a>

                        </span>

                    </a>

                </li>  

            </ul>

        </nav>

•  Replace # tag With Your Link.
• Warning : Don't remove the credits.

So,How was the menu,Kindly drop your comments,I hope you like it

Sector An animated menu For Blogger 2013

Hello Reader,After A long time Its Time To Post A new navigation Menu For Blogger.Its Name is sector Which Is related to Circles :D.
Menu Is an important thing for template design the better navigation the better your visitor will easily to navigate.

For Live Demo Click The Button

Add The Below Css Code Before ]]></b:skin>  Tag:-

/* =============================================================== copyright © Mybloggerskill. =================================================================== */ .menuHoldermbs {width:100px; height:100px; margin:50px 0 250px 10px; position:relative; z-index:100;} .menuHoldermbs ul {padding:0; margin:0; list-style:none; position:absolute; left:0; top:0; width:0; height:0;} .menuHoldermbs ul li {border-radius:0 0 300px 0; width:0; height:0;} .menuHoldermbs ul li a {color:#000; text-decoration:none; font:bold 13px/30px arial, sans-serif; text-align:center; box-shadow:-5px 5px 5px rgba(0,0,0,0.4); -webkit-transform-origin:0 0; -moz-transform-origin:0 0; -ms-transform-origin:0 0; -o-transform-origin:0 0; transform-origin:0 0; } .menuHoldermbs ul.p1 li {position:absolute; left:0; top:0;} .menuHoldermbs ul.p2 {z-index:-1;} .menuHoldermbs ul.p3 {z-index:-1;} .menuHoldermbs li.s1 > a {position:absolute; display:block; width:100px; height:100px; background:#c8c8c8; border-radius:0 0 100px 0;} .menuHoldermbs li.s2 > a {position:absolute; display:block; width:100px; padding-left:100px; height:200px; background:#ddd; border-radius:0 0 200px 0;} .menuHoldermbs ul.p3 li a {position:absolute; display:block; width:100px; padding-left:200px; height:300px; background:#999; border-radius:0 0 300px 0;} .menuHoldermbs ul ul { -webkit-transform-origin:0 0; -moz-transform-origin:0 0; -ms-transform-origin:0 0; -o-transform-origin:0 0; transform-origin:0 0; -webkit-transform:rotate(90deg); -moz-transform:rotateZ(90deg); -ms-transform:rotate(90deg); -o-transform:rotate(90deg); transform:rotate(90deg); -webkit-transition:1s; -moz-transition:1s; -ms-transition:1s; -o-transition:1s; transition:1s; } .menuHoldermbs li.s2:nth-of-type(6) > a {background:#888; -webkit-transform:rotate(75deg); -moz-transform:rotateZ(75deg); -ms-transform:rotate(75deg); -o-transform:rotate(75deg); transform:rotate(75deg); } .menuHoldermbs li.s2:nth-of-type(5) > a {background:#999; -webkit-transform:rotate(60deg); -moz-transform:rotateZ(60deg); -ms-transform:rotate(60deg); -o-transform:rotate(60deg); transform:rotate(60deg); } .menuHoldermbs li.s2:nth-of-type(4) > a {background:#aaa; -webkit-transform:rotate(45deg); -moz-transform:rotateZ(45deg); -ms-transform:rotate(45deg); -o-transform:rotate(45deg); transform:rotate(45deg); } .menuHoldermbs li.s2:nth-of-type(3) > a {background:#bbb; -webkit-transform:rotate(30deg); -moz-transform:rotateZ(30deg); -ms-transform:rotate(30deg); -o-transform:rotate(30deg); transform:rotate(30deg); } .menuHoldermbs li.s2:nth-of-type(2) > a {background:#ccc; -webkit-transform:rotate(15deg); -moz-transform:rotateZ(15deg); -ms-transform:rotate(15deg); -o-transform:rotate(15deg); transform:rotate(15deg); } .menuHoldermbs .a6 li:nth-of-type(6) > a {background:#444; -webkit-transform:rotate(75deg); -moz-transform:rotateZ(75deg); -ms-transform:rotate(75deg); -o-transform:rotate(75deg); transform:rotate(75deg); } .menuHoldermbs .a6 li:nth-of-type(5) > a {background:#555; -webkit-transform:rotate(60deg); -moz-transform:rotateZ(60deg); -ms-transform:rotate(60deg); -o-transform:rotate(60deg); transform:rotate(60deg); } .menuHoldermbs .a6 li:nth-of-type(4) > a {background:#666; -webkit-transform:rotate(45deg); -moz-transform:rotateZ(45deg); -ms-transform:rotate(45deg); -o-transform:rotate(45deg); transform:rotate(45deg); } .menuHoldermbs .a6 li:nth-of-type(3) > a {background:#777; -webkit-transform:rotate(30deg); -moz-transform:rotateZ(30deg); -ms-transform:rotate(30deg); -o-transform:rotate(30deg); transform:rotate(30deg); } .menuHoldermbs .a6 li:nth-of-type(2) > a {background:#888; -webkit-transform:rotate(15deg); -moz-transform:rotateZ(15deg); -ms-transform:rotate(15deg); -o-transform:rotate(15deg); transform:rotate(15deg); } .menuHoldermbs .a5 li:nth-of-type(5) > a {background:#555; -webkit-transform:rotate(72deg); -moz-transform:rotateZ(72deg); -ms-transform:rotate(72deg); -o-transform:rotate(72deg); transform:rotate(72deg); } .menuHoldermbs .a5 li:nth-of-type(4) > a {background:#666; -webkit-transform:rotate(54deg); -moz-transform:rotateZ(54deg); -ms-transform:rotate(54deg); -o-transform:rotate(54deg); transform:rotate(54deg); } .menuHoldermbs .a5 li:nth-of-type(3) > a {background:#777; -webkit-transform:rotate(36deg); -moz-transform:rotateZ(36deg); -ms-transform:rotate(36deg); -o-transform:rotate(36deg); transform:rotate(36deg); } .menuHoldermbs .a5 li:nth-of-type(2) > a {background:#888; -webkit-transform:rotate(18deg); -moz-transform:rotateZ(18deg); -ms-transform:rotate(18deg); -o-transform:rotate(18deg); transform:rotate(18deg); } .menuHoldermbs .a3 li:nth-of-type(3) > a {background:#777; -webkit-transform:rotate(60deg); -moz-transform:rotateZ(60deg); -ms-transform:rotate(60deg); -o-transform:rotate(60deg); transform:rotate(60deg); } .menuHoldermbs .a3 li:nth-of-type(2) > a {background:#888; -webkit-transform:rotate(30deg); -moz-transform:rotateZ(30deg); -ms-transform:rotate(30deg); -o-transform:rotate(30deg); transform:rotate(30deg); } .menuHoldermbs li.s1:hover ul.p2 { -webkit-transform:rotate(0deg); -moz-transform:rotateZ(0deg); -ms-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg); } .menuHoldermbs li.s2:hover ul.p3 { -webkit-transform:rotate(0deg); -moz-transform:rotateZ(0deg); -ms-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg); } .menuHoldermbs ul li:hover > a {background:#f00; color:#fff;} .menuHoldermbs li.s2:hover > a {background:#d00; color:#fff;} .menuHoldermbs .a6 li:hover > a {background:#b00; color:#fff;} .menuHoldermbs .a5 li:hover > a {background:#b00; color:#fff;} .menuHoldermbs .a3 li:hover > a {background:#b00; color:#fff;} .menuWindow {width:110px; height:110px; overflow:hidden; position:absolute; left:0; top:0; z-index:100; -webkit-transition:0s 1s; -moz-transition:0s 1s; -ms-transition:0s 1s; -o-transition:0s 1s; transition:0s 1s; } .menuHoldermbs:hover .menuWindow {width:310px; height:310px; -webkit-transition:0s 0s; -moz-transition:0s 0s; -ms-transition:0s 0s; -o-transition:0s 0s; transition:0s 0s; } .menuHoldermbs span {display:block; -webkit-transform:rotate(5deg); -moz-transform:rotateZ(5deg); -ms-transform:rotate(5deg); -o-transform:rotate(5deg); transform:rotate(5deg); } .menuHoldermbs ~ img.close {width:0; height:0; position:fixed; z-index:-1; left:0; top:0;} .menuHoldermbs:hover ~ img.close {width:100%; height:100%;}

Add HTML Code wherever You Want To show Your Menu

<div class="menuHoldermbs"><div class="menuWindow">
<ul class="p1">
<li class="s1"><a href="#url">Menu</a>
<ul class="p2">
<li class="s2"><a href="http://mybloggerskill.blogspot.com"><span>Home</span></a></li>
<li class="s2"><a href="#url"><span>Services</span></a>
<ul class="p3 a3">
<li><a href="http://mybloggerskill.blogspot.com">Logo</a></li>
<li><a href="http://mybloggerskill.blogspot.com">Editing</a></li>
<li><a href="http://mybloggerskill.blogspot.com">Storage</a></li>
</ul>
</li>
<li class="s2"><a href="#url"><span>Contacts</span></a>
<ul class="p3 a6">
<li><a href="http://mybloggerskill.blogspot.com">Support</a></li>
<li><a href="http://mybloggerskill.blogspot.com">Sales</a></li>
<li><a href="http://mybloggerskill.blogspot.com">Buying</a></li>
<li><a href="http://mybloggerskill.blogspot.com">Photographers</a></li>
<li><a href="mybloggerskill.blogspot.com">Stockist</a></li>
<li><a href="http://mybloggerskill.blogspot.com">General</a></li>
</ul>
</li>
<li class="s2"><a href="#url"><span>Stores</span></a>
<ul class="p3 a3">
<li><a href="http://mybloggerskill.blogspot.com">South Region</a></li>
<li><a href="http://mybloggerskill.blogspot.com">North Region</a></li>
<li><a href="http://mybloggerskill.blogspot.com">Central Region</a></li>
</ul>
</li>
<li class="s2"><a href="#url"><span>Contact Us</span></a>
<ul class="p3 a3">
<li><a href="http://mybloggerskill.blogspot.com">Email</a></li>
<li><a href="http://mybloggerskill.blogspot.com">Post</a></li>
<li><a href="http://mybloggerskill.blogspot.com">Telephone</a></li>
</ul>
</li>
<li class="s2 b6"><a href="#url"><span>Sales</span></a>
<ul class="p3 a5">
<li><a href="http://mybloggerskill.blogspot.com">DSLR Cameras</a></li>
<li><a href="http://mybloggerskill.blogspot.com">Lenses</a></li>
<li><a href="http://mybloggerskill.blogspot.com">Flash Guns</a></li>
<li><a href="http://mybloggerskill.blogspot.com">Tripods</a></li>
<li><a href="http://mybloggerskill.blogspot.com">Filters</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div></div>