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ẽ chỉ cho bạn cách tạo một thanh điều hướng đáp ứng chỉ bằ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 tạo thanh điều hướng, thì bạn đã đến đúng nơi. Tuy nhiên, trước khi chúng tôi chỉ cho bạn cách tạo thanh điều hướng bằng HTML và CSS, trước tiên 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
điều kiện tiên quyết. Ba yếu tố chính của một thanh điều hướng
Rõ ràng là hầu hết chủ sở hữu trang web đều 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 đường dẫn rõ ràng và súc tích. Bạn phải xây dựng một thanh điều hướng khơi dậy sự tò mò và đồng thời thu hút khách truy cập. Bạn nên có ba yếu tố chính 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 tìm các danh mục rộng hơn trên trang web của mình. Sau đó, bạn có thể thêm các menu con dưới dạng sổ xuống nếu cần
đáng chú ý
Một thanh điều hướng đơn giản không nên nhàm chán chút nào. Bạn nên sử dụng 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 rằng 59. 5 phần trăm dân số toàn cầu đang tích cực sử dụng internet và 92. 6 phần trăm đang sử dụng nó qua thiết bị di động. Điều đó là quá đủ để hiểu tầm quan trọng của việc triển khai điều hướng di động đáp ứng trên trang web của bạn
Điều hướng di động cấp cao nhất khá phổ biến. Bạn có thể sử dụng menu hamburger, máy chém, biểu tượng nổi và tab. Đó là vị cứu tinh khi bạn có năm danh mục trở lên với nhiều thứ bậc. Điều hướng cấp cao nhất có thể tiết kiệm đáng kể không gian màn hình, đặ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 rất phù hợp với thanh điều hướng dưới cùng vì chúng thường chứa từ ba đến năm menu ở cùng một cấp độ phân cấp. Menu phụ và menu tuần tự theo danh mục chính với mối quan hệ cha-con
Hãy xem bài viết chuyên sâu của chúng tôi về các nguyên tắc thiết kế web đáp ứng để biết thêm mẹo
Xây dựng thanh điều hướng đáp ứng với menu Hamburger
Bây giờ các nguyên tắc thiết kế đã rõ ràng trong đầu bạn, hãy bắt đầu xây dựng menu. Có nhiều tính năng CSS để xây dựng các trang web đáp ứng. Tuy nhiên, trong bài viết này, bạn sẽ học cách tạo menu điều hướng đáp ứng với CSS Flexbox và Truy vấn phương tiện từ đầu
Vì vậy, thanh điều hướng của bạn sẽ trông như thế nào?
- 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
Document
MUO
☰
Home
About
Services
Dropdown 1
Dropdown 2
Dropdown 2
Dropdown 3
Dropdown 4
Pricing
Contact
Bạn sẽ có menu thả xuống bên trong menu Dịch vụ [chính]. Chúng ta có thể bỏ qua menu hamburger trong khi xây dựng thanh điều hướng trên màn hình. Xét cho cùng, 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. Cấu trúc thanh điều hướng HTML của bạn hiện đã hoàn tất
đầ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;
}
Trong tương lai, hãy tạo kiểu cho thanh điều hướng HTML
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. Menu Dịch vụ cần chú ý thêm một chút vì bạn phải đặt hiển thị. không ai; . khối;
/* 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
Responsive Navbar Sử dụng CSS Media Queries
As we mentioned earlier, you’ll have a hamburger menu that will show up only on mobile devices with small screen sizes. For this, you’ll have two children of
. Firstly, you’ll use input type=”checkbox” and give the label a class=”hamburger”. Second, give your navigation menu class=”menu”.Lưu ý rằng ☰ là một thực thể HTML hiển thị ☰ [biểu tượng bánh mì kẹp thịt. ]
MUO
☰
...
Logic đằng sau việc sử dụng phần tử hộp kiểm là khi nó không được chọn, nó sẽ hiển thị. không ai; . khối;
Tạo kiểu cho thanh điều hướng cho thiết bị di động bằng 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
Có điều hướng trang web tốt ảnh hưởng lớn đế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 theo thứ bậc và lời kêu 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 sau ba lần nhấp 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
Làm cách nào để tạo menu trong HTML và CSS?
Giải thích ví dụ
. g. một phần tử , hoặc .
Sử dụng phần tử vùng chứa [như ] để tạo trình đơn thả xuống và thêm các liên kết thả xuống bên trong trình đơn đó. Quấn phần tử xung quanh nút và để định vị chính xác menu thả xuống bằng CSS. Use any element to open the dropdown menu, e.g. a , or element.
Use a container element [like ] to create the dropdown menu and add the dropdown links inside it. Wrap a element around the button and the to position the dropdown menu correctly with CSS.
Mã cho menu trong HTML là gì?
HTML Tag
. Thẻ
Thanh menu trong CSS là gì?
Thanh điều hướng hoặc hệ thống điều hướng đi kèm với GUI giúp khách truy cập truy cập thông tin . Nó là thành phần giao diện người dùng trên một trang web bao gồm các liên kết cho các phần khác của trang web. Một thanh điều hướng hầu hết được hiển thị trên đầu trang dưới dạng danh sách liên kết theo chiều ngang.
Làm cách nào để liên kết HTML với CSS?
CSS có thể được thêm vào tài liệu HTML theo 3 cách. . Nội tuyến - bằng cách sử dụng thuộc tính kiểu bên trong các phần tử HTML Internal - by using a element in the section.. External - by using a element to link to an external CSS file..
Chủ Đề