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://dl.dropbox.com/u/16437688/phavaphu/Thu%20vien%20Blogspot/Menu/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/AVvXsEgCVjODKtgNx9JcZw8AOysAe0uixx-VugWtiR0RaaKWpsm02DhRVIWBMNDkVQTJVOKsdiqSdQx9hAOoVA5cGilvPwGt1-FfXyiuYlcL_JVEQi-Bsuf3ucGV3KYNxP0T6ZvppaSCWFMWdZdT/) 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/AVvXsEggoidpeqnGdK-D3GcuFMLJKjBHXfmYRQK_2SK6ZbCVt6ozVRImmFgDexSgeI0uS6VN8pLHXIXvHuN1vHSuM0uwRVhITevwZvGjiGq9O7hRhGDkw3nq-My1FEhOOEYCnGNcLPV7Hzq5ujJH/) 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/AVvXsEgCVjODKtgNx9JcZw8AOysAe0uixx-VugWtiR0RaaKWpsm02DhRVIWBMNDkVQTJVOKsdiqSdQx9hAOoVA5cGilvPwGt1-FfXyiuYlcL_JVEQi-Bsuf3ucGV3KYNxP0T6ZvppaSCWFMWdZdT/) 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/AVvXsEggoidpeqnGdK-D3GcuFMLJKjBHXfmYRQK_2SK6ZbCVt6ozVRImmFgDexSgeI0uS6VN8pLHXIXvHuN1vHSuM0uwRVhITevwZvGjiGq9O7hRhGDkw3nq-My1FEhOOEYCnGNcLPV7Hzq5ujJH/) 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ả.
Chúc bạn thành công
Nguồn: TRAIDATMUI.com
0 Nhận xét
Khi trả lời hoặc đưa ra một câu hỏi xin vui lòng:
1) Hiểu rằng tiếng Việt không phải là ngôn ngữ đầu tiên của tất cả mọi người vì vậy hãy khoan dung lỗi chính tả và ngữ pháp xấu.
2) Nếu một câu hỏi vẫn chưa được câu sau đó, hoặc yêu cầu làm rõ, bỏ qua nó, hoặc chỉnh sửa các câu hỏi và sửa chữa vấn đề. Xúc phạm không được chào đón.
3) Với mỗi bài viết, các bạn không rõ ở điểm nào. Xin hãy nêu ý kiến của mình dưới comments!
Hoặc có thể liên hệ qua Email: phavaphu@gmail.com
----------------------------------------------------------
Chúc các bạn sức khỏe và thành công trong cuộc sống!