Header Ads Widget

Phương Phạm Blog

Tạo menu dạng cây thư mục(kiểu 3)

phamvanphuong 5/22/2012 03:13:00 CH
Tạo menu dạng cây thư mục thì mình cũng thích thú với dạng này nên cũng sưu tầm một số trang liên quan. 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 để có cái nhìn tổng quan hơn, thủ thuật này cũng khá đơn giản chúng ta bắt đầu tiế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://dl.dropbox.com/u/16437688/phavaphu/Thu%20vien%20Blogspot/Menu/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/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>


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
Tags:

Đăng nhận xét

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!