10/21/2011

Tạo menu xổ ngang giống trang 24h.com.vn

( Luat1x1.blogspot.com ) – Trước đây mình đã giới thiệu cho các bạn thủ thuật để Tạo menu drop down, Tiện ích Menu Drop down nhiều cấp. Với thủ thuật đó thì các mục con của menu sẽ thả từ trên xuống. Hôm nay cũng ứng ựng từ thủ thuật trên mình sẽ giới thiệu cho các bạn thêm thủ thuật tạo menu với các submenu con nhiều cấp nằm ngang giống với trang 24h.com. Với thủ thuật này thì các thư mục chính sẽ nằm theo chiều dọc, và khi click vào thư mục có thư mục con thì các thư mục con đó sẽ hiển thị ngang bên phải của thư mục chính đó. Ở đây mình đã tìm cách đơn giản hóa thủ thuật để giúp các bạn thuận tiện trong chỉnh sửa các thư mục.

Hình ảnh minh họa

☼ Tiến hành thủ thuật

1. Đăng nhập vào blogger
2. Vào bố cục chọn chỉnh sửa HTML
3. Thêm đoạn mã bên dưới vào sau thẻ <head>

<link href='http://traidatmui.110mb.com/Myfile/css/style24h.css' rel='stylesheet' type='text/css'/>
<script src='http://traidatmui-tips.googlecode.com/files/jquery.min.js' type='text/javascript'/>
<script src='http://traidatmui-tips.googlecode.com/files/menu24h.js' type='text/javascript'/>

<script type='text/javascript'>
ddsmoothmenu.init({
mainmenuid: "smoothmenu2",
orientation: 'v',
classname: 'ddsmoothmenu-v',
//customtheme: ["#804000", "#482400"],
contentsource: "markup"
})
</script>

4. Tiếp theo bạn hãy tạo 1 HTML/Javascript và thêm vào code bên dưới

<style>
.ddsmoothmenu-v ul{
margin: 0;
padding: 0;
width: 170px; /* Độ rộng của thư mục chính */
list-style-type: none;
font: bold 12px Verdana;
border-bottom: 1px solid #fff; /* đường viền của chân text*/
text-align:left;}

.ddsmoothmenu-v ul li{
position: relative;
}

.ddsmoothmenu-v ul li a{
display: block;
overflow: auto;
color: white;
text-decoration: none;
padding: 6px;

}
.ddsmoothmenu-v ul li a:link, .ddsmoothmenu-v ul li a:visited, .ddsmoothmenu-v ul li a:active{
background: #1f2020 ; /*Màu nền của thư mục chính*/
color: white; /* màu text của thư mục chính*/
padding: 4px 4px 5px 5px;
border-right: 1px solid #fff;
border-top: 1px solid #fff;
}

.ddsmoothmenu-v ul li a.selected{
padding: 4px 4px 5px 5px;
color: white;
}

.ddsmoothmenu-v ul li a:hover{
background: #666; /* màu nền khi rê chuột*/
padding: 4px 4px 5px 5px;
color: white; /* màu text khi rê chuột*/
}

.ddsmoothmenu-v ul li ul{
position: absolute;
width: 170px; /*Độ rộng của các thư mục*/
top: 0;
font-weight: normal;
visibility: hidden;
}

/* Holly Hack for IE \*/
* html .ddsmoothmenu-v ul li { float: left; height: 1%; }
* html .ddsmoothmenu-v ul li a { height: 1%; }
</style>

<div id="smoothmenu2" class="ddsmoothmenu-v">
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a>
<ul>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Sub Item 2.2</a></li>
<li><a href="#">Sub Item 2.3</a></li>
<li><a href="#">Sub Item 2.4</a></li>
<li><a href="#">Sub Item 2.5</a></li>
</ul></li>

<li><a href="#">Item 3</a>
<ul>
<li><a href="#">Sub Item 3.1</a></li>
<li><a href="#">Sub Item 3.2</a></li>
<li><a href="#">Sub Item 3.3</a></li>
<li><a href="#">Sub Item 3.4</a>
<ul>
<li><a href="#">Sub Item 3.1.1</a></li>
<li><a href="#">Sub Item 3.1.2</a></li>
<li><a href="#">Sub Item 3.1.3</a>
</li></ul>

<li><a href="#">Sub Item 3.5</a></li>
<li><a href="#">Sub Item 3.6</a></li>
<li><a href="#">Sub Item 3.7</a></li>
</ul></li>

<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a>
<ul>
<li><a href="#">Sub Item 5.1</a></li>
<li><a href="#">Sub Item 5.2</a></li>
<li><a href="#">Sub Item 5.3</a></li>
<li><a href="#">Sub Item 5.4</a></li>
<li><a href="#">Sub Item 5.5</a>
<ul>
<li><a href="#">Sub Item 5.1.1</a></li>
<li><a href="#">Sub Item 5.1.2</a></li>
<li><a href="#">Sub Item 5.1.3</a></li>

<li><a href="#">Sub Item 5.1.4</a></li>
</ul> </li> </ul></li>

<li><a href="#">Item 6</a></li>
<li><a href="#">Item 7</a>
<ul>
<li><a href="#">Sub Item 7.1</a></li>
<li><a href="#">Sub Item 7.2</a>
<ul>
<li><a href="#">Sub Item 7.1.1</a></li>
<li><a href="#">Sub Item 7.1.2</a> </li>
<li><a href="#">Sub Item 7.1.3</a> </li>
<li><a href="#">Sub Item 7.1.4</a> </li>
<li><a href="#">Sub Item 7.1.5</a> </li>
</ul></li>
<li><a href="#">Sub Item 7.3</a></li>
<li><a href="#">Sub Item 7.4</a></li>
<li><a href="#">Sub Item 7.5</a></li>
</ul> </li>

<li><a href="#">Item 8</a></li>
<li><a href="#">Item 9</a>
<ul>
<li><a href="#">Sub Item 9.1</a></li>
<li><a href="#">Sub Item 9.2</a> </li>
<li><a href="#">Sub Item 9.3</a> </li>
<li><a href="#">Sub Item 9.4</a> </li>
<li><a href="#">Sub Item 9.5</a> </li>
</ul></li>
<li><a href="#">Item 10</a></li>
</ul>
<br style="clear: left" />
</div>

Hướng dẫn sử code:
- Các bạn hãy dựa vào các code màu xanh lá hướng dẫn ở trên để chỉnh sửa lại cho phù hợp với blog của mình.
- Code màu cam chính là tên của các thư mục chính
- Code màu nâu là tên của các thư mục cấp hai
- Code màu xanh nhạt chính là tên của thư mục cấp 3
- Code màu xám xanh là tên các thư mục cấp 4
- Bạn hãy chỉnh sửa dấu "#" trong code thành các đường link tương ứng với các tên của thư mục. Ở đây mình chỉ tạo mẫu cho các bạn 10 thư mục, nếu blog bạn có nhiều nội dung thì có thể thêm nhiều thư mục hơn. Ví dụ bạn muốn thêm thư mục 11, 12 thì chỉ việc thêm code bên dưới vào sau thư mục thứ 10 trong code và chỉnh sửa chúng lại tương tự như các thư mục trên.

<li><a href="#">Item 11</a></li>
<li><a href="#">Item 12</a></li>

Chúc bạn thành công

Share this post

0 nhận xét

:)

:-)

:))

=))

:(

:-(

:((

:d

:-d

@-)

:p

:o

:>)

(o)

[-(

:-?

(p)

:-s

(m)

8-)

:-t

:-b

b-(

:-#

=p~

:-$

(b)

(f)

x-)

(k)

(h)

(c)

cheer

© 2011 Luat1x1
Designed by BlogThietKe Cooperated with Duy Pham
Released under Creative Commons 3.0 CC BY-NC 3.0

Posts RSS ∙ Comments RSS
Back to top