1. Trang chủ
  2. » Giáo án - Bài giảng

Menu ẩn trượt cho Web

3 313 0

Đang tải... (xem toàn văn)

THÔNG TIN TÀI LIỆU

Thông tin cơ bản

Định dạng
Số trang 3
Dung lượng 40,5 KB

Nội dung

Floating menu - menu ẩn / trượt chuyên nghiệp cho website Chào bạn admin , webmaster tất tìm code menu để tạo menu cho trang web Nếu chuơng trình tạo menu chuyên nghiệp khác giúp cho bạn tạo menu nhiều tầng nhiều hiệu ứng đẹp nói chung chúng yêu cầu đến mức độ kỹ thuật , kỹ thuật đồ họa để tạo button , thẩm mỹ cách chọn màu bố trí cho menu… Tuy nhiên có đoạn code java + html giúp cho bạn tạo menu trượt ẩn/hiện đặt chuột vô , bạn xem demo link sau : Hướng dẫn sử dụng - xem demo bạn click Ctrl+U để xem source Nếu bạn muốn gắn vô trang web việc copy nội dung nội dung Có thể đưa nội dung vào file css website , copy paste vào notepad lưu file dạng tenfile.css đặt link đến file css -tải tiếp file js sau đưa chúng vô folder js chẳng hạn , host bạn có folder chứa file js bạn nên copy hai file js đưa chúng vô folder , mục đích làm cho gọn file , dễ cho bạn tìm kiếm , thay sửa chữa sau Còn website bạn gì bạn để root folder để đâu không quan trọng , miễn link đến OK mmenu.js menuItems.js Để cho dễ hiểu hướng dẫn bạn gắn vô wordpress ( với platform khác hoàn toàn tuơng tự mà thôi) - Sau xem demo click xem source , copy đoạn sau mở file style.css theme bạn dùng đưa vào phía dùng /*Menu Links*/ /*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;textindent: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;textindent: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 chung cho menu , bạn dùng menu bỏ hai Sau tải tiếp hai file js copy upload lên folder có tên js bên theme bạn dùng (hầu hết tất theme wordpress có folder js , không khó để bạn tìm nó) Cuối mở file header.php paste vào sau thẻ đoạn code sau: /js/menuItems.js” type=”text/javascript”> ! done có đơn giản bạn có menu trượt , ẩn website * ý : bạn muốn chỉnh sủa màu sắc , nội dung … cho menu dùng notepad trình edit sửa file menuItems.js Tác giả đoạn script : Omni Slide Menu script - © John Davenport Scheuer Người viết hướng dẫn : thichnhac[dot]info xin để lại credit bạn copy lại Chúc bạn thành công! ... type=”text/javascript”> ! done có đơn giản bạn có menu trượt , ẩn website * ý : bạn muốn chỉnh sủa màu sắc , nội dung … cho menu dùng notepad trình edit sửa file menuItems.js Tác giả... {color:navy;background-color:white;text-decoration:none;textindent: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*/... 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*/

Ngày đăng: 05/11/2015, 11:42

TỪ KHÓA LIÊN QUAN

w