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 M, 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...
Mời bạn rê chuột thử vào menu ở dưới để xem hiệu ứng xổ dọc của 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'/>
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="#">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>
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.
