Menu mobile slide cho blogspot với javascript không jquery

Với việc lướt web được người dùng chủ yếu sử dụng trên nền tảng thiết bị di động thông minh thì máy tính bàn và laptop dần bị lùi lại phía sau.

Cùng với nó là sự bất cập của các công cụ điều hướng trên các blog/web.Menu tương thích với mobile cũng đã nhiều blog thủ thuật chia sẻ,nói chung là đa dạng và phong phú.

Dưới đây là một dạng menu slide cho blogspot tương thích với mobile không cần jquery hỗ trợ.Menu này thường dùng cho blog có header cố định trên đầu blog.

Bao gồm 2 loại:

- Trượt ngang
- Trượt xuống.

Loại 1:Trượt ngang

DEMO

Cần có font awesome

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

+ Thêm CSS

.sidenav{height:100%;width:0;position:fixed;z-index:999;top:0;left:0;background-color:#fff;overflow-x:hidden;overflow-y:auto;transition:0.5s;padding-top:40px}
.sidenav-icon{position:fixed;z-index:990;top:10px;left:10px;font-size:26px;cursor:pointer;color:#000}
.sidenav ul{list-style:none;padding-bottom:50px}
.sidenav ul li{display:block;margin:0;padding:0;text-align:center;border-bottom:1px dotted #ddd}
.sidenav ul li a{display:block;color:#4a4a4a;font-size:15px;padding:4px 0}
.sidenav ul li a:hover{background:#34a0fe;color:#fff}.sidenav .closebtn{position:absolute;top:20px;right:25px;font-size:17px;color:#000;margin-left:50px}

+ Thêm HTML

Đặt trong cặp thẻ <header>---</header>

<div class='sidenav' id='mySidenav'>
<a class='closebtn' href='javascript:void(0)' onclick='closeNav()'><i class='fa fa-times' aria-hidden="true"></i></a>
<ul>
<li><a href='https://www.blogtdb.info'>HOME</li>
<li><a href='/'> Blogspot AMP</a></li>
<li><a href='/'> Seo blogspot</a></li>
<li><a href='/'>Ứng dụng từ CSS</a></li><><a href='/'> Template free</a></li>
<li><a href='/'>Button share social</a></li>
<li><a href='/'>Recent Posts</a></li><li><a href='/'>Comments</a></li>
<li><a href='/'>Author box</a></li>
<li><a href='/'>Random Posts</a></li><li><a href='/'>Site Map</a></li>
<li><a href='/'>Menu</a></li><li><a href='/'>Popular Posts</a></li>
</ul>
</div> 
<span class='sidenav-icon' onclick='openNav()'><i class="fa fa-bars" aria-hidden="true"></i></span>

+ Thêm javascript

<script>
function openNav(){document.getElementById("mySidenav").style.width="250px"}

function closeNav(){document.getElementById("mySidenav").style.width="0"}
</script>

Loại 2: Trượt xuống

DEMO

+ Thêm CSS

.sidenav{height:0%;width:250px;position:fixed;z-index:999;top:0;left:0;background-color:#fff;overflow-x:hidden;transition:0.5s;padding-top:0}
.sidenav-icon{position:fixed;z-index:990;top:0;left:10px;font-size:24px;cursor:pointer;color:#000}
.sidenav-content {position:relative;top:0%;text-align:center;margin-top:30px;padding-bottom:50px}
.sidenav ul{list-style:none}
.sidenav ul li{display:block;margin:0;padding:0;text-align:center;border-bottom:1px dotted #ddd}
.sidenav ul li a{display:block;color:#4a4a4a;font-size:15px;padding:4px 0}
.sidenav ul li a:hover{background:#34a0fe;color:#fff}
.sidenav .closebtn{position:absolute;top:10px;right:25px;font-size:17px}

+ Thêm HTML

<div class='sidenav' id='mySidenav'>
          <a class='closebtn' href='javascript:void(0)' onclick='closeNav()'><i class='fa fa-times' aria-hidden="true"></i></a>
  <div class='sidenav-content'>
  <ul>
<li><a href='https://www.blogtdb.info'>HOME</a></li>
<li><a href='/'> Blogspot AMP</a></li>
<li><a href='/'> Seo blogspot</a></li>
<li><a href='/'>Ứng dụng từ CSS</a></li><li><a href='/'> Template free</a></li>
<li><a href='/'>Button share social</a></li>
<li><a href='/'>Recent Posts</a></li><li><a href='/'>Comments</a></li>
<li><a href='/'>Author box</a></li>
<li><a href='/'>Random Posts</a></li><li><a href='/'>Site Map</a></li>
<li><a href='/'>Menu</a></li><li><a href='/'>Popular Posts</a></li>
</ul>
    </div>
      </div> 
        <span class='sidenav-icon' onclick='openNav()' title='Danh mục'><i class='fa fa fa-bars' aria-hidden="true"></i></span>

+ Thêm javascript

<script>
function openNav(){document.getElementById("mySidenav").style.height="100%"}

function closeNav(){document.getElementById("mySidenav").style.height="0"}
</script>