Floating menu thực sự không phải là một thủ thuật gì mới và ghê gớm lắm đâu. Nó có từ rất lâu rồi và cách dùng nó cũng thực sự không quá khó. Trong bài viết này tôi sẽ hướng dẫn các bạn tạo một floating menu cho website và áp dụng nó vào trong WordPress.

#Tạo hình với HTML & CSS

Giải thích ý nghĩa của css tôi có chú thích comment phía trong code. Các bạn có thể xem và tham khảo. Lưu ý: Các bạn nên tham khảo qua các bài viết hướng dẫn xây dựng menu để có thể hình dung rõ hơn.

• Dropdown Menu với CSS
• Menu đa cấp với CSS và jQuery
• Dropdown Menu II – Vnexpress Style

Sau khi làm xong menu như trên thì các bạn đã có cho mình một cái floating menu rồi đó. Bây giờ tôi sẽ giải thích rõ hơn. Các bạn hãy quan sát trong css chổ đầu tiên, khai báo cho #fixNav.

Các bạn có thể quan sát thấy css position có giá trị là fixed. Với bất kỳ đối tượng nào được gán css position có giá trị fixed, thì sẽ được cố định tại một vị trí nhất định. Vị trí đó sẽ phụ thuộc vào giá trị top left bottom right. Trong trường hợp này tôi khai báo top và left đều bằng 0, tức nó sẽ nằm trên cùng, bên trái. Do width:100% nên menu sẽ kéo dài toàn màn hình. Các bạn có thể xem demo và code bên dưới này:

#Tích hợp thêm jQuery

Như các bạn thấy, thì trên izwebz.com. Menu chỉ hiển thị khi bạn cuộn website đến một vị trí nào đó. Bây giờ thì thôi sẽ tiến hành dùng jQuery để thực hiện điều đó. Quy trình hoạt động thì sẽ như vậy: Cuộn chuột đến một móc có giá trị là 150px thì menu sẽ hiển thị ra. Các bạn hãy thêm đoạn code jQuery này vào, ý nghĩa tôi đã có comment phía trong.

Lưu ý: các bạn cần phải chèn thư viện jquery vào trước khi dùng.
Tuy nhiên, bây giờ menu vẫn chưa hoạt động. Bạn hãy quay lại css và chỉnh sửa khai báo ở đoạn #fixNav với giá trị display:block thành display:none. Nguyên nhân là chúng ta muốn menu nó ẩn từ đầu, chỉ khi cuộn chuột vượt móc giá trị nào đó nó mới hiện ra thôi.

#Tích hợp vào trong WordPress

Công việc của chúng ta là sẽ tiến hành tích hợp nó vào trong WordPress để hiển thị thông tin ra một cách tự động theo quản lý và sắp xếp của người quản trị.

Trước tiên, trong WordPress tôi sẽ dùng wp menus để làm việc. Các bạn có thể vào trong wp-admin>appearance>menus để tạo và sắp xếp menu mới. Trong trường hợp không có mục đó, bạn cần phải vào file functions.php và khai báo như bên dưới này để kích hoạt tính năng wp menus lên.

Sau khi vảo trong đó thì các bạn có thể tiến hành create new menu và kéo thả các mục cần thiết vào. Nếu bị ẩn các bạn có thể bấm view all. WordPress thiết kế cái menus này phương pháp cách kéo thả, đồng thời có phân cấp nên rất tiện lợi và trực quan.

Sau khi tạo menu xong thì chúng ta vào file header.php hoặc index.php trong thư mục theme để khai báo và kéo thông tin từ menu mới tạo ra ngoài.

Demo đang hiển thị trên izwebz.com

#Kết luận

Dùng position:fixed để tạo một đối tượng cố định tại một vị trí nào đó trên website không khó. Quan trọng nhất vẫn là ý tưởng của mình để xây dựng nó là một đối tượng đặc biệt hay là một đối tượng dư thừa. Bạn có thể tham khảo một số demo bên dưới này để tạo cảm hướng cho mình.

Website này dùng menu ở phía bên trái

Menu top thay đổi khi cuộn đến mốc nào đó

Top fixed menu sáng tạo