Menu
Hello everyone today I’m going to share another fixed menu for blogger, when someone click on Show/Hide button (div) that menu will slide out from left side of the page, you can see in the demo page or above image that you can use it as categories of your blog or as you want and also it’s comfortable for your readers when they scroll down then menu will be the same fixed position, if someone want to close the menu then just need to click again on hide/show button, then menu will automatically hide by sliding effects as well, it’s work based on jQuery and CSS, many thanks to most popular designing website codrops for creating this kind of awesome slide out menu for us, their i found many good designs that we can use it on blogger, but before using for blogger we need to modify or edit code and it’s really hard for newbies, but no worries i was just busy with my some other works but now i have planned that i will give many useful and awesome widgets and templates for blogger so stay connected with us :)

So if you think that menu is suitable or useful for your blog then what for waiting just follow the below simple steps and add it you blog,

Also Read:- New Floating Social Sharing Bar Widget for Blogger / Blogspot

Add jQuery Slide Menu to Blogger

I have made Installation too easy just need to add code into HTML/JavaScript gadget and you have done.. but if you are new blogger then i need to explain as usual so follow the steps and know that how to find HTML/JavaScript gadget in blogger and how to install this widget as well.

Step : 1

  • Go to Blogger—->Layout—>Add a gadget
  • Choose HTML/JavaScript from the list
  • Copy and paste below code just into it.
<script src="http://makingdifferent.github.io/blogger-widgets/Slide_Menu.js"></script>
<style>
/* General styles for all menus */
.cbp-spmenu {
background: #F9EAD4;
position: fixed;
border-right:5px solid #F9780E;
}

.cbp-spmenu h3 {
color: #FFFFFF;
font-size: 1.9em;
padding: 20px;
margin: 0;
font-weight: 300;
background: #F9780E;
}

.cbp-spmenu a {
display: block;
color: #000000;
font-size: 1.1em;
font-weight: 300;
}

.cbp-spmenu a:hover {
background: #F9780E;
 color: #000000;
}

.cbp-spmenu a:active {
background: #ffffff;
 color: #47a3da;
}

.cbp-spmenu-vertical {
width: 240px;
height: 100%;
top: 0;
z-index: 10000;
}

.cbp-spmenu-vertical a {
border-bottom: 1px solid #F9780E;
padding: 1em;
text-decoration: none;
}

.cbp-spmenu-horizontal {
width: 100%;
height: 150px;
left: 0;
z-index: 10000;
overflow: hidden;
}

.cbp-spmenu-horizontal h3 {
height: 100%;
width: 20%;
float: left;
}

.cbp-spmenu-horizontal a {
float: left;
width: 20%;
padding: 0.8em;
border-left: 1px solid #F9780E;
}

/* Vertical menu that slides from the left or right */

.cbp-spmenu-left {
left: -240px;
}

.cbp-spmenu-right {
right: -240px;
}

.cbp-spmenu-left.cbp-spmenu-open {
left: 0px;
}

.cbp-spmenu-right.cbp-spmenu-open {
right: 0px;
}

/* Transitions */

.cbp-spmenu,
.cbp-spmenu-push {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
}

/* Example media queries */

@media screen and (max-height: 26.375em){

.cbp-spmenu-vertical {
font-size: 90%;
width: 190px;
}
.cbp-spmenu-left{
left: -190px;
}
}
</style>
<nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left" id="cbp-spmenu-s1">
<h3>All Categories</h3>
<a href="#">Make Money Online</a>
 <a href="#">SEO</a>
 <a href="#">Blogger Tips and Tricks</a>
 <a href="#">Edit</a>
 <a href="#">Edit</a>
 <a href="#">Edit</a>
 <a href="#">Edit</a>
 <a href="#">Edit</a>
 <a href="#">Edit</a>
 <a href="#">Edit</a>
 <a href="#">Edit</a>
 <a href="#">Edit</a>
 <a href="#">Edit</a>
</nav>
<script>
var menuLeft = document.getElementById( 'cbp-spmenu-s1' ),
showLeft = document.getElementById( 'showLeft' ),
body = document.body;
showLeft.onclick = function() {
classie.toggle( this, 'active' );
classie.toggle( menuLeft, 'cbp-spmenu-open' );
disableOther( 'showLeft' );
};

function disableOther( button ) {
if( button !== 'showLeft' ) {
classie.toggle( showLeft, 'disabled' );
}}
</script>

Customize

Now you have to change the menu links for your own links and titles, and you may want to change the menu colors as well.

Example :- <li><a href=”#“>Edit</a></li>

change The symbol # to your link, and change the word Edit to your title.
you can repeat this part of code as you like,
every time you add this part of code again to your menu code, a new link will be added to your menu.

To change your menu colors you have to edit the CSS code.  (Recommended:-  Use our HTML Editor for customizing this widget)

Also Read:- Facebook type jQuery Pop-up With Like Box & Timer for Blogger/Blog

Step:- 2

Yes this is step 2 and final step after it you will able to use this widget in to your blog, so don’t be lazy and follow this step as well :P
In this step you need to understand that how it will works , first you need to decide that where you want to put the button/link which will someone click on it to open the menu by sliding from left side of the page.
as example if you want to put as a link in to your primary or secondary menu bar then see the below code.
your primary menu bar code is look like this :

<ul class="xyz">
<li><a href="#>Home</a></li>
<li><a href="#>About</a></li>
<li><a href="#>Contact US</a></li>
</ul>

Oky? then now you need to add one more option on it by adding the below line with id=”showLeft”

<li><a id="showLeft" href="#>All Categories</a></li>

finally your primary menu bar code will look like this :

<ul>
<li><a href="#>Home</a></li>
<li><a href="#>About</a></li>
<li><a href="#>Contact US</a></li>
<li><a id="showLeft" href="#>All Categories</a></li>
</ul>

Now when someone click on the “All Categories” into your primary menu bar then menu will appear by sliding from left side of the page as you seen into demo page.