Wednesday, May 17

Left To Right Sliding Menu Navigation For Blogger

Left To Right Sliding Menu Navigation For Blogger

Sliding menu navigation is the most advanced looking navigation system you can embed in your blog or site. It's a menu which slides from left to right on clicking menu icon ☰. The menu remain hidden unless you click on the menu icon ☰. It uses pure html , css and js which makes it lightning fast and it can be easily embedded in blogger.




How to install sliding menu navigation for blogger ?


HTML
<div style="width=100%">
<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&#215;</a>
  <a href="page url">page name</a>
  <a href="page url">page name</a>
  <a href="page url">page name</a>
  <a href="page url">page name</a>
</div>
<div id="main">
<span style="color: white;font-size: 25px;border: none;cursor: pointer;vertical-align:middle;font-weight:bold;" onclick="openNav()">&#9776;</span><a class="navtxt1" href="/">Blog name</a></div></div>
<script>
function openNav() {
    document.getElementById("mySidenav").style.width = "250px";  
document.getElementById("main").style.marginLeft = "250px";
}
function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
    document.getElementById("main").style.marginLeft= "0";
}</script>


Note: Place above codes just after <body expr:class='&quot;loading&quot; + data:blog.mobileClass'> or <body> in your html. Change red bold text with your blog name, page name and urls.

CSS
.sidenav {height: 100%;width: 0;position: fixed;z-index: 1;top: 0;left: 0;right:0;background-color:#ffffff;overflow-x: hidden;transition: 0.5s;padding-top: 60px;}.sidenav a {padding: 8px 8px 8px 32px;text-decoration: none;font-size: 25px;color: #818181;display: block;transition: 0.3s;}.sidenav a:hover, .offcanvas a:focus{color: #000;}.sidenav .closebtn {position: absolute;top: 0;right: 25px;font-size: 36px;margin-left: 50px;}#main1 {transition: margin-left .5s;padding: 0 0 0 5px;background:black;color: white;font-size: 25px;width:100%;}
@media screen and (max-height: 450px) {.sidenav {padding-top: 15px;}.sidenav a {font-size: 18px;}}.navtxt1 {color: white !important;font-size:24px;vertical-align:middle;text-decoration:none;margin:0 0 0 5px;}.navtxt1:hover{text-decoration:none;}.sidenav:hover{border-right:5px solid red;}


Note: Place above codes before ]]></b:skin> in your html and save changes.