Tạo menu đẹp bằng css

Bài viết đã được cập nhật vào: 16/02/2021

• Full màn CSS Flexbox Overlay Menu Navigation
• Clean CSS Navigation Menu Slider
• Colourful CSS Navigation Menu
• Skewed Menu
• CSS Side Menu Animation With Burger Icon
• CSS3 Side Panel With Menu
• Off Canvas CSS Menu
• Material Design Navigation Menu
• Pure CSS3 Mega Dropdown Menu With Vertical Animation
• Hamburger Slide Accordion Menu
• Swanky Pure CSS Drop Down Menu V2.0
• CSS Accordion Menu
• Accordion CSS Menu
• Colourful Flower Popup Menu
• Gooey Menu
• Pure CSS Circle Menu
• Circular Menu
• Simple Pure CSS Dropdown Menu
• Zigzag Dropdown Menu Concept
• Another CSS Menu Concept

Full màn CSS Flexbox Overlay Menu Navigation

Với trình đơn burger phổ biến, một số bảng trượt và chuyển động di chuột tinh tế.

 

Clean CSS Navigation Menu Slider

Đây là một điều hướng CSS rất mượt với một thanh trượt cực cool.

 

Colourful CSS Navigation Menu

Khi bạn hover vào thanh điều hướng màu sắc này, dấu chấm sẽ theo các bước di chuyển của bạn đến mục hiện tại.

 

Skewed Menu

Sử dụng các thuộc tính CSS3 để tạo ra một trình đơn lệch khá hay ho.

CSS Side Menu Animation With Burger Icon

Một chuyển động CSS tinh tế của một menu ẩn với biểu tượng burger.

CSS3 Side Panel With Menu

Bảng điều khiển CSS3 có menu và nội dung liên quan chuyển tiếp từ phía bên tay phải của trang. Toàn bộ nội dung của trang di chuyển sang trái để tạo hiệu ứng này.

Off Canvas CSS Menu

Little off canvas CSS animated menu.

Material Design Navigation Menu

Trang sẽ slide để hiển thị điều hướng đơn giản, rõ ràng.

Pure CSS3 Mega Dropdown Menu With Vertical Animation

Một menu thả xuống CSS đẹp mắt với chuyển động ngang của phần của phần tử con

Hamburger Slide Accordion Menu

Một chuyển động tuyệt vời cho side menu sử dụng một hamburger icon.

Swanky Pure CSS Drop Down Menu V2.0

Drop down menu CSS thuần. Bổ sung đẹp cho bất kỳ giao diện người dùng nào không phải là javascript. Sử dụng nhãn cho mẹo để chuyển đổi hoạt ảnh.

CSS Accordion Menu

Làm thế nào để tạo một accordion menu với Jquery

Accordion CSS Menu

Một menu accordion đơn giản trông tuyệt vời trong bất kỳ dự án nào.

Colourful Flower Popup Menu

Trình đơn hoa bật lên lấy cảm hứng từ điện thoại di động này là một dự án thú vị; đầy màu sắc mà tôi đang thử nghiệm. Hãy tự do sử dụng nó nếu bạn thích.

Gooey Menu

Gooey menu với CSS và SVG filters.

Pure CSS Circle Menu

Menu tròn với nút bật tắt chỉ được tạo bằng CSS. Bạn có thể cấu hình kích thước menu, số lượng các mục, màu sắc của nút chuyển đổi và các biểu tượng liên kết.

Circular Menu

Một nửa vòng tròn Menu CSS hiện lên khi hover vào hamburger menu.

Simple Pure CSS Dropdown Menu

Hiệu ứng menu thả xuống đơn giản, có kiểu dáng đẹp, sử dụng CSS thuần. Chức năng đơn giản, phương pháp có thể được mở rộng để tạo ra một khối thả xuống thứ cấp với vài chỉnh sửa.

Zigzag Dropdown Menu Concept

Đây là một trường hợp khác về khái niệm dropdown menu.

Another CSS Menu Concept

Một trường hợp khác sử dụng menu icon, thực sự tuyệt vời.

Bài viết được tổng hợp bởi Kynangso.net –  Nguồn: Pencode

Menu là một trong những yếu tố quan trọng nhất đối với mọi website. Về cơ bản, đó là một tập hợp các liên kết được tùy biến cho phép khách truy cập trang đi từ trang này đến các trang khác. Một số trang web có menu điều hướng ở trên cùng, có trang thì ở bên phải hay bên trái.

Hướng dẫn này sẽ giúp bạn tạo menu ngang trong HTML và CSS với 5 bước đơn giản dưới đây.

Bước 1: Tạo HTML Mark-up

Để bắt đầu việc tạo menu ngang trong HTML, hãy tạo một HTML mark-up bằng một link đi đến style sheet ở ngoài (style.css). Nó cũng sẽ được dùng để tạo kiểu cho menu.

Sau khi tạo xong HTML mark-up, bây giờ ta cần viết code CSS cho Menu Divsion.

#menu
{
 width: 900px;
 border: 1px solid #000;
 height: 100px;
 background-color: #181818;
 font-family: Helvetica, sans-serif;
 font-size: 13px;
 border-radius: 10px;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
}

Trong phần xác định menu, kích thước chiều rộng được đặt là 900px và 100px chiều cao. Màu nền là màu đen, sáng hơn màu tiêu chuẩn (#000). Phần còn lại là xác định phông chữ, kích thước phông chữ và dùng CSS3 border-radius để tạo menu một đường cong nhỏ.

>> Xem thêm: Code convention là gì? Các quy tắc chung khi viết code

Để tạo menu item, chúng ta cần phải sử dụng thẻ danh sách không có thứ tự (unordered tag list). Hãy thêm phần sau vào trong HTML document giữa các menu division tag.

 
  

    
Trang chủ
    
Dịch vụ
    
Sản phẩm
    
Giới thiệu
    
Liên hệ
  
  

Đối với mỗi tag của item, có một anchor tag () để tạo một liên kết. Tại thời điểm này, mọi thuộc tính href đều trống, do đó ta dùng kí hiệu (#). Để tạo các liên kết thực, hãy xóa kí tự # và nhập URL của trang (Ví dụ: https://vietnix.vn/tai-lieu-ky-thuat).

Bước 4: Tạo kiểu cho danh sách

Sau khi thêm xong code HTML, dù có vẻ ổn nhưng chưa được bắt mắt cho lắm, nhưng chúng ta có thể dùng code CSS menu ngang để thay đổi. Trong bước này, chúng ta sẽ tạo kiểu cho danh sách và các liên kết, giúp menu ngang CSS thêm sống động hơn.

Sau khi tạo một danh sách không có thứ tự, mỗi item đều được hiển thị theo thứ tự từ trên xuống, cùng một vòng tròn mờ xung quanh theo mặc định. Chúng ta đang muốn tạo menu ngang trong HTML chứ không phải menu dọc, do đó ta cần thay đổi bố cục mặc định này. Đồng thời cũng cần xóa các bullet đầu dòng khỏi danh sách.

Dùng lệnh sau để tạo menu ngang bằng CSS:

#menu ul
{
  margin-top:  42px;
}
#menu ul li
{
  list-style-type: none;
  display: inline;
  margin-left: 50px;
}

#menu ul

Phần margin-top: 42px sẽ trỏ đến danh sách không có thứ tự và di chuyển danh sách này 42px, tính từ trên cùng.

#menu ul li

list-style-type: none sẽ bỏ dấu bullet đầu dòng.

display: inline để thay đổi cách trình bày của từng mục trong danh sách từ dọc thành ngang.

margin-left: 50px sẽ giãn cách các mục trong danh sách ra một chút.

Xem thêm: Favicon là gì? Hướng dẫn tạo và thêm Favicon cho website

Bước 5: Tạo kiểu cho các liên kết

Bước cuối cùng trong việc tao menu ngang trong HTML là tạo kiểu cho các liên kết.

Lưu ý rằng trong HTML document, các thẻ () nằm giữa các list item tag (

#menu ul li a:link 
{
   color: #FFF;
   text-decoration: none;
   text-transform: uppercase;
   padding-top: 40px;
   padding-bottom: 40px;
   padding-left: 20px;
   padding-right: 20px;
}
              
#menu ul li a:visited
{
   color: #FFF;
   text-decoration: none;
   text-transform: uppercase;
}
              
#menu ul li a:hover
{
   color: #FFF;
   background-color: #81B101;
   -webkit-box-shadow: 0px 4px 5px rgba(50, 50, 50, 0.93);
   -moz-box-shadow:    0px 4px 5px rgba(50, 50, 50, 0.93);
   box-shadow:         0px 4px 5px rgba(50, 50, 50, 0.93);
}