tạo menu dạng cây thư mục
Posted in: 
5:08:00 AM
VChipIT
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://vchipvn.googlecode.com/files/treemenu.js' type='text/javascript'>
</script>
</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/AVvXsEhM3P4ZIuC5tSGfuUHSlOJqu1GQVNWZ7YnLkSZzFBUEH2J47V2p-q-BI03yCy8YOuEsioDCTlvnT23dHxxlcCVuGYFYsc5cFHH_54_MFGLZS7dbAmr-8hsCzqgm4aaPLk3mT3WySMb2rqWY/) 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/AVvXsEhGSgSXfQm93VWstPu29f2WMQIBd-Mf5t8_cKq5-7XoFJgGxPO0935Dl3P2DjaRUtlpfSefQ8tvmr_AQLuAfHgAx8S975vRIJPElMKQuS0KX0ofjymDTGTK0psDoUFSc5Qx8mo3vmNAfaBZ/) no-repeat left 1px;
}
.treeview li.submenu ul{
display: none;
}
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/AVvXsEhM3P4ZIuC5tSGfuUHSlOJqu1GQVNWZ7YnLkSZzFBUEH2J47V2p-q-BI03yCy8YOuEsioDCTlvnT23dHxxlcCVuGYFYsc5cFHH_54_MFGLZS7dbAmr-8hsCzqgm4aaPLk3mT3WySMb2rqWY/) 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/AVvXsEhGSgSXfQm93VWstPu29f2WMQIBd-Mf5t8_cKq5-7XoFJgGxPO0935Dl3P2DjaRUtlpfSefQ8tvmr_AQLuAfHgAx8S975vRIJPElMKQuS0KX0ofjymDTGTK0psDoUFSc5Qx8mo3vmNAfaBZ/) 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>
<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ả.
0 comments:
Post a Comment