Menu là một phần không thể thiếu trong website. Hiện nay người dùng đang lướt web trên nhiều thiết bị với các kích thước khác nhau chính vì vậy chúng ta cần xây dựng menu thay đổi phù hợp với không gian trên từng thiết bị hay gọi là Responsive website. Trong bài viết này tôi sẽ hướng dẫn bạn từng bước.
Menu Responsive hoạt động như thế nào?
Menu website thì chắc ai cũng biết rồi nhưng với menu responsive thì đây là một khái niệm trong xây dựng giao diện web.
Có nghĩa menu website lướt trên nhiều thiết bị khác nhau thì menu được thay đổi để phù hợp với không gian, kích thước.
Khi vào thiết bị nhỏ menu ngang sẽ bị ẩn đi và thay vào đó là icon bars. Khi bấm vào icon thì menu xổ xuống.
Để tạo ra menu này cần sử dụng html, css, jquery, icon fontawesome. Bạn có thể xem chi tiết video ở bên dưới.
Chú ý: Khi xem video bạn nên kết hợp giấy và bút để ghi lại ý tưởng, sau đó những phần nào chưa nắm rõ thì đào sâu thêm. Còn muốn nhanh hơn nữa có thểm tham khảo chương trình Html Css 21 Ngày tại Unitop.vn để làm chủ kỹ năng tạo giao diện website của mình.
Bên dưới là tóm lược mã code của bài này, bạn có thể copy về máy tính của mình để ngâm cứu nhé.
Tạo menu responsive bằng html, css, jquery
Bước 1: Tạo cấu trúc Hml của menu
Bạn tạo ra một file trong server localhost có tên responsive-navbar.html với cấu trúc bên dưới.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" />
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<title>Responsive Navbar</title>
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="toggle">
<i class="fas fa-bars"></i>
</div>
<nav>
<ul id="main-menu">
<li>
<a href="">Trang chủ</a>
</li>
<li>
<a href="">Giới thiệu</a>
</li>
<li>
<a href="">Sản phẩm</a>
</li>
<li>
<a href="">Dịch Vụ</a>
</li>
<li>
<a href="">Blog</a>
</li>
<li>
<a href="">Liên hệ</a>
</li>
</ul>
</nav>
</div>
</div>
</body>
</html>
Trong cấu trức này bạn sử dụng thẻ nav để định nghĩa menu, mỗi phần từ của menu được biểu diễn thông qua cấu trúc ul li a.
Đoạn code bên dưới dùng để hiển thị icon bars, để xử lý khi người dùng bấm vào sẽ đẩy menu xuống. Icon tôi sử dụng icon fontawesome.
<div id="toggle">
<i class="fas fa-bars"></i>
</div>
Bước 2: Định dạng hiển thị của menu ngang
Phần này bạn có thể tạo ra một đoạn Internal Css hoặc tạo ra một file app.css riêng và inport vào tài liệu html.
* {
margin: 0px;
padding: 0px;
}
ul {
list-style-type: none;
}
nav {
background-color: #273c75;
}
#main-menu {
display: flex;
}
nav #main-menu li a {
color: #fff;
text-decoration: none;
display: block;
padding: 8px 15px;
}
nav #main-menu li:hover a {
background: #c23616;
transition: all 0.3s;
}
#toggle {
display: none;
background: #353b48;
color: #fff;
text-align: right;
padding: 10px;
font-size: 20px;
cursor: pointer;
}
@media screen and (max-width: 768px) {
#main-menu {
flex-direction: column;
text-align: center;
}
#toggle {
display: block;
}
nav {
display: none;
}
}
Ở đoạn code trên để ẩn hiện, thay đổi bố cục menu qua các thiết bị tôi sử dụng Media Query Css3.
@media screen and (max-width: 768px) {
#main-menu {
flex-direction: column;
text-align: center;
}
#toggle {
display: block;
}
nav {
display: none;
}
}
Bước 3: Xử lý ẩn hiện menu bằng Jquery
Khi làm việc với jquery bạn cần import thư viện jquery vào file html
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
Code js bạn có thể nhúng trực tiếp vào file html hoặc bạn tạo ra một file mới app.js và import file vào.
$(document).ready(function() {
$('#toggle').click(function() {
$('nav').slideToggle();
});
})
Để hiển rõ cách sử dụng làm việc về jquery bạ có thể tìm hiểu thêm chương trình Làm Chủ Jquery Siêu Tốc tại Unitop.vn. Chương trình đã hệ thống chi tiết phù hợp ngay cả với người mới bắt đầu.
Code hoàn chỉnh
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" />
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<title>Responsive Navbar</title>
</head>
<body>
<style>
* {
margin: 0px;
padding: 0px;
}
ul {
list-style-type: none;
}
nav {
background-color: #273c75;
}
#main-menu {
display: flex;
}
nav #main-menu li a {
color: #fff;
text-decoration: none;
display: block;
padding: 8px 15px;
}
nav #main-menu li:hover a {
background: #c23616;
transition: all 0.3s;
}
#toggle {
display: none;
background: #353b48;
color: #fff;
text-align: right;
padding: 10px;
font-size: 20px;
cursor: pointer;
}
@media screen and (max-width: 768px) {
#main-menu {
flex-direction: column;
text-align: center;
}
#toggle {
display: block;
}
nav {
display: none;
}
}
</style>
<script>
$(document).ready(function() {
$('#toggle').click(function() {
$('nav').slideToggle();
});
})
</script>
<div id="wrapper">
<div id="header">
<div id="toggle">
<i class="fas fa-bars"></i>
</div>
<nav>
<ul id="main-menu">
<li>
<a href="">Trang chủ</a>
</li>
<li>
<a href="">Giới thiệu</a>
</li>
<li>
<a href="">Sản phẩm</a>
</li>
<li>
<a href="">Dịch Vụ</a>
</li>
<li>
<a href="">Blog</a>
</li>
<li>
<a href="">Liên hệ</a>
</li>
</ul>
</nav>
</div>
</div>
</body>
</html>
