Slide Out Left Menu Using Javascript, HTML and CSS

A new set of fixed left menu that will slide out from the left side of the page.

You first need to follow the step below to add the code in your website or Blog.

Live Demo

  First the HTML which be placed below the body tag.

<nav class='frinmash-menu frinmash-menu-vertical frinmash-menu-left' id='frinmash-menu'> <h3>FrinMash</h3> <li><a href='https://bloggercsstricks.blogspot.in/'>Home</a></li> <li><a href='#'>About </a></li> <li><a href='#'>Search </a></li> <li><a href='#'>Tech</a></li> <li><a href='#'>Privacy</a></li> <li> <a href='#'>Tools</a></li> <li><div border='false' bordercolor='blue' class='fb-like-box' faces='true' header='false' height='200' href='https://www.facebook.com/FrinMash' stream='false' width='150'></div></li> </nav>

Now the CSS part add using General style in your template

/* Color using FrinMash */ body { font-family: 'Lato', Calibri, Arial, sans-serif; color: #47a3da; } a { color: #f0f0f0; text-decoration: none; }/* General styles for all menus */ .frinmash-menu { background: #47a3da; position: fixed; } .frinmash-menu h3 { color: #afdefa; font-size: 1.9em; padding: 20px; margin: 0; font-weight: 300; background: #0d77b6; } .frinmash-menu a { display: block; color: #fff; font-size: 1.1em; font-weight: 300; } .frinmash-menu a:hover { background: #258ecd; } .frinmash-menu a:active { background: #afdefa; color: #47a3da; } /* Orientation-dependent styles for the content of the menu */ .frinmash-menu-vertical { width: 240px; height: 100%; top: 0; z-index: 1000; } .frinmash-menu-vertical a { border-bottom: 1px solid #258ecd; padding: 1em; } /* Vertical menu that slides from the left or right just change */ .frinmash-menu-left { left: -240px; } .frinmash-menu-left.frinmash-menu-open { left: 0px; } /* Transitions */ .frinmash-menu, .frinmash-menu-push { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease; }

Add the button code were you want it to appear :-

<center> <button id='showLeft'><pre class='prettyprint'> Show/Hide Left Slide Menu</pre></button></center>

Now adding the Javascript code : -

<script> var menuLeft = document.getElementById( 'frinmash-menu' ), showLeft = document.getElementById( 'showLeft' ), body = document.body; showLeft.onclick = function() { classie.toggle( this, 'active' ); classie.toggle( menuLeft, 'frinmash-menu-open' ); disableOther( 'showLeft' ); }; function disableOther( button ) { if( button !== 'showLeft' ) { classie.toggle( showLeft, 'disabled' ); } } (function(e){"use strict";function t(e){return new RegExp("(^|\\s+)"+e+"(\\s+|$)")}function s(e,t){var s=n(e,t)?i:r;s(e,t)}var n,r,i;if("classList"in document.documentElement){n=function(e,t){return e.classList.contains(t)};r=function(e,t){e.classList.add(t)};i=function(e,t){e.classList.remove(t)}}else{n=function(e,n){return t(n).test(e.className)};r=function(e,t){if(!n(e,t)){e.className=e.className+" "+t}};i=function(e,n){e.className=e.className.replace(t(n)," ")}}e.classie={hasClass:n,addClass:r,removeClass:i,toggleClass:s,has:n,add:r,remove:i,toggle:s}})(window)</script> 

SEE MORE:- Blank Blogger Template