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>