Slide Out Css/Javascript Menu For Blogger

So far I receive got shared a slide inwards menu for blogger in addition to today I am dorsum amongst a novel menu, it is a slide out menu. You tin grade notice run across it how it industrial plant inwards the to a higher house image. It is rattling unique carte every bit yous tin grade notice run across it has icons, a responsive search box in addition to cool follow buttons. You tin grade notice run across a alive demo of this carte here. It is designed amongst css in addition to javascript qnd it is practiced for those blogs which are congested or responsive, practiced for congested blogs because it doesn't receive got infinite on blogs, it is hidden until the trigger is clicked in addition to practiced for responsive blogs because of its responsive design. Because of icons it looks to a greater extent than practiced in addition to it resembles to wordpress menus. In this ship service I volition exhibit yous how to add together this carte inwards your spider web log in addition to every bit good how to customize this menu.

See Live Demo

Follow below steps to add together this carte inwards yous blog:

Step 1: Go to your spider web log in addition to click on layout inwards the carte on left side.

Step 2: Click on add together a gadget in addition to scroll downwards to Html/javascript.

Step 3: Copy below code in addition to glue it into Html/javascript tab:

<style>
@import url(http://weloveiconfonts.com/api/?family=zocial);
/* zocial */
[class*="zocial-"]:before {
font-family: 'zocial', sans-serif;
}
.wrapper{
width: 325px;
height: 50px;
position: absolute;
top: 91%;
left: 74%;
margin-left: -162px;
margin-top: -25px;
}

.icon{
display: inline-block;
position: relative;
color: #bdbdbd;
width: 50px;
height: 50px;
text-align: center;
font-size: 1.47em;
line-height: 2em;
background-color: #fff;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
box-shadow: 0px 3px 0px #bdbdbd, 0px 3px 10px #bababa;
-webkit-transition:background-color 250ms repose 0s;
transition:background-color 250ms repose 0s;
}

.zocial-facebook{margin-left: -8px;margin-left: -2px;
position: relative;
top: 6px;}

.icon.facebook:hover{background-color: #4986c7;}
.twitter:hover{background-color: #4cb6e8;}
.linkedin:hover{background-color: #29a0cc;}
.youtube:hover{background-color: #a32929;}
.google:hover{background-color: #C75345;}

a{
text-decoration: none;
}
a:hover{
text-decoration: none;
}
.icon:hover{
color: #fff;
box-shadow: 0px 3px 0px #686868, 0px 3px 10px #7e7e7e;
}

.icon:active{
box-shadow: inset 0px 1px 4px #3d3d3d, 0px 0px 0px #bdbdbd;
top: 3px;
}
</style>
<style>
span.zocial-linkedin,span.zocial-youtube,span.zocial-twitter,span.zocial-google {
position: relative;
top: 5px;
}
.flexsearch--wrapper {
height: auto;
width: auto;
max-width: 100%;
overflow: hidden;
background: transparent;
margin: 0;
position: static;
}

.flexsearch--form {
overflow: hidden;
position: relative;
}

.flexsearch--input-wrapper {
padding: 0 66px 0 0; /* Right padding for submit push width */
overflow: hidden;
}

.flexsearch--input {
width: 100%;
}

/***********************
* Configurable Styles *
***********************/

.flexsearch--input {
height: 30px;
padding: 0 50px 0 10px;
border-color: #888;
border-radius: 35px;
border-style: solid;
border-width: 2px;
margin-top: 5px;
color: #333;
font-family: 'Helvetica', sans-serif;
font-size: 18px;
-webkit-appearance: none;
-moz-appearance: none;
}
input.flexsearch--submit {
background: none;
border: none;
color: #888;
position: relative;
float: right;
position: relative;
bottom: 28px;
right: 10px;
font-size: 15px;
}

.flexsearch--input:focus {
outline: none;
border-color: #67B045;
}

.flexsearch--input:focus.flexsearch--submit {
color: #333;
}

.flexsearch--submit:hover {
color: #67B045;
cursor: pointer;
}

::-webkit-input-placeholder {
color: #888;
}

input:-moz-placeholder {
color: #888
}
#cssmenu {
background: #333;
list-style: none;
margin: 0;
padding: 0;
width: 244px;
position:relative;
right:24px;
top:0px;
}
#cssmenu li {
font: 17px "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
margin: 0;
padding: 0;
list-style: none;
text-align:center;
}
#cssmenu a {
background: #333;
border-bottom: 1px enterprise #393939;
color: #ccc;
display: block;
margin: 0;
padding: 8px 12px;
text-decoration: none;
font-weight: normal;
}
#cssmenu a:hover {
background: #67B045;
color: #fff;
padding-bottom: 8px;
}

.menu {
overflow-x:hidden;
position:relative;
left:0;
}

.menu-open {
margin-left:241px;
}

.menu-open .menu-side {
left:0;
}

.menu-side,
.menu {
-webkit-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
}

.menu-side {
position:fixed;
left:-231px;
top:0;
width:210px;
border-right:1px enterprise #000;
height:100%;
background-color:#333;
color:#fff;
padding:10px;
}
</style>

<link rel="stylesheet" href="css/main.css" />
<header>
<a href="#" class="menu-toggle"><img src="http://www.jacksontransit.com/images/menu.png"/></a>
</header>
<nav class="menu-side">
<div id='fksearch'>
<div class="flexsearch">
<div class="flexsearch--wrapper">
<form class="flexsearch--form" action="/search" method="get">
<div class="flexsearch--input-wrapper">
<input class="flexsearch--input" type="text" placeholder="search here..." name="q" />
</div>
<input class="flexsearch--submit" type="submit" value="➜"/>
</form>
</div>
</div>
</div>
<div id='cssmenu'>
<ul>
<li class='active'><a href='#'><img src="https://i61.tinypic.com/21lsl7o.png" style="
width: 20px;
height: 20px;
position: relative;
top: 3px;
" /><span> Home</span></a></li>
<li class='active'><a href='#'><img src="http://i60.tinypic.com/wbulcl.png" style="
position: relative;
top: 3px;
" /><span> About</span></a></li>
<li><a href='#'><img src="http://i57.tinypic.com/ax0fhu.png" style="
position: relative;
top: 3px;
" /><span> Product 1</span></a></li>
<li><a href='#'><img src="http://i57.tinypic.com/ax0fhu.png" style="
position: relative;
top: 3px;
" /><span> Product 2</span></a></li>
<li><a href='#'><img src="http://i62.tinypic.com/35cg6s6.png" style="
width: 22px;
height: 22px;
position: relative;
top: 3px;
" /><span> Sitemap</span></a></li>
<li><a href='#'><img src="http://i59.tinypic.com/208gxs4.png" style="
position: relative;
top: 3px;
" /><span> Advertise</span></a></li>
<li class='last'><a href='#'><img src="http://i58.tinypic.com/2nlycu8.png" style="
position: relative;
top: 3px;
" /><span></span> Contact</a></li>
</ul>
</div>
<div class="wrapper">
<a class="icon facebook" href="#"><span class="zocial-facebook"></span></a>
<a class="icon twitter" href="#"><span class="zocial-twitter"></span></a>
<a class="icon google" href="#"><span class="zocial-google"></span></a>
<a class="icon linkedin" href="#"><span class="zocial-linkedin"></span></a>
</div>
</nav>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
(function() {
var trunk = $('body');
$('.menu-toggle').bind('click', function() {
body.toggleClass('menu-open');
furnish false;
});
})();
</script>

<script src="https://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

Step 5: Replace hashes(#) amongst your tabs in addition to social networks links.

Step 6: Click on salve in addition to yous are done successfully!

Customization:

Replace hashes(#) amongst your tabs in addition to social network links.
Change code of the color inwards the highlighted slice of code to modify hover color of tabs( background: #67B045;).
Replace the text of tabs amongst your desired text.
To add together a novel tab add together the below code inwards carte code section:

<li><a href='#'><img src="http://i57.tinypic.com/ax0fhu.png" style="position: relative;top: 3px;" /><span> Product 1</span></a></li>

Replace the dark colored link amongst icon of your tab. Get carte icons at http://iconizer.net

Hope yous similar this carte in addition to it is working fine on your blog. Give me your feedback below. Share this ship service amongst others in addition to subscribe to larn latest tidings most blogger menus. Keep visiting 101Helper :).

Search tags: Slide out carte for blogger, blogger slide out menu, wordpress mode carte for blogger, blogger carte amongst icons, blogger carte amongst social buttons, blogger carte amongst search box, 101helper blogger menus.