Hướng dẫn tạo Accordion với CSS3

Xem: 865    Tải: 4   Thảo luận: 0   Mục: HTML-CSS template   Lĩnh vực: Khác

0 điểm   ( 2 đánh giá ) File đã được kiểm thử

1 MEGA [megacode]huong-dan-tao-accordion-voi-css3.rar (2.75 KB)
Phí tải ~ 2,000 đ
Live Demo

Bạn cần phải Đăng nhập để tải file [megacode]huong-dan-tao-accordion-voi-css3.rar
Nếu bạn chưa có tài khoản thì Đăng ký miễn phí tại đây

Báo lỗi download   Báo vi phạm bản quyền

Accordion là một kỹ thuật giúp bạn rút gọn nội dung mà bạn muốn hiển thị trên website. Nó thường được dùng cho việc hiển thị các menu con. Ngoài ra bạn cũng có thể dùng nó cho nội dung, hình ảnh. Trước đây khi áp dụng thủ thuật này, bạn phải dùng đến JavaScript hoặc JQuery. Nhưng trong bài viết này, mình sẽ chia sẻ với các bạn làm thủ thuật này với chỉ CSS3.

Tổng đài hỗ trợ KT: (+844) 6. 32.979.36 - Hotline: 0969.091.265
Hỗ trợ KT từ: 8h-17h30 các ngày trong tuần trừ chiều T7, CN và các ngày lễ;
Hỗ trợ kỹ thuật (KT) và cam kết chất lượng:
1. Code đảm bảo chất lượng giống demo 100%
2. Hỗ trợ cài đặt code cho khách hàng
3. Hỗ trợ hướng dẫn sử dụng cho khách hàng
Mega download: 1 MEGA = 2.000đ

Accordion là một kỹ thuật giúp bạn rút gọn nội dung mà bạn muốn hiển thị trên website. Nó thường được dùng cho việc hiển thị các menu con. Ngoài ra bạn cũng có thể dùng nó cho nội dung, hình ảnh. Trước đây khi áp dụng thủ thuật này, bạn phải dùng đến JavaScript hoặc JQuery. Nhưng trong bài viết này, mình sẽ chia sẻ với các bạn làm thủ thuật này với chỉ CSS3.

Đầu tiên chúng ta cần có một đoạn HTML  để làm demo

<!-- ************************** --> <!-- START OF EXPERIMENT --> <!-- ************************** -->
<div id="experiment">
 <div>
    <h2>Accordion Demo</h2>
    <div id="one">
       <h3> <a href="#one">Heading 1</a> </h3>
       <div>
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
       </div>
    </div>
 
    <div id="two">
       <h3> <a href="#two">Heading 2</a> </h3>
         <div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
    </div>
 
    <div id="three">
       <h3> <a href="#three">Heading 3</a> </h3>
       <div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse.</p>
      </div>
    </div>
 
    <div id="four">
         <h3> <a href="#four">Heading 4</a> </h3>
         <div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
       </div>
   </div>
 
  <div id="five">
     <h3> <a href="#five">Heading 5</a> </h3>
     <div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
 </div>
 
 <div id="six">
    <h3> <a href="#six">Heading 6</a> </h3>
   <div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
</div>
 
</div>
</div>
 
<!-- ************************** --> <!-- END OF EXPERIMENT --> <!-- ************************** -->

Trước tiên là áp dụng một vài lệnh css cho việc trang trí

.accordion {
background: none repeat scroll 0 0 #EEEEEE;
border: 1px solid #999999;
margin: 2em auto;
padding: 0 1em 24px;
width: 500px;
}
.accordion h2 {
margin: 12px 0;
}
.accordion .section {
background: none repeat scroll 0 0 #FFFFFF;
border-bottom: 1px solid #CCCCCC;
padding: 0 1em;
}
.accordion h3 a {
display: block;
font-weight: normal;
padding: 1em 0;
}
.accordion h3 a:hover {
text-decoration: none;
}
.accordion h3 + div {
-moz-transition: height 0.3s ease-in 0s;
height: 0;
overflow: hidden;
}
.accordion *:target h3 a {
font-weight: bold;
text-decoration: none;
}
.accordion *:target h3 + div {
height: 100px;
}
.accordion .section.large:target h3 + div {
overflow: auto;
}

Đoạn css trên chỉ là giúp chúng ta định dạng cho dễ nhìn, và đây là đoạn css giúp chúng ta tạo hiệu ứng Accordion.

.accordion h3 + div {
height: 0;
overflow: hidden;
-webkit-transition: height 0.3s ease-in;
-moz-transition: height 0.3s ease-in;
-o-transition: height 0.3s ease-in;
-ms-transition: height 0.3s ease-in;
transition: height 0.3s ease-in;
}
 
.accordion :target h3 + div {
height: 100px;
}
 
.accordion .section.large:target h3 + div {
overflow: auto;
}

Thật đơn giản và dễ thực hiện phải không nào ? Mình hy vọng với bài viết này sẽ giúp bạn có thêm kiến thức và kinh nghiệm trong việc sử dụng CSS3.
Chúc các bạn thành công !

Hướng dẫn tạo Accordion với CSS3

Hướng dẫn tạo Accordion với CSS3 Đăng ngày 23-08-2014  Accordion là một kỹ thuật giúp bạn rút gọn nội dung mà bạn muốn hiển thị trên website. Nó thường được dùng cho việc hiển thị các menu con. Ngoài ra bạn cũng có thể dùng nó cho nội dung, hình ảnh. Trước đây khi áp dụng thủ thuật này, bạn phải dùng đến JavaScript hoặc JQuery. Nhưng trong bài viết này, mình sẽ chia sẻ với các bạn làm thủ thuật này với chỉ CSS3. 5/10 865

Thảo luận:

Để bình luận bạn phải đăng nhập thành viên.

File tương tự

Files cùng mục

 

File tải nhiều nhất

Megacode.vn - Thư viện mã nguồn chia sẻ, tải file cho cộng đồng
Copyright © 2013-2016. All rights reserved. Bản quyền thuộc VinaGon
Địa chỉ: Số 38 Hàng Bè, Hàng Bạc, Hoàn Kiếm, Hà Nội.
Văn phòng giao dịch: Phòng 28, Tầng 6, HH1A Linh Đàm, Hoàng Mai, Hà Nội
Email: info@vinagon.com | Website: www.vinagon.com | Điện thoại: (+844) 6. 32.979.36;
logo megacode

Megacode đã đăng ký với Bộ Công Thương
Thư viện mã nguồn mở lớn nhất Việt Nam.



Hỗ trợ khách hàng trên Megacode
Hỗ trợ kỹ thuật cho thành viên:
Tổng đài: (+84) 246. 32.979.36
Số di động (Hotline): 0969.091.265
Thời gian làm việc:
Sáng: 8h-12h; Chiều: 13h30-17h30
(Nghỉ chiều T7, CN và các ngày lễ, tết)
Chat với Megacode
https://www.facebook.com/megacodevn