plainmenu
Web development Th7 14, 2017Hai G .3 tối thiểu Đọc

Làm thế nào để tạo Menu CSS dropdown đơn giản

Làm thế nào để tạo Menu CSS dropdown đơn giản

Giới thiệu

Trải nghiệm người dùng và thời gian load time là quan trong. Vì vậy, bạn không nên chèn nhiều JavaScript hoặc hình lớn vào wesbite. Nếu muốn có một thanh menu CSS đẹp thì sao? Không cần sử dụng JavaScript đâu bạn, ngày nay hiệu ứng xổ xuống có thể được tạo chỉ bởi CSS. Trong bài hướng dẫn này, bạn sẽ được hướng dẫn để tạo menu CSS dropdown đơn giản.

Bạn cần gì?

Trước khi khởi đầu bạn cần chuẩn bị sẵn sàng :

  • Truy cập được vào control panel hosting của bạn

Bước 1 — Tạo file HTML

Đầu tiên bạn cần tạo một file HTML trắng. Trong hướng dẫn này chúng tôi sẽ tạo file có tên menu.html. Chúng tôi sử dụng File Manager cho việc này. Tuy nhiên, bạn cũng có upload qua một FTP client (tạo menu.html trên máy tính và upload lên máy).

Creating menu file

Bước 2 — Thêm mã Menu HTML

Menu của chúng tôi được tạo bởi mục chính là Main menu và 5 mục con. Bằng cách đổi địa chỉ URL bên trong href attribute bạn có thể liên kết Child Menu tới một trang khác trong website của bạn. Bạn có thể đã nhận ra mỗi mục có một class khác nhau – dropdown, mainmenubtn và dropdown-child. Class cần được sử dụng để tạo CSS rules khác nhau.



Đây là hình Menu HTML mà không có CSS rules :

Plain menu

Như bạn thấy HTML menu không được tối ưu và trông có vẻ như không tốt. Tuy nhiên, chúng tôi đã vận dụng CSS rules và đổi nó ở bước sau .

Bước 3 — Áp dụng Menu CSS và tạo hiệu ứng Dropdown:

Chúng tôi sẽ làm đẹp HTML code của mình bằng CSS rules sau

.mainmenubtn {
    background-color: red;
    color: white;
    border: none;
    cursor: pointer;
    padding:20px;
    margin-top:20px;
}

.mainmenubtn:hover {
    background-color: red;
    }
    
.dropdown {
    position: relative;
    display: inline-block;
}
.dropdown-child {
    display: none;
    background-color: black;
    min-width: 200px;
}
.dropdown-child a {
    color: white;
    padding: 20px;
    text-decoration: none;
    display: block;
}
.dropdown:hover .dropdown-child {
    display: block;
}

Như bạn thấy .dropdown-child có CSS rule display: none. Tuy nhiên, ngay khi người dùng di chuột tới (.dropdown:hover) mục chính, CSS rule sẽ đổi thành display: block. Việc này sẽ tạo hiệu ứng thanh menu xổ xuống

Bên dưới là kết quả cuối cùng của menu.html document:







  Main menu

     Child menu 1    Child menu 2
   Child menu 3
   Child menu 4
   Child menu 5
 

Trong bài hướng dẫn này tất cả chúng ta được biết việc sử dụng CSS styles hoàn toàn có thể được vận dụng cho cùng một file HTML. Tuy nhiêu có nhiều cách để liện kết giữa CSS và HTML document .Khi bạn đã hoàn tất, hiệu quả sau cuối như sau :

Main menu

Hãy cứ tự nhiên thưởng thức CSS theo luật và bất kể đổi khác nào sắc tố và size. Hãy lấy menu này, những gì bạn cần làm là đổi màu và size. Áp dụng menu css này tương thích hơn vào blog của bạn .

Kết luận

Bằng cách kết thúc bài hướng dẫn này, bạn đã biết cách tạo menu CSS đơn thuần dựa trên CSS. Mã được cung ứng cho bài này nhẹ và sẽ không tác động ảnh hưởng tới thời hạn load time của bạn .Author

Tác giả

Hai G .Hải G. là chuyên viên quản trị, quản lý và vận hành những dịch vụ website. Anh có nhiều năm kinh nghiệm tay nghề về VPS, Hosting, technical SEO, CMS. Đặc biệt yêu quý WordPress và đã dùng nó hơn 5 năm nay. Sở thích của anh là đọc, viết blog, đi du lịch và tư vấn cho những bạn trẻ khởi nghiệp .

Leave a Reply

Email của bạn sẽ không được hiển thị công khai.