Trước đây, tôi có đăng bài TẠO MENU NGANG XỔ DỌC XUỐNG NHIỀU CẤP (KIỂU 1), với kiểu này thì menu chỉ có một màu đen, chữ trắng và các bạn không thể đổi màu được.
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...
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><br />
<br />
<script src='http://traidatmui-tips.googlecode.com/files/jquery.min.js' type='text/javascript'/>
<script src='http://traidatmui-tips.googlecode.com/files/drop_menu.js' type='text/javascript'/>
Để sử dụng lâu dài bạn nên Download 2 File JS về TẠI ĐÂY sau đó Upload lên Hosting riêng để tránh bị die host
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>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.
.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="#">Trang chủ</a></li>
<li><a href="#">Thủ thuật cơ bản</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>
</ul></li>
</ul></li>
<li><a href="#">Thủ thuật nâng cao</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="#">Hình ảnh đẹp</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>
Không có nhận xét nào:
Đăng nhận xét