• Tư vấn điều trị
      bệnh khàn tiếng


    www.trikhantieng.com

    Liên hệ + 0913163316

BlogList111

Việt Nam Gia Phả, nơi lưu trữ Gia Phả của người Việt Nam  Kiến thức Blogspot Ngonluanho: Nhung cau chuyen thap lua-Tin-Cay-Men Vngreenzone Là một nơi chia sẻ kinh nghiệm làm blogger - Nơi tôn vinh tâm hồn blogger Việt

Tạo menu dạng thư mục với DD Tree Menu Script

4
06/01/2011

Menu dạng cây thư mục là một kiểu menu cổ điển. Menu dạng cây thư mục có thể được thiết kế bằng phần mềm Flash Menu. Tuy nhiên quá trình thực hiện khá phức tạp.

Với sự hỗ trợ của Tree Menu Script do Dynamic Drive phát triển, kiểu menu này biến bất kỳ một danh mục liên kết UL thành một cây thư mục có thể thu hẹp hoặc mở rộng.

DEMO

Để thực hiện kiểu Menu này, bạn hãy xem Demo, sau đó cài đặt theo các bước sau đây:

Bước 1. Đặt đoạn code sau đây vào trước thẻ </head>.

<script type="text/javascript" src="http://yourjavascript.com/12503401210/simpletreemenu.js">

/***********************************************
* Simple Tree Menu- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
</script>

Bước 2. Đặt đoạn code sau đây vào trước thẻ </head>, ngay sau code ở Bước 1.

<style type="text/css">
.treeview ul{ /*CSS for Simple Tree Menu*/
margin: 0;
padding: 0;
}
.treeview li{ /*Style for LI elements in general (excludes an LI that contains sub lists)*/
background: white url(http://1.bp.blogspot.com/-OdYhoveUcos/Touqd0ida_I/AAAAAAAAAHE/eSVxZI-Cazw/s1600/list.gif) no-repeat left center;
list-style-type: none;
padding-left: 22px;
margin-bottom: 3px;
}
.treeview li.submenu{ /* Style for LI that contains sub lists (other ULs). */
background: white url(http://2.bp.blogspot.com/-LnJAynSwZco/TouqdpTkwUI/AAAAAAAAAHA/MAFR9KoHev0/s1600/closed.gif) no-repeat left 1px;
cursor: hand !important;
cursor: pointer !important;
}
.treeview li.submenu ul{ /*Style for ULs that are children of LIs (submenu) */
display: none; /*Hide them by default. Don't delete. */
}
.treeview .submenu ul li{ /*Style for LIs of ULs that are children of LIs (submenu) */
cursor: default;
}
</style>

Bước 3. Trong phần thân trang web, sau thẻ <body>, thiết lập cấu trúc HTML như sau.

<a href="javascript:ddtreemenu.flatten('treemenu1', 'expand')">Mở rộng</a> | <a href="javascript:ddtreemenu.flatten('treemenu1', 'contact')">Thu hẹp</a>

<ul id="treemenu1" class="treeview">
<li>Folder 1
<ul>
<li><a href="#">Sub Item 1.1</a></li>
<li><a href="#">Sub Item 1.2</a></li>
</ul>
</li>
<li>Folder 2
<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>
</ul>
</li>
<li>Folder 3
<ul>
<li>Sub Item 3.1</li>
<li>Folder 3.1
<ul rel="open">
<li>Sub Item 3.1.1</li>
<li>Sub Item 3.1.2</li>
<li>Folder 3.1.1
<ul>
<li>Sub item 3.1.1.1</li>
<li>Sub item 3.1.1.2</li>
<li>Sub item 3.1.1.3</li>
<li>Sub item 3.1.1.4</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>

<li>Item 4</li>
</ul>

<script type="text/javascript">
ddtreemenu.createTree("treemenu1", true) // nếu bạn muốn khi load trang, menu ở dạng thu gọn thì thay TRUE thành FALSE
</script>

Chú ý trong đoạn code trên, thuộc tính rel="open" có chức năng xác định các sublist được mở rộng mặc định khi load trang web.

Kiểu menu này có thể cài đặt cho Blogger khá dễ dàng tương tự cách cài đặt đối với website thông thường ở trên.

Bạn có thể xem thêm ở trang giới thiệu của Dynamic Drive.

{4 bình luậnAdd yours ?}

15:05:00, 6 thg 1, 2011

Chào bạn , mình tự edit temp , xong nhưng nó ko hiển thị khung comment , nếu khôi phục lại temp thì edit lại hơi mất time .
Hy vọng bạn giúp dc để đỡ tốn time nhất
thanks !

Reply
18:51:00, 22 thg 4, 2011

Bài viết này bị lỗi anh ơi:53)

Reply
09:46:00, 3 thg 8, 2011

Chào Hà,
Cái thủ thuật này có thể áp dụng cho nhãn không.? Ý mình là, các folder chính là các nhãn, còn SubItem chính là các bài viết trong nhãn. Mình thấy khi click vào 1 nhãn, nó ra tất cả các bài trong trang chính thì nhiều quá.
Nếu áp dụng cái này thì khi nhấn vô nhãn, sẽ xổ ra các bài với tiêu đề và câu dẫn (nếu có thể), rồi click vào bài viết thì lấy bài viết ra.
Thanks nhiều.

Reply
09:54:00, 3 thg 8, 2011

Cái demo lỗi chưa sửa lại. Cái này là menu thôi chứ bài viết gì đâu, các tiêu đề chính là nhãn mà. Còn ý của Viên thì phải áp dụng theo kiểu khác, phức tạp hơn.

Reply
Nội quy! Đóng lại Khi bạn viết bình luận, cần tuân thủ một số quy tắc sau:
» Bình luận phải nghiêm túc và không chứa các liên kết quảng cáo.
» Có thể sử dụng các thẻ <b> … </b>,<i> … </i>, <a href="URL..."> ... </a>.
» Yêu cầu thủ thuật tại mục Yêu cầu thủ thuật hoặc hỏi tại mục Hỏi và Đáp.
More →
Chữ đậm Chữ nghiêng Chữ nghiêng 2 Chèn Link Chèn Link Mã hóa code Help ?Nhấn vào biểu tượng hoặc kiểu chữ hoặc chèn link sau đó nhấn nút Chọn rồi copy (Ctrl + C) để paste (Ctrl + V) vào khung viết bình luận. Mã hóa code nếu bạn muốn đưa code vào bình luận.

Chọn Xóa

Next post: Bài đăng Mới hơn

Previous post: Bài đăng Cũ hơn