MENU NGANG XỔ DỌC XUỐNG NHIỀU CẤP (KIỂU 2)
|
vuongsungdong
Do có một số bạn hỏi: Sao không đổi màu cho menu được?, vì vậy hôm nay tôi xin giới thiệu đến các bạn MENU NGANG XỔ DỌC XUỐNG NHIỀU CẤP (KIỂU 2), menu này cũng giống với menu kiểu 1 nhưng thay vào đó các bạn có thể dễ dàng đổi màu cho menu, đổi màu cho chữ trên menu...
Để tạo được như vậy, các bạn cần làm theo các bước sau đây:
Đầu tiên, bạn đăng nhập vào Blog > Chọn thiết kế > Chọn chỉnh sửa HTML, sau đó bạn bấm đồng thời cặp phím Ctrl+F để mở hộp tìm kiếm và gõ vào khung dòng lệnh <head>. Bây giờ bạn copy đoạn code này và dán phía dưới dòng lệnh đó.
<style type='text/css'> html .jqueryslidemenu{height: 1%;} </style> <script src='http://dl.dropbox.com/u/66348944/jquery.min.js' type='text/javascript'/> <script src='http://dl.dropbox.com/u/66348944/drop_menu.js' type='text/javascript'/> |
Sau khi dán xong đoạn code này, bạn xoá dòng lệnh cũ đi và tiếp tục gõ vào khung tìm kiếm dòng lệnh </header> rồi copy tất cả các code này vào trên dòng lệnh đó và bấm Lưu mẫu.
<style> .jqueryslidemenu{ font: bold 12px Verdana; background:#153E7E; /* màu nền của menu*/ width: 100%; } .jqueryslidemenu ul{ margin: 0; padding: 0; list-style-type: none; } .jqueryslidemenu ul li{ position: relative; display: inline; float: left; } .jqueryslidemenu ul li a{ display: block; background:#15317E; /* màu nền của thư mục chính*/ color: white; /*màu text thư mục chính*/ padding: 8px 10px; border-right: 1px solid #778; color: #ccc; text-decoration: none; } * html .jqueryslidemenu ul li a{ display: inline-block; } /*.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{ color: #ff0066; //màu cchữ các menu }*/ .jqueryslidemenu ul li a:hover{ background:#2B60DE; /* màu hiệu ứng khi rê chuột vào các link*/ color: white; /*màu text khi rê chuột*/ } .jqueryslidemenu ul li ul{ position: absolute; left: 0; display: block; visibility: hidden; } .jqueryslidemenu ul li ul li{ display: list-item; float: none; } .jqueryslidemenu ul li ul li ul{ top: 0; } .jqueryslidemenu ul li ul li a{ font: normal 13px Verdana; width: 160px; padding: 5px; margin: 0; border-top-width: 0; border-bottom: 1px solid gray; } .jqueryslidemenuz ul li ul li a:hover{ background: #eff9ff; color: black; } .downarrowclass{ position: absolute; top: 12px; right: 7px; } .rightarrowclass{ position: absolute; top: 6px; right: 5px; }</style> <div id="myslidemenu" class="jqueryslidemenu"> <ul> <li><a href="http://dungheineken8.blogspot.com/">Home</a></li> <li><a href="http://dungheineken.blogspot.com/">Thủ thuật máy computer</a></li> <li><a href="http://anhdepblog.blogspot.com/">Thủ thuật Ảnh </a> <ul> <li><a href="#">Sub Item 1.1</a></li> <li><a href="#">Sub Item 1.2</a></li> <li><a href="#">Sub Item 1.3</a></li> <li><a href="#">Sub Item 1.4</a></li> </ul></li> <li><a href="http://phimvang.org/">Xem phim</a></li> <li><a href="#">Blogspot</a> <ul> <li><a href="#">Sub Item 2.1</a></li> <li><a href="#">Folder 2.1</a> <ul> <li><a href="#">Sub Item 2.1.1</a></li> <li><a href="#">Sub Item 2.1.2</a></li> <li><a href="#">Folder 3.1.1</a> <ul> <li><a href="#">Sub Item 3.1.1.1</a></li> <li><a href="#">Sub Item 3.1.1.2</a></li> <li><a href="#">Sub Item 3.1.1.3</a></li> <li><a href="#">Sub Item 3.1.1.4</a></li> <li><a href="#">Sub Item 3.1.1.5</a></li> </ul> </li> <li><a href="#">Sub Item 2.1.4</a></li> </ul> </li> </ul></li> <li><a href="http://www.nhaccuatui.com/">Nghe nhạc</a></li> <li><a href="http://anhdepblog.blogspot.com/">Hình ảnh</a> <ul> <li><a href="#">Sub Item 1.1</a></li> <li><a href="#">Sub Item 1.2</a></li> </ul></li> <li><a href="#">Download</a> <ul> <li><a href="#">Sub Item 2.1</a></li> <li><a href="#">Sub Item 2.2</a></li> </ul></li> </ul><br style="clear: left" /> </div> |
Bây giờ điều bạn cần làm là thay đổi các dữ liệu trong các dòng lệnh <a herf="#" (thay # bằng địa chỉ link liên kết), tên menu và thay đổi màu cho menu, màu chữ theo ý thích của bạn (có ghi chú ở code) cho phù hợp với Blog của mình. Cuối cùng bấm Lưu mẫu và trở lại Blog để "thưởng thức" thành quả. Lưu ý: Có một số giao diện blog sẽ không có lệnh </header>, do vậy bạn phải thêm tiện ích HTML/Javacript rồi dán code phần 2 vào và lưu lại là xong.
Read more: MENU NGANG XỔ DỌC XUỐNG NHIỀU CẤP (KIỂU 2) | dunghennessy
Under Creative Commons License: Attribution Share Alike
Posted in
THỦ THUẬT
0 nhận xét cho bài đăng này
Hãy để lại nhận xét nếu bạn thích bài đăng này