Floating menu - menu ẩn / trượt rất chuyên nghiệp cho websiteChào các bạn admin , webmaster và tất cả những ai đang đi tìm code menu để tạo menu cho trang web.. Nếu như những chuơng trìn
Trang 1Floating menu - menu ẩn / trượt rất chuyên nghiệp cho website
Chào các bạn admin , webmaster và tất cả những ai đang đi tìm code menu để tạo menu cho trang web Nếu như những chuơng trình tạo menu chuyên nghiệp khác giúp cho các bạn tạo được những menu nhiều tầng hoặc nhiều hiệu ứng đẹp thì nói chung chúng đều yêu cầu đến một mức độ kỹ thuật nào đó , kỹ thuật đồ họa để tạo các button , thẩm mỹ trong cách chọn màu và bố trí cho menu…
Tuy nhiên có một đoạn code bằng java + html dưới đây sẽ giúp cho các bạn tạo một menu trượt và ẩn/hiện khi đặt chuột vô , các bạn có thể xem demo dưới link sau :
Hướng dẫn sử dụng
- khi xem demo các bạn click Ctrl+U để xem source của nó Nếu các bạn muốn gắn nó
vô trang web thì chỉ việc copy nội dung trong <style type=“text/css”> nội dung </style>
Có thể đưa nội dung đó vào trong file css chính của website , hoặc copy nó paste vào
notepad và lưu file dưới dạng tenfile.css rồi đặt link đến file css đó.
-tải tiếp 2 file js sau và đưa chúng vô folder js chẳng hạn , nếu như trên host của bạn đã
có folder chứa các file js thì bạn cũng nên copy hai file js đó và đưa chúng vô cùng folder , mục đích là làm cho gọn các file , dễ cho bạn tìm kiếm , thay thế hoặc sửa chữa sau này Còn nếu website của bạn ít hoặc gì gì đó thì bạn có thể để tại root folder cũng được để đâu không quan trọng , miễn là khi link đến đúng là OK
mmenu.js
menuItems.js
Để cho dễ hiểu hơn mình sẽ hướng dẫn các bạn gắn vô wordpress ( với các platform khác thì cũng hoàn toàn tuơng tự mà thôi)
- Sau khi xem demo click xem source của nó , copy đoạn sau và mở file style.css của theme bạn đang dùng và đưa vào phía trên cùng hoặc dưới dùng cũng được
<style type="text/css">
/*Menu Links*/
Trang 2/*NOTE: anything not specified for the #(menu id's) a selector and its pseudo classes
may be inherited in some browsers from other 'a' element styles (if any)
on the page*/
#menu1 a {color:black;background-color:white;text-decoration:none;text-indent:1ex;}
#menu1 a:active {color:black;text-decoration:none;}
#menu1 a:hover {color:black;background-color:#FFFF99}
#menu1 a:visited {color:black;text-decoration:none;}
#menu2 a {color:navy;background-color:white;text-decoration:none;text-indent:1ex;}
#menu2 a:active {color:blue;text-decoration:none;}
#menu2 a:visited {color:blue;text-decoration:none;}
#menu2 a:hover {color:navy;background-color:#f0fea8}
#menu3 a { /*Menu3 Links*/
color:black;
background-color:white;
text-decoration:none;
text-indent:1ex;
}
#menu3 a:hover {
color:black;background-color:#FFFF99;
}
#menu3 a:active {color:black;text-decoration:none;}
#menu3 a:visited {color:black;text-decoration:none;}
/*End Menu Links*/
</style>
Đó là style chung cho cả 3 menu , nếu bạn chỉ dùng 1 menu thì có thể bỏ hai cái kia đi
Sau đó thì tải tiếp hai cái file js về và copy và upload lên folder có tên js bên trong theme bạn đang dùng (hầu hết tất cả các theme của wordpress đều có folder js , cho nên
không khó để bạn tìm ra nó)
.Cuối cùng là mở file header.php và paste vào sau thẻ </title> đoạn code sau:
<!–sidemenu–>
<script src=”<?php bloginfo(’template_directory’); ?>/js/mmenu.js”
type=”text/javascript”></script>
<script src=”<?php bloginfo(’template_directory’); ?>/js/menuItems.js”
type=”text/javascript”>
<!–sidemenu end–>
! done chỉ có đơn giản như vậy là bạn đã có 1 menu trượt , ẩn hiện trên website rồi.
* chú ý : nếu bạn muốn chỉnh sủa màu sắc , nội dung … cho menu thì dùng notepad hoặc
trình edit nào đó và sửa trong file menuItems.js
Trang 3Tác giả của đoạn script trên : Omni Slide Menu script - © John Davenport Scheuer
Người viết hướng dẫn : thichnhac[dot]info
xin để lại credit nếu bạn copy lại bài này
Chúc các bạn thành công!