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.

3 comments:

  1. Firstly, thank you for your sharing about this development tips. I believe this article will useful for many readers.jogos friv gratis
    Jogos online
    jogos 4 school

    ReplyDelete
  2. Thank goodness! While he can be wary of strangers (his previous owner was not nice to him), Finn is my shadow--never more than ten feet away...unless he's sleeping. He loves to play fetch and patrol his yard for squirrels, birds, and lawn mowers. The more mud (as evidenced in the picture), the better! He is a short boy, so his long-legged sister usually out runs him, but his energy is endless when he has the right motivation--catching Libby.
    kizi games 2 unblocked
    free game online
    friv for school 2019

    ReplyDelete
  3. The beauty of youth is in its wasteful abundance: we make mistakes, lose jobs, break off with lovers, neglect friendships, forget birthdays when we are young. We know we are never far away from a second chance,life bursts with such a pressing immediacy, such an overwhelming vehemence that everything else must wait till we sort out life.
    Jogo para menina
    jogo 360
    io games

    ReplyDelete