VERTICAL SLIDE V2
CSS
Put before ]]></b:skin> or </style> if you have have already modifying the default template, otherwise it's </style>..menu{right:33px;padding:0;color:#666;font-size:30px;font-weight:400;cursor:pointer;display:inline;transition:all .4s ease-in-out;}
.menu{position:fixed;top:50px}
#cssmenu >ul >li.home .close-menu:hover{top:50px}
#cssmenu >ul >li.home .close-menu{top:50px}
#css-menu{top:10px}
.close-menu:hover{-webkit-transform:rotateZ(90deg);-moz-transform:rotateZ(90deg);-ms-transform:rotateZ(90deg);-o-transform:rotateZ(90deg);transform:rotateZ(90deg)}
.menu:hover{color:#777;}
#css-menu{position:fixed;right:-340px;z-index:9999;background:#fff;height:100%;transition:all .3s ease;border-left:1px solid #ddd}
#cssmenu,#cssmenu ul,#cssmenu li,#cssmenu a{margin:0;padding:0;border:0;list-style:none;font-weight:normal;text-decoration:none;line-height:1;font-family:"Open Sans",sans-serif;font-size:14px;position:relative}
#cssmenu a{line-height:1.3;padding:12px 15px}
#cssmenu{width:340px}
#cssmenu >ul >li{cursor:pointer;background:#fff;border-bottom:1px solid #ddd}
#cssmenu >ul >li:first-child{border-bottom:0}
#cssmenu >ul >li:last-child{border-bottom:1px solid #ddd}
#cssmenu >ul >li:last-child >a{border-bottom:0}
#cssmenu >ul >li >a{font-size:14px;display:block;color:#666;background:#fff;padding:12px 15px}
#cssmenu >ul >li >a:hover{text-decoration:none;background:#ddd}
#cssmenu >ul >li.active{font-weight:600}
#cssmenu >ul >li.home .close-menu{color:#666;font-size:30px;font-weight:300;padding:0;position:absolute;right:0;z-index:10000;width:45px;text-align:center;transition:all .4s ease-in-out}
#cssmenu >ul >li.home .close-menu:hover{right:-2px;color:red}
#cssmenu >ul >li.has-sub >a:after{content:'';position:absolute;top:15px;right:10px;border:5px solid transparent;border-left:5px solid #555}
#cssmenu >ul >li.has-sub.active >a:after{right:14px;top:17px;border:5px solid transparent;border-top:5px solid #555}
#cssmenu ul ul{padding:0;display:none}
#cssmenu ul ul a{background:#fff;display:block;color:#797979;font-size:13px}
#cssmenu ul ul a:hover{color:#000}
#cssmenu ul ul li{border-bottom:1px solid #ddd;padding-left:20px}
#cssmenu ul ul li:first-child{border-top:1px solid #ddd}
#cssmenu ul ul li:last-child{border:none}
#cssmenu ul ul li.odd .tombolpaypal a{background:none}
#cssmenu ul ul li.pp:last-child{border-top:1px solid #ddd;text-align:center;padding:10px 5px 0}
.tombolpaypal{text-align:center;text-decoration:none;padding:0;background:none}
.paypal{background:#555;border:0;margin:0 auto;padding:5px 18px;font-size:18px;font-weight:600;color:#fff;text-align:center;display:inline-block;border-radius:3px}
.paypal:hover{background:#333}
.tombolpaypal a{text-decoration:none}
.tombolpaypal span.infopaypal{color:#666;font-size:14px;margin:0;padding:0;line-height:1.4em}
#page_content{transition:all .3s ease}HTML
Usually right under the <body> .Replace the original or add the additional Navigational Bar.
<div class='menu'><i class='fa fa-bars'/></div>
<div id='css-menu'>
<nav id='cssmenu' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement' role='navigation'>
<ul>
<li class='home'><span class='close-menu' style='font-size:30px;font-weight:400' title='Close'><i class='fa fa-times'/></span></li>
<li><a href='/' itemprop='url' title='Home'><span itemprop='name'>Home</span></a></li>
<li><a href='#' itemprop='url' title='Sitemap'><span itemprop='name'>Sitemap</span></a></li>
<li class='has-sub'><a href='#' title='About This Blog'><span>About :</span></a>
<ul>
<li><a href='#' itemprop='url' title='About'><span itemprop='name'>About Us</span></a></li>
<li><a href='#' itemprop='url' title='Contact'><span itemprop='name'>Contact</span></a></li>
<li class='last'><a href='#' itemprop='url' title='Privacy'><span itemprop='name'>Privacy</span></a></li>
</ul>
</li>
<li><a href='#' itemprop='url' title='Security'><span itemprop='name'>Security</span></a></li>
<li><a href='#' itemprop='url' title='Privacy'><span itemprop='name'>Privacy</span></a></li>
<li class='has-sub'><a href='#' title='More'><span>Web Tools</span></a>
<ul class='expand'>
<li><a href='#' itemprop='url' title='DESC'><span itemprop='name'>TITLE</span></a></li>
<li><a href='#' itemprop='url' title='DESC'><span itemprop='name'>TITLE</span></a></li>
<li><a href='#' itemprop='url' title='DESC'><span itemprop='name'>TITLE</span></a></li>
<li><a href='#' itemprop='url' title='DESC'><span itemprop='name'>TITLE</span></a></li>
<li><a href='#' itemprop='url' title='DESC'><span itemprop='name'>TITLE</span></a></li>
<li><a href='#' itemprop='url' title='DESC'><span itemprop='name'>TITLE</span></a></li>
<li><a href='#' itemprop='url' title='DESC'><span itemprop='name'>TITLE</span></a></li>
<li><a href='#' itemprop='url' title='DESC'><span itemprop='name'>TITLE</span></a></li>
<li><a href='#' itemprop='url' title='DESC'><span itemprop='name'>TITLE</span></a></li>
<li class='last'><a href='#' rel='nofollow' target='_blank' title='DESC'><span>TITLE</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='#' title='Donate'><span>Donate</span></a>
<ul>
<li>
<span class='tombolpaypal'>
<span class='infopaypal'>Buy me a cup of coffee.<br/>
Thank you!</span>
<a href='/LINK.COM' target='_blank' title='Donate via Fasapay'>
<span class='paypal'>Donate via Fasapay</span></a>
</span>
</li>
</ul>
</li>
</ul>
</nav>
</div>JAVASCRIPT
Put these before </body> :<script type='text/javascript'>
//<![CDATA[
$(function(){$(".menu").click(function(){$("#css-menu").css({right:"0"});$("#page_content").css({margin:"0 240px 0 -350px"})});$(".close-menu").click(function(){$("#css-menu").css({right:"-350px"});$("#page_content").css({margin:"0"})})});
$("#cssmenu ul ul li:odd").addClass("odd");$("#cssmenu ul ul li:even").addClass("even");$("#cssmenu > ul > li > a").click(function(){$("#cssmenu li").removeClass("active");$(this).closest("li").addClass("active");var e=$(this).next();if(e.is("ul")&&e.is(":visible")){$(this).closest("li").removeClass("active");e.slideUp("normal")}if(e.is("ul")&&!e.is(":visible")){$("#cssmenu ul ul:visible").slideUp("normal");e.slideDown("normal")}if($(this).closest("li").find("ul").children().length==0){return true}else{return false}});
//]]>
</script>IMPORTANT PART #1
AFTER THE TOP NAVBAR (SECOND NAVBAR)
Add this <div id="page_content"> like this example:<div class='outer-wrapper'>
<div class='inner-wrapper'>
<div id='page_content'>
<div class='main-wrapper'>OR AT THE TOP NAVBAR :
<div class='content-wrapper'>
<div class='menu'><i class='fa fa-bars'/></div>
• • •
• • •
</nav>
</div>
<div id='page_content'>
<div id='outer-wrapper'>
<div id='main-wrapper'>OR
<div class='menu'><i class='fa fa-bars'/></div>
• • •
• • •
</nav>
</div>
• • •
• • •
<div class='ct-wrapper'>
<div class='outer-wrapper'><div class='inner-wrapper'>
<div id='page_content'>IMPORTANT PART #2
And then add </div> like this example:</div>
</footer>OR
</footer>
</div>See the one suit the template.
LAST PART
• You need JQuery library.• You need Font Awesome.
ADDITIONAL WORKAROUND SOME LAYOUT ERROR
body#layout ul, #layout ul {display:none;}