Drop Menu (Kiểu 2)

Cách tạo Drop Menu ngang xổ dọc xuống nhiều cấp liên tiếp cho blogspot

Trước đây, tôi có đăng bài Drop Menu 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 Namkna xin giới thiệu đến các bạn Drop Menu Kiểu 2, menu này cũng giống với 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...

Demo for Post

Hình ảnh minh họa:

Để 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://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js' type='text/javascript'/>
<script src='http://dl.dropbox.com/u/66256041/Menu/namkna-blogspot-menu-xo-doc-2/drop_menu.js' type='text/javascript'/>

- Do hiện tại host goole code của mình bị ban từ nhà cung cấp do vậy các bạn chịu khó Download 2 File JS về TẠI ĐÂY sau đó Upload lên Hosting riêng để dùng, nếu chưa có host thì bạn chịu khó xem host miễn phí Tại đây

4. Save template lại
5. Bây giờ bạn vào thiết kế - Phần tử trang và thêm 1 HTML/Javascript trên phần header và dán code bên dưới vào

<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;z-index:30;
}
.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;
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: 0px;
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="#">Cuộc sống</a></li>
<li><a href="#">Học tập</a></li>
<li><a href="#">Thủ thuật</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="#">Giải trí­</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="#">Vườn thơ</a></li>

<li><a href="#">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>

Chỉnh code:

Bạn hãy dựa vào các dòng chữ màu xanh lá ở trên để chỉnh sửa màu nền và text theo ý bạn
Những dòng màu đỏ đậm trong code trên chính là tên của các thư mục chính, bạn hãy thay đổi cho phù hợp với blog của bạn.
Code màu xanh dương là tên của những thư mục con cấp 1 của menu chính
Code màu xanh nhạt là tên của thư mục con cấp 2 của thư mục chính
Code màu cam là thư mục con cấp 3 của thư mục chính, bạn hãy sửa tên các thư mục trên cho phù hợp với blog của bạn.
Thay các dấu "#" thành những đường dẫn tương ứng với tên của thư mục

- Trong đoạn code sau:

.jqueryslidemenu ul li ul li a{
font: normal 13px Verdana;
width: 160px;
padding: 5px;
margin: 0px;
border-top-width: 0;
border-bottom: 1px solid gray;
}

Bạn chỉnh padding: 5px; để điều chỉnh độ rộng cuả Menu
Chỉnh margin: 0px; để điều chỉnh khoảng cách giữa các Sub menu. Có thể lấy các giá trị âm và dương. Nếu khoảng các giữ các Menu con lớn thì lấy giá trị âm (Ví dụ: margin: -3px;), Nếu các Menu con chồng lên nhau thì lấy giá trị dương (Ví dụ margin: 5px;), Nếu khoảng cách giữ các Menu con là sát nhau thì giữ nguyên margin: 0px; (Xem hình)

Tạo Menu ngang xổ dọc nhiều cấp liên tiếp cho blogspot

- Ở trên mình chỉ giới thiệu cho bạn tạo 7 thư mục, bạn có thể thêm nhiều hơn hoặc bớt đi tùy ý. Nhưng bạn cần phải lưu ý khi xóa đi hoặc thêm vào thư mục nào thì phải kiểm tra lại thẻ đóng của chúng cho phù hợp.

Cách tạo menu con: ví dụ bạn muốn tạo thư mục con cấp 2 cho thư mục "Download" tại thư mục Sub Item 2.2 thì bạn làm như bên dưới:

<li><a href="#">Download</a>
<ul>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Sub Item 2.2</a>
<ul>
<li><a href="#">Sub Item 2.1.1</a></li>
<li><a href="#">Sub Item 2.2.2</a></li>
</ul>
</li>
</ul></li>

Bạn muốn tạo cho các thư mục khác thì làm tương tự, chú ý các thẻ <li>, <ul> đóng chúng cho phù hợp.

Nếu muốn thêm thư mục không cần có thư mục con bạn chỉ việc thêm code như bên dưới và vị trí bạn muốn. ví dụ thêm như mục "Công cụ" vào sau thư mục "Học tập" bạn làm như sau:

<li><a href="#">Học tập</a></li>
<li><a href="#">Công cụ</a></li>

Chúc thành công!

You'll never fuck alone

Drop Menu (Kiểu 2)

1 nhận xét:

Game

Blogspot

Kiếm tiền

Xanh chín

Đời ... !!!