Dưới đây là mã để tạo menu điều hướng trên cùng cho màn hình điện thoại và máy tính bảng bằng CSS và JavaScript:
Ví dụ
<!DOCTYPE html> <html lang="vi"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Menu Điện Thoại</title> <style> body { margin: 0px; padding: 0px; } nav { position: relative; top: 0; width: 100%; background-color: rgb(39, 39, 39); overflow: auto; height: auto; } .links { display: inline-block; text-align: center; padding: 14px; color: rgb(178, 137, 253); text-decoration: none; font-size: 17px; } .links:hover { background-color: rgb(100, 100, 100); } .selected { background-color: rgb(0, 18, 43); } .hamburger { color: white; font-weight: bolder; display: none; } @media screen and (max-width: 600px) { nav a:not(:first-child) { display: none; } nav a.hamburger { float: right; display: block; padding: 12px; } nav.openNav a.hamburger { position: absolute; right: 0; bottom: 0; } nav.openNav a { float: none; display: block; text-align: center; } } </style> </head> <body> <nav class="bottomNav"> <a class="links selected" href="#"> Trang chủ</a> <a class="links" href="#"> Đăng nhập</a> <a class="links" href="#"> Đăng ký</a> <a class="links" href="#"> Liên hệ</a> <a class="links" href="#"> Thêm thông tin</a> <a class="hamburger">☰</a> </nav> <div> <p>Văn bản mẫu ở đây </p> <p>Văn bản mẫu ở đây </p> </div> <script> function toggleNav() { var x = document.getElementsByTagName("nav")[0]; if (x.className === "bottomNav") { x.className += " openNav"; } else { x.className = "bottomNav"; } } document.querySelector(".hamburger").addEventListener("click", toggleNav); </script> </body> </html>
Kết quả
Mã trên sẽ cho ra kết quả như sau:
Khi thu nhỏ màn hình hoặc trên thiết bị di động, nút hamburger sẽ hiển thị như sau:
Khi nhấn nút hamburger:
