Cách tạo thanh điều hướng đáp ứng bằng HTML và CSS
Xây dựng thanh điều hướng đáp ứng là một phần thiết yếu để cải thiện trải nghiệm người dùng và kỹ năng thiết kế web của bạn. Trong bài viết này, chúng tôi sẽ hướng dẫn bạn cách tạo một thanh điều hướng đáp ứng chỉ sử dụng HTML và CSS (thậm chí không phải một dòng JavaScript nào!).
Vì vậy, nếu bạn là người mới bắt đầu học phát triển giao diện người dùng và đang tìm cách xây dựng thanh điều hướng, bạn đã đến đúng nơi. Tuy nhiên, trước khi tìm hiểu sâu hơn, trước tiên chúng ta hãy hiểu các nguyên tắc thiết kế cơ bản của thanh điều hướng đáp ứng.
Mục Lục
Điều kiện tiên quyết: Ba yếu tố chính của thanh điều hướng
Rõ ràng là hầu hết các chủ sở hữu trang web muốn có được khách truy cập mới. Bước đầu tiên để làm như vậy là chỉ cho khách truy cập một con đường rõ ràng và ngắn gọn. Bạn phải xây dựng một thanh điều hướng khơi gợi trí tò mò và thu hút khách truy cập đồng thời. Bạn nên có ba yếu tố chính trong khi thiết kế một thanh điều hướng lý tưởng:
Giản dị
Nó phải rõ ràng và dễ đọc. Thay vì làm lộn xộn thanh điều hướng với các liên kết đến mọi trang, bạn nên chuyển sang các danh mục rộng hơn của trang web của mình. Sau đó, bạn có thể thêm menu phụ dưới dạng trình đơn thả xuống nếu cần.
Đáng chú ý
Một thanh điều hướng đơn giản sẽ không gây nhàm chán chút nào. Bạn nên chọn màu thương hiệu đã được quyết định trước để làm cho thiết kế nhất quán hơn. Bạn có thể thử nghiệm với nhiều cách phối màu và sử dụng các sắc thái sáng hơn hoặc tối hơn để làm nổi bật và menu thả xuống.
Phản ứng nhanh nhẹn
Một báo cáo sử dụng Internet toàn cầu của Statista cho thấy 59,5% dân số toàn cầu đang tích cực sử dụng Internet và 92,6% đang sử dụng nó qua thiết bị di động. Như vậy là quá đủ để hiểu tầm quan trọng của việc triển khai điều hướng đáp ứng trên thiết bị di động trên trang web của bạn.
Điều hướng cấp cao nhất trên thiết bị di động khá phổ biến. Bạn có thể sử dụng menu bánh hamburger, máy chém, biểu tượng nổi và tab. Đó là một vị cứu tinh khi bạn có năm danh mục trở lên với nhiều phân cấp. Điều hướng cấp cao nhất có thể tiết kiệm không gian màn hình đáng kể, đặc biệt khi bạn có một trang web có nhiều nội dung.
Các thanh tab với các biểu tượng có liên quan là sự phù hợp hoàn hảo cho thanh điều hướng dưới cùng vì chúng thường chứa ba đến năm menu ở cùng cấp độ phân cấp. Menu con và menu tuần tự theo danh mục chính với mối quan hệ cha-con.
Bây giờ các nguyên tắc thiết kế đã rõ ràng trong tâm trí bạn, hãy bắt đầu xây dựng menu. Chúng tôi sẽ tạo một điều hướng đáp ứng bằng CSS Flexbox và Media Queries từ đầu.
Vậy, thanh điều hướng của chúng ta sẽ như thế nào? Nó sẽ có điều hướng cấp cao nhất với:
- Logo
- Menu điều hướng
- Trình đơn thả xuống
- Menu Hamburger (sử dụng hack hộp kiểm)
Bắt đầu với HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Document</title>
</head>
<body>
<nav class="navbar">
<!-- LOGO -->
<div class="logo">MUO</div>
<!-- NAVIGATION MENU -->
<ul class="nav-links">
<!-- USING CHECKBOX HACK -->
<input type="checkbox" id="checkbox_toggle" />
<label for="checkbox_toggle" class="hamburger">☰</label>
<!-- NAVIGATION MENUS -->
<div class="menu">
<li><a href="/">Home</a></li>
<li><a href="/">About</a></li>
<li class="services">
<a href="/">Services</a>
<!-- DROPDOWN MENU -->
<ul class="dropdown">
<li><a href="/">Dropdown 1 </a></li>
<li><a href="/">Dropdown 2</a></li>
<li><a href="/">Dropdown 2</a></li>
<li><a href="/">Dropdown 3</a></li>
<li><a href="/">Dropdown 4</a></li>
</ul>
</li>
<li><a href="/">Pricing</a></li>
<li><a href="/">Contact</a></li>
</div>
</ul>
</nav>
</body>
</html>
Chúng tôi sẽ có menu thả xuống bên trong Dịch vụ (thực đơn chính. Chúng ta có thể bỏ qua menu bánh hamburger trong khi xây dựng thanh điều hướng trên máy tính để bàn. Rốt cuộc, chúng ta vẫn chưa thảo luận về quy trình làm việc của hộp kiểm.
Đầu ra:
Áp dụng CSS cơ bản: Tiện ích
/* UTILITIES */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: cursive;
}
a {
text-decoration: none;
}
li {
list-style: none;
}
Về phía trước, hãy tạo kiểu cho thanh điều hướng của chúng ta.
Tạo kiểu cho thanh điều hướng bằng CSS Flexbox
Chúng tôi sẽ sử dụng CSS Flexbox và áp dụng các hiệu ứng di chuột để làm nổi bật. Các Dịch vụ menu cần thêm một chút chú ý khi bạn phải thiết lập không trưng bày; đối với điều kiện bình thường và đặt nó thành hiển thị: khối; khi ai đó di chuột vào nó.
/* NAVBAR STYLING STARTS */
.navbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px;
background-color: teal;
color: #fff;
}
.nav-links a {
color: #fff;
}
/* LOGO */
.logo {
font-size: 32px;
}
/* NAVBAR MENU */
.menu {
display: flex;
gap: 1em;
font-size: 18px;
}
.menu li:hover {
background-color: #4c9e9e;
border-radius: 5px;
transition: 0.3s ease;
}
.menu li {
padding: 5px 14px;
}
/* DROPDOWN MENU */
.services {
position: relative;
}
.dropdown {
background-color: rgb(1, 139, 139);
padding: 1em 0;
position: absolute; /*WITH RESPECT TO PARENT*/
display: none;
border-radius: 8px;
top: 35px;
}
.dropdown li + li {
margin-top: 10px;
}
.dropdown li {
padding: 0.5em 1em;
width: 8em;
text-align: center;
}
.dropdown li:hover {
background-color: #4c9e9e;
}
.services:hover .dropdown {
display: block;
}
Đầu ra:
Thanh điều hướng đáp ứng bằng cách sử dụng truy vấn phương tiện CSS
Như đã thảo luận, chúng ta sẽ có menu bánh hamburger chỉ hiển thị trên các thiết bị di động có kích thước màn hình nhỏ. Vì điều này, chúng tôi sẽ có hai đứa con của
- . Đầu tiên, chúng tôi sẽ sử dụng input type = ”checkbox” và cho nhãn một class = ”hamburger”. Thứ hai, chúng tôi sẽ cung cấp menu điều hướng của chúng tôi class = ”menu”.
Lưu ý rằng & # 9776; là một thực thể HTML hiển thị ☰ (biểu tượng bánh hamburger.)
<body>
<nav class="navbar">
<!-- LOGO -->
<div class="logo">MUO</div>
<!-- NAVIGATION MENU -->
<ul class="nav-links">
<!-- USING CHECKBOX HACK -->
<input type="checkbox" id="checkbox_toggle" />
<label for="checkbox_toggle" class="hamburger">☰</label>
<!-- NAVIGATION MENUS -->
<div class=”menu”>...</div>
</ul>
</nav>
</body>
Logic đằng sau việc sử dụng phần tử hộp kiểm là khi nó được bỏ chọn, nó sẽ có không trưng bày; trong khi khi được chọn, nó sẽ thay đổi thuộc tính CSS của bộ chọn anh chị em chung (~) bằng cách đặt nó thành hiển thị: khối; Nói một cách đơn giản, chúng tôi đang sử dụng hộp kiểm để chuyển đổi bánh hamburger và các menu điều hướng giữa trạng thái mở rộng và trạng thái ẩn.
Tạo kiểu cho thanh điều hướng cho thiết bị di động bằng cách sử dụng các truy vấn phương tiện CSS như được hiển thị bên dưới. Trong trường hợp này, bạn cũng có thể sử dụng lưới CSS và JS cho menu di động.
/*RESPONSIVE NAVBAR MENU STARTS*/
/* CHECKBOX HACK */
input[type=checkbox]{
display: none;
}
/*HAMBURGER MENU*/
.hamburger {
display: none;
font-size: 24px;
user-select: none;
}
/* APPLYING MEDIA QUERIES */
@media (max-width: 768px) {
.menu {
display:none;
position: absolute;
background-color:teal;
right: 0;
left: 0;
text-align: center;
padding: 16px 0;
}
.menu li:hover {
display: inline-block;
background-color:#4c9e9e;
transition: 0.3s ease;
}
.menu li + li {
margin-top: 12px;
}
input[type=checkbox]:checked ~ .menu{
display: block;
}
.hamburger {
display: block;
}
.dropdown {
left: 50%;
top: 30px;
transform: translateX(35%);
}
.dropdown li:hover {
background-color: #4c9e9e;
}
}
Đây là những gì chúng tôi đã xây dựng:
Máy tính để bàn
Thiêt bị di động
Thử nghiệm là cách tốt nhất để thiết kế thanh điều hướng lý tưởng của bạn
Việc điều hướng trang web tốt sẽ ảnh hưởng nhiều đến tỷ lệ thoát và tỷ lệ chuyển đổi. Về cơ bản, phần đầu tiên của trang web của bạn phải có ngữ cảnh rõ ràng, điều hướng phân cấp và lời gọi hành động. Cấu trúc điều hướng trang web của bạn sẽ giúp khách truy cập đến các trang phổ biến hoặc thịnh hành trên trang web của bạn chỉ với ba lần nhấp chuột hoặc ít hơn. Vì vậy, hãy tiếp tục thử nghiệm và thiết kế điều hướng trang web tốt hơn!
Đọc tiếp
Thông tin về các Tác giả
