Menu CSS theo chiều dọc: tự thực hiện

Một số quản trị web không muốn lãng phí thời gian phát triển từ những yếu tố đầu tiên mà đã tồn tại. Họ tin rằng nó làm cho không có ý nghĩa để lãng phí thời gian của bạn về những gì đã lâu ở đó. Trên thực tế, đối với những người chỉ học HTML và CSS, điều quan trọng là phải làm nhiều thứ để hiểu công việc của họ tốt. Điều này áp dụng cho menu. Tạo trình đơn CSS dọc. Nó sẽ chỉ dựa trên HTML và CSS mà không sử dụng Javascript và JQuery. Mỗi trình đơn là một danh sách các liên kết dẫn đến các trang của trang web.

Các bước cơ bản

Để tạo một trình đơn CSS theo chiều dọc không biến chứng, bạn cần phải có các trình tự sau đây:

1. Trước tiên, hãy xác định danh sách liên kết (sử dụng mã HTML) từ đó trình đơn sẽ bao gồm. Cho họ tên, chẳng hạn như:

1. Trang chủ.
2. Lịch sử của chúng tôi.
3. Lãnh đạo.
4. Dịch vụ.
5. Danh bạ.

2. Sau đó, chúng tôi sẽ Stylize các liên kết theo ý muốn với CSS.

Chúng tôi sẽ viết mã HTML, lưu nó trong my_Vmenu.html và xem nó sẽ như thế nào trong trình duyệt:

Đây là cơ sở (bộ xương) của thực đơn của chúng tôi. # 1, # 2, v.v ... Phải được thay thế bằng liên kết. Nhìn vào cách mọi thứ trong trình duyệt. Bạn sẽ không thích hình ảnh. Bây giờ chúng ta cần bắt đầu mô tả các phong cách của các phần tử để tạo một trình đơn CSS theo chiều dọc.

Mô tả kiểu

Tạo một tập tin gọi là my_Vmenu.css, trong đó bạn có thể thiết lập bất cứ điều gì bạn muốn cải thiện sự xuất hiện của một yếu tố quan trọng của trang web. Dưới đây là mã, việc thực hiện sẽ làm sống lại trình đơn CSS dọc. Viết nó vào tệp tin đã tạo, sau đó chúng ta sẽ xem xét kỹ hơn những dòng chính được liệt kê ở đây có ý nghĩa gì.

Mô tả chi tiết các kiểu sử dụng

Bây giờ hãy xem xét chi tiết trình đơn CSS theo chiều dọc của chúng tôi:

Loại danh sách kiểu cho phép loại bỏ các điểm đánh dấu danh sách. Sử dụng cài đặt "0" cho lề và đệm, loại bỏ các thụt lề thêm từ danh sách. Như bạn thấy từ mã HTML, trình đơn của chúng tôi là một danh sách, và CSS thiết lập các kiểu.

Ul # my_Vmenu - phong cách chung của toàn bộ danh sách.

Ul # my_Vmenu li a - kiểu liên kết giữa các thẻ li.

Ul # my_Vmenu li a: hover là mô tả về loại mục trong menu cùng một lúc khi một trong số những người đàn ông trỏ chuột vào con trỏ.

Ul # my_Vmenu li một span-mô tả của văn bản (tên menu).

Hãy nhớ rằng các tập tin my_Vmenu.css và my_Vmenu.html phải được lưu trong một thư mục. Tuy nhiên, chúng có thể được đặt trong các thư mục khác nhau, nhưng điều quan trọng là chỉ định đường dẫn đến my_Vmenu.css trong tệp tin my_Vmenu.html. Hãy cẩn thận, vì người mới thường có vấn đề với điều này.

Phong cách nên được kết nối giữa các thẻ đầu trong tệp html. Menu_1.png và menu_2.png là những hình ảnh để hiển thị mục trình đơn ở trạng thái bình thường và khi di chuột qua con trỏ.

Nó là tốt hơn để lưu các hình ảnh trong một thư mục riêng biệt cho các bản vẽ, tên nó my_images, nhưng sau đó sửa mã CSS. Viết nơi những hình ảnh này được chỉ ra, rằng chúng nằm trong thư mục này: url (my_images / menu_1.png) và url (my_images / menu_2.png).

Phần còn lại của thuộc tính được mô tả trong mã CSS rất dễ hiểu. Họ đặt sự xuất hiện của thực đơn của chúng tôi. Thật dễ dàng để thấy rằng chiều rộng và chiều cao của các điểm được đặt như nhau cho các điểm ở trạng thái bình thường và khi bạn di chuột qua chúng. Kích thước phông chữ là 18px, padding xác định thụt đầu từ các bên khác nhau của tên của các mục. Thuộc tính hiển thị cho phép bạn thiết lập hiển thị theo khối để xác định chiều rộng và thụt lề.

Menu Dọc của chúng tôi

Như bạn thấy, trình đơn CSS theo chiều dọc dễ dàng tạo ra. Trên cơ sở kiến thức, bạn có thể làm cho nó đẹp và hấp dẫn đối với khách truy cập vào tài nguyên trực tuyến của bạn! Sử dụng trí tưởng tượng của bạn, và sau đó một trình đơn phong cách sẽ trang trí trang web của bạn.