search

Trình đơn HTML CSS

Ngày đăng: 15/12/2022
Trả lời: 0
Lượt xem: 155
Các bạn đọc like ủng hộ MUO nhé. Khi bạn mua hàng bằng các liên kết trên trang web của chúng tôi, chúng tôi có thể kiếm được hoa hồng liên kết. Đọc thêm

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. )

Show

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

 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>Documenttitle>

 head>

 <body>

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

Getting started with HTML for navbar

Á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

Navbar for desktop

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