Hướng dẫn tạo menu dọc bằng css, xây dựng menu dọc hai cấp Đơn giản bằng css

     

Menu là một yếu tố đặc biệt đối với tất cả loại website, giúp khách rất có thể truy cập web cùng đi từ trang này cho trang khác. Nhiều trang web có menu điều phối ở bên trên cùng, một trong những trang hoàn toàn có thể ở bên cần hoặc bên trái. Hiện nay bạn có thể áp dụng CSS trong câu hỏi tạo các kiểu menu đơn giản là thực đơn dọc, thực đơn ngang với menu dropdown. Hãy cùng jdomain.vn tìm hiểu cách áp dụng CSS tạo menu trong bài viết bên dưới.

Bạn đang xem: Hướng dẫn tạo menu dọc bằng css, xây dựng menu dọc hai cấp Đơn giản bằng css


1. Áp dụng CSS chế tạo ra menu ngang hoặc hiển thị giao diện inline-block.">1.4. Để điều chỉnh cho các mục nhỏ nằm thành mặt hàng ngang chúng ta cũng có thể lựa lựa chọn 2 kiểu đó là float: left cho tất cả các thẻ

1. Áp dụng CSS chế tác menu ngang

Khi ý muốn áp dụng CSS để tạo nên menu ngang, họ hãy sử dụng thẻ để tạo khoanh vùng cho menu với thẻ để chế tạo từng hạng mục trong thực đơn đó.

1.1. Đầu tiên sống đoạn cấu trúc menu bằng HTML, họ sẽ để menu vào trong một thẻ

1.2. Chúng ta sẽ reset CSS với thêm một số style cho toàn website như bên dưới.

Reset CSS

margin: 0;

padding: 0;

body

font-family: sans-serif;

color: #333;

1.3. Ở phần thẻ trong #menu, áp dụng CSS list-style-type để xóa những dấu đầu dòng và thêm color nền, gửi văn phiên bản bên vào ra giữa để trông đẹp hơn.

Xem thêm: Top 7 Trang Mạng Bán Hàng Online Uy Tín Nhất Tại Việt Nam, Top 10 Trang Bán Hàng Online Uy Tín Nhất Hiện Nay

#menu ul

background: #1F568B;

list-style-type: none;

text-align: center;

1.4. Để điều chỉnh cho những mục nhỏ nằm thành mặt hàng ngang bạn cũng có thể lựa lựa chọn 2 kiểu sẽ là float: left cho toàn bộ các thẻ hoặc hiển thị hình dạng inline-block.

Kiểu inline-block 

#menu li

color: #f1f1f1;

display: inline-block;

width: 120px;

height: 40px;

line-height: 40px;

margin-left: -5px;

Kiểu float

#menu li

color: #f1f1f1;

float: left;

width: 120px;

height: 40px;

line-height: 40px;

Sau khi thực hiện kiểu inline-block sẽ nhận được tác dụng là:

*
*
*
*
*

Lúc này chỉ cần thêm CSS để .sub-menu ẩn đi cùng chỉ hiển thị khi người tiêu dùng rê chuột vào #menu li gồm chứa .sub-menu đó.

#menu .sub-menu

 position: absolute;

 left: 250px;

 top: 0;

 display: none;

#menu li:hover .sub-menu {

 display: block;

.

Bên cạnh vấn đề áp dụng CSS để tạo menu, bọn họ còn hoàn toàn có thể áp dụng CSS cho những thẻ không giống như:


Chuyên mục: Domain Hosting