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 ?
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()">×</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()">☰</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='"loading" + 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.
