» » MENU NGANG XỔ DỌC XUỐNG NHIỀU CẤP (KIỂU 2)

MENU NGANG XỔ DỌC XUỐNG NHIỀU CẤP (KIỂU 2)

Posted by chiasedamme on Friday, August 19, 2011

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... 

Mời bạn bấm vào "Xem thử" phía dưới để thấy rõ hiệu ứng xổ dọc của menu này




Xem thử


Để 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. 

Nguồn: Trai đất mũi
at 4:23 AM
Labels: ,

{ 0 comments... read them below or add one }


Post a Comment