"Thủ thuật tạo menu dạng cây thư mục"
.jpg)
Trước đây mình đã có dịp giới thiệu đến các bạn một số dạng menu dành cho blog, hôm nay cũng xin chia sẽ thêm cùng các bạn một thủ thuật tạo menu cho blog. Ở đây chúng ta sẽ cùng tìm hiểu việc tạo menu dạng cây thư mục, dạng này cũng hiển thị tương tự như cách bố trí các cây thư mục của máy tính. Để dễ dàng hình dung bạn có thể xem phần demo ở bên dưới, thủ thuật này cũng khá đơn giản chúng ta bắt đầui tến hành.
1. Đăng nhập tài khoản
2. Vào thiết kế chọn chỉnh sửa HTML
3. Thêm code sau vào bên dưới thẻ <head>
<script src='http://data-traidatmui.appspot.com/scripts/treemenu.js' type='text/javascript'>
</script>
4. Tiếp theo bạn thêm code bên dưới váo trước thẻ ]]></b:skin>
.treeview ul{
margin: 0;
padding: 0;
}
.treeview {
color:#000066; /*màu text*/
font-weight:bold;
font-size:12px; /*kích cở text*/
}
.treeview a{
font-weight:normal;
color:#ff0000; /*màu của linktext*/
}
.treeview a:hover{
color:#0000ff; /*màu của linktext khi rê chuột*/
}
.treeview li{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFFKTtTXpp9wOYFZzsuOY-4I8MKdtU_RXQvyjjPaix2t1oB658E6np8gr224NCRHUg1gCjET09dgBtnttNFjHEdT2ZUup7qF5FAFRon8Nud5jgY3fiAiuxrCAOnRGUyD-bG0VrJZ6gomm9/) no-repeat left center;
list-style-type: none;
padding-left: 22px;
margin-bottom: 3px;
cursor: hand !important;
cursor: pointer !important;
}
.treeview li.submenu{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGhmsaWLXAkasmsnERFczASQEP5pF55ceylQMiZfibZrNDj8-TWPPKlABtgWXkbKVsF0K64CQTQc1wVg4AZ6HMhGYSMOTb2o7KtsMnEIbZJc9Qr-zpK3HL0QqTXXhSFAieQpQ2KJcO1h1x/) no-repeat left 1px;
}
.treeview li.submenu ul{
display: none;
}5. Save template lại và trở về phần tử trang thêm 1 HTML/Javascript
6. Thêm code bên dưới vào phần tử HTML đó
<a href="javascript:ddtreemenu.flatten('treemenu1', 'expand')">Mở tất cả</a> | <a href="javascript:ddtreemenu.flatten('treemenu1', 'contact')">Thu tất cả</a>
<ul id="treemenu1" class="treeview">
<li><a href="URL menu 1">Tên menu 1</a></li>
<li><a href="URL menu 2">Tên menu 2</a></li>
<li>Tên menu 3
<ul>
<li><a href="URL submenu 3.1">Tên submenu 3.1</a></li>
<li><a href="URL submenu 3.2">Tên submenu 3.2</a></li>
</ul>
</li>
<li><a href="URL menu 4">Tên menu 4</a></li>
<li>Tên menu 5
<ul>
<li><a href="URL submenu 5.1">Tên submenu 5.1</a></li>
<li>Tên menu 5.2
<ul>
<li><a href="URL submenu 5.2.1">Tên submenu 5.2.2</a></li>
<li><a href="URL submenu 5.2.3">Tên submenu 5.2.3</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="URL menu 6">Tên menu 6</a></li>
</ul>
<script type="text/javascript">
ddtreemenu.createTree("treemenu1", true) //nếu bạn muốn khi load vào trang menu ở dạng thu gọn bạn thay TRUE thành FALSE
</script>Chỉnh code:
- Các code màu cam là tên hiển thị của các thư mục, bạn thay thành các tên mục bạn muốn đưa vào menu.
- Các dòng màu đỏ trong code chính là đường dẫn của các thư mục, thay chúng thành đường dẫn tương ứng với tên của thư mục đó.
- Dòng màu xanh đậm là những thư mục có chứa các thư mục con ở bên trong.
7. Sau khi hoàn thành công việc chỉnh sửa bạn save lại để xem kết quả.
Chúc bạn thành công
theo traidatmui.com
.jpg)
