Hiệu ứng accordion là một kiểu hiệu ứng khá đẹp mắt cho phép ẩn hiện nội dung web một cách chuyên nghiệp.
Xem Demo.
Bạn có thể áp dụng hiệu ứng này cho website của mình theo hướng dẫn dưới đây:
Chèn đoạn code dưới đây vào giữa phần <head> … </head> của trang HTML.
<script type="text/javascript" src="/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".accordion h3:first").addClass("active");
$(".accordion p:not(:first)").hide();
$(".accordion h3").click(function(){
$(this).next("p").slideToggle("slow")
.siblings("p:visible").slideUp("slow");
$(this).toggleClass("active");
$(this).siblings("h3").removeClass("active");
});
});
</script>
<style type="text/css">
body {
margin: 10px auto;
width: 570px;
font: 75%/120% Arial, Helvetica, sans-serif;
}
.accordion {
width: 480px;
border-bottom: solid 1px #c4c4c4;
}
.accordion h3 {
background: #e9e7e7 url(/images/arrow-square.gif) no-repeat right -51px;
padding: 7px 15px;
margin: 0;
font: bold 120%/100% Arial, Helvetica, sans-serif;
border: solid 1px #c4c4c4;
border-bottom: none;
cursor: pointer;
}
.accordion h3:hover {
background-color: #e3e2e2;
}
.accordion h3.active {
background-position: right 5px;
}
.accordion p {
background: #f7f7f7;
margin: 0;
padding: 10px 15px 20px;
border-left: solid 1px #c4c4c4;
border-right: solid 1px #c4c4c4;
}
</style>
Bạn nên tải về file jquery.js và file arrow-square.gif rồi thiết lập URL cho đúng. Ngoài ra bạn có thể chỉnh độ rộng (width) phù hợp với yêu cầu website của bạn.
Kế đến bạn thiết kế nội dung hiệu ứng theo như bên dưới và đặt vào phần thân của trang HTML, giữa 2 thẻ <body> … </body>.
<div class="accordion">
<h3>Sample Heading 1</h3>
<p>This is a demo content for Sample Heading 1. You should replace it with your own customized content. You can add as many sample headings with their corresponding content as you like.</p>
<h3> Sample Heading 2</h3>
<p> This is a demo content for Sample Heading 2. You should replace it with your own customized content. You can add as many sample headings with their corresponding content as you like.</p>
<h3> Sample Heading 3</h3>
<p> This is a demo content for Sample Heading 3. You should replace it with your own customized content. You can add as many sample headings with their corresponding content as you like.</p>
<h3> Sample Heading 4</h3>
<p> This is a demo content for Sample Heading 4. You should replace it with your own customized content. You can add as many sample headings with their corresponding content as you like.</p>
<h3> Sample Heading 5</h3>
<p> This is a demo content for Sample Heading 5. You should replace it with your own customized content. You can add as many sample headings with their corresponding content as you like.</p>
</div>
Nằm giữa 2 thẻ <h3>, </h3> là phần tiêu đề. Nằm giữa 2 thẻ <p>, </p> là phần nội dung tương ứng cho tiêu đề. Bạn có thể thêm tiêu đề và nội dung tương ứng tùy thích.
Hiệu ứng này có thể áp dụng cho Blogger. Chỉ cần đặt toàn bộ 2 phần code nêu trên vào một tiện ích HTML là xong.
Hiệu ứng tham khảo theo Webdesignerwall.
{ 0 comments... read them below or add one }
Post a Comment