Hướng dẫn tạo thanh menu dưới đáy màn hình cho blogger

Thanh menu điều hướng, giúp người đọc dễ dàng tiếp cận nội dung cần tìm.

 Thanh menu hay còn được gọi là thanh điều hướng, nó có chức năng phân loại nội dung trên website thành các danh mục cụ thể. Giúp cho người đọc dễ dàng tiếp cận được nội dung muốn xem.

tạo thanh menu cho blogger

Hướng dẫn tạo thanh menu dưới đáy màn hình cho blogger

Bước 1. Copy toàn bộ đoạn mã dưới đây và dán vào trước thẻ </body>

<nav class="mobile" id="ATnav">
  <ul>
  <li><a href="#"><svg class="s-size" viewbox="0 0 24 24">
    <path d="M15 13L11 9V12H2V14H11V17M22 12H20V21H4V16H6V19H18V11L12 5L7 10H4L12 2L22 12Z" fill="currentColor">
</path></svg><span>Home</span></a></li>
  <li><a href="#"><svg class="s-size" viewbox="0 0 24 24">
    <path d="M17.66 11.2C17.43 10.9 17.15 10.64 16.89 10.38C16.22 9.78 15.46 9.35 14.82 8.72C13.33 7.26 13 4.85 13.95 3C13 3.23 12.17 3.75 11.46 4.32C8.87 6.4 7.85 10.07 9.07 13.22C9.11 13.32 9.15 13.42 9.15 13.55C9.15 13.77 9 13.97 8.8 14.05C8.57 14.15 8.33 14.09 8.14 13.93C8.08 13.88 8.04 13.83 8 13.76C6.87 12.33 6.69 10.28 7.45 8.64C5.78 10 4.87 12.3 5 14.47C5.06 14.97 5.12 15.47 5.29 15.97C5.43 16.57 5.7 17.17 6 17.7C7.08 19.43 8.95 20.67 10.96 20.92C13.1 21.19 15.39 20.8 17.03 19.32C18.86 17.66 19.5 15 18.56 12.72L18.43 12.46C18.22 12 17.66 11.2 17.66 11.2M14.5 17.5C14.22 17.74 13.76 18 13.4 18.1C12.28 18.5 11.16 17.94 10.5 17.28C11.69 17 12.4 16.12 12.61 15.23C12.78 14.43 12.46 13.77 12.33 13C12.21 12.26 12.23 11.63 12.5 10.94C12.69 11.32 12.89 11.7 13.13 12C13.9 13 15.11 13.44 15.37 14.8C15.41 14.94 15.43 15.08 15.43 15.23C15.46 16.05 15.1 16.95 14.5 17.5H14.5Z" fill="currentColor">
</path></svg><span>Trending</span></a> </li>
    <li><a href="#"><svg class="s-size" viewbox="0 0 24 24">
    <path d="M13.5,4A1.5,1.5 0 0,0 12,5.5A1.5,1.5 0 0,0 13.5,7A1.5,1.5 0 0,0 15,5.5A1.5,1.5 0 0,0 13.5,4M13.14,8.77C11.95,8.87 8.7,11.46 8.7,11.46C8.5,11.61 8.56,11.6 8.72,11.88C8.88,12.15 8.86,12.17 9.05,12.04C9.25,11.91 9.58,11.7 10.13,11.36C12.25,10 10.47,13.14 9.56,18.43C9.2,21.05 11.56,19.7 12.17,19.3C12.77,18.91 14.38,17.8 14.54,17.69C14.76,17.54 14.6,17.42 14.43,17.17C14.31,17 14.19,17.12 14.19,17.12C13.54,17.55 12.35,18.45 12.19,17.88C12,17.31 13.22,13.4 13.89,10.71C14,10.07 14.3,8.67 13.14,8.77Z" fill="currentColor">
</path></svg> <span>About</span></a></li>
        
    <li><a href="#"><svg viewbox="0 0 24 24">
    <path d="M17.5,7A5.5,5.5 0 0,1 23,12.5A5.5,5.5 0 0,1 17.5,18C15.79,18 14.27,17.22 13.26,16H10.74C9.73,17.22 8.21,18 6.5,18A5.5,5.5 0 0,1 1,12.5A5.5,5.5 0 0,1 6.5,7H17.5M6.5,9A3.5,3.5 0 0,0 3,12.5A3.5,3.5 0 0,0 6.5,16C7.9,16 9.1,15.18 9.66,14H14.34C14.9,15.18 16.1,16 17.5,16A3.5,3.5 0 0,0 21,12.5A3.5,3.5 0 0,0 17.5,9H6.5M5.75,10.25H7.25V11.75H8.75V13.25H7.25V14.75H5.75V13.25H4.25V11.75H5.75V10.25M16.75,12.5A1,1 0 0,1 17.75,13.5A1,1 0 0,1 16.75,14.5A1,1 0 0,1 15.75,13.5A1,1 0 0,1 16.75,12.5M18.75,10.5A1,1 0 0,1 19.75,11.5A1,1 0 0,1 18.75,12.5A1,1 0 0,1 17.75,11.5A1,1 0 0,1 18.75,10.5Z" fill="currentColor">
</path></svg><span>Games</span></a></li>
   
    <li><a href="#"><svg viewbox="0 0 24 24">
    <path d="M14,20H10V11L6.5,14.5L4.08,12.08L12,4.16L19.92,12.08L17.5,14.5L14,11V20Z" fill="currentColor">
</path></svg><span>Back-to-Top</span></a></li>
    </ul>
</nav>

Bước 2. Dán đoạn CSS dưới đây vào trước thẻ </head>

<style>
 nav.mobile { display: flex; position: fixed; bottom: 0; width: 100%; padding: 0.8rem 0; background: #fefefe; border-top: 1px solid #ccc; z-index: 9999; margin: 0 auto; } .mobile { transition: 0.5s ease!important; } nav.mobile ul { list-style: none; display: flex; justify-content: space-between; align-items: center; width: 100%; margin: 0; justify-self: center; vertical-align: middle; } nav.mobile ul li { display: flex; flex-direction: column; align-items: center; font-size: 0.7rem; flex-grow: 1; margin: 0; } nav.mobile ul li a { color: #222; font-size: inherit; display: var(--prP3M8); flex-direction: var(--mZSq9k); }nav.mobile ul li a svg{width: 24px; height: 24px; display: block;margin: 0 auto; } 
</style>

Nếu muốn ẩn Menu khi cuộn trang web xuống thì thêm đoạn IS này trước thẻ </body>

<script>
//<![CDATA[
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
  if (prevScrollpos > currentScrollPos) {
    document.getElementById("ATnav").style.bottom = "0";
  } else {
    document.getElementById("ATnav").style.bottom = "-80px";
  }
  prevScrollpos = currentScrollPos;
}
//]]>
</script> 

Bước 3. Chỉnh sửa lại các danh mục cho phù hợp với nội dung website của bạn.

Lời kết

Trên đây là hướng dẫn tạo menu dưới đáy màn hình cho blogspot. Chúc bạn thực hiện thành công!

1 nhận xét

  1. đặt liên kết cùng phát triển nào bạn ơi:
    Tên hiển thị: iTechrum - Blog chia sẻ miễn phí
    Link blog: https://www.iTechrum.com/
    Mô tả: iTechrum - Blog chia sẻ miễn phí
Developed by Jago Desain