accordion menu kiểu Xổ dọc bằng JQuery
Từ một tài liệu sưu tập, mình chợt nghĩ đến một cách để ứng dụng nó vào thực tiễn thiết kế accordion menu kiểu xổ dọc bằng JQuery. Các bước tiến hành cũng khá đơn giản, như sau:
Bước 1:
Đăng nhập vào Blogger > Layout > Edit HTML (Không cần Mở rộng Mẫu tiện ích)
Bước 2:
Thêm đoạn code bên dưới vào ngay trên thẻ </head>
<script src='http://code.jquery.com/jquery.js' type='text/javascript'/>
<style type='text/css'>
/* Main accordion container */
.accordion{
width:300px;
}
/* accordion content div, default display is hidden */
.accContent{
display:none;
border:1px solid #CCCCCC;
padding:3px;
}
/* Title links (clickable to show their content and hide others) */
.acctitle{
display:block;
width:100%;
padding:3px 3px 3px 3px;
background-color:#CC0000;
color:#FFFFFF;
cursor:pointer
}
/* Default accordion class (usually first one so it is always visible) */
.defaultAccordion{
display:block;
}
</style>
Bước 3:
Thêm đoạn code bên dưới vào ngay dưới thẻ </head>
Bước 4:
Tạo 1 HTML/JavaScript: Chép Source Code dưới đây vào:
Lưu Widget nầy lại và đặt nó ở nơi mà bạn cần thiết. Nó sẽ có hình như dưới đây:
Chú thích:
Bạn cần phải thay vào cho phù hợp
Chúc các bạn thành công.
Khanhnguyen's Blog
Thêm đoạn code bên dưới vào ngay dưới thẻ </head>
<script type='text/javascript'>$(function(){// loop though each link$("a.acctitle").each(function(){// add an event on click$(this).click(function(){// hide all div's with accContent class$(".accContent").each(function(){$(this).hide("slow");});// the main point of this script - Fetch ref attribute of// title link and display the hidden div with that id$("#"+$(this).attr("ref")).show("slow");return;});});});</script>
Tạo 1 HTML/JavaScript: Chép Source Code dưới đây vào:
<div class="accordion"><a ref="first_section" class="acctitle">Thủ thuật Blogger</a><div id="first_section" class="accContent defaultAccordion"><a href="Địa chỉ Url của các nhãn(label), Tag/Keyword">Căn bản về Blogger</a><br /><a href="Địa chỉ Url của các nhãn(label), Tag/Keyword">Thiết kế cơ bản</a><br /><a href="Địa chỉ Url của các nhãn(label), Tag/Keyword">Blogger Blogspot</a><br /><a href="http://hocvalamtinhoc.blogspot.com/search/label/Tên nhãn">Css</a></div><a ref="second_section" class="acctitle">Tin học</a><div id="second_section" class="accContent"><a href="http://hocvalamtinhoc.blogspot.com/search/label/Tên nhãn">FaceBook</a><br /><a href="http://hocvalamtinhoc.blogspot.com/search/label/Tên nhãn">Google</a><br /><a href="http://hocvalamtinhoc.blogspot.com/search/label/Tên nhãn">Kỹ thuật tin học</a></div><a ref="third_section" class="acctitle">Những thứ khác</a><div id="third_section" class="accContent"><a href="http://hocvalamtinhoc.blogspot.com/search/label/Tên nhãn">Chuyện đó đây</a><br /><a href="http://hocvalamtinhoc.blogspot.com/search/label/Tên nhãn">Hộp thử Code HTML/JavaScript</a></div></div>
Bạn cần phải thay vào cho phù hợp
- Các hàng chữ màu đỏ:là tiêu đề của menu, khi bạn click chuột vào nó sẽ xổ xuống một danh sách chọn lựa. Như hình trên, các tiêu đề gồm: Thủ thuật Blogger, Tin học, Những thứ khác.
- Các hàng chữ màu xanh Địa chỉ Url của các nhãn(label), Tag/Keyword: Tự tên của nó, bạn muốn thay bằng địa chỉ nhãn (thẻ label) hay địa chỉ của một Tag/keyword do bạn tự tạo cũng được.
Để tạo một Keyword, bạn tham khảo bài: Tạo bộ tag , keyword cho bài viết trong blogspot
- Các hàng chữ màu vàng: là tên của các Nhãn(label), hoặc Tag/keyword mà bạn cần hiển thị trong danh mục truy cập. Nó phải đồng hành với nội dung địa chỉ của Địa chỉ Url của các nhãn(label), Tag/Keyword.
- width:500px như ở bước thực hiện số 2, bạn có thể thay nó là mấy cũng được cho phù hợp với size của bạn.
Khanhnguyen's Blog
Nguyễn Đạt Khánh | Thứ Năm, tháng 5 05, 2016 |
Thủ thuật Blogger
Be the first to comment!
Được viết bởi Khánh Nguyễn
Blog của tôi, Nguyễn Đạt Khánh là tên của tôi :Nghề nghiệp: IT Computer Networking - Kỹ thuật viên Mạng máy tính Viễn thông
Bạn đang xem Blog của tôi. Đừng quên nhấn Like và Share để ủng hộ. Một điều tốt nhất mà tôi mong đợi, là những dòng Comments thiện chí với nhau. Xin chân thành cảm ơn tất cả các bạn.
Nơi truy cập vào Nick của Tôi trên mạng:
.png)
.png)
.png){kind=spacer}
.png)
