CSS3 cuộn xếp – đóng mở nội dung kèm chuyển động

Hướng dẫn tạo thanh cuộn xếp ẩn hiện nội dung kèm chuyển động, toàn bộ thực hiện bằng CSS3.

CSS3 cuộn xếp ẩn hiện nội dung

Hôm nay mình hướng dẫn các bạn làm một dàn xếp để hiển thị nội dung, dựa bộ nối và pseudo class :checked. Để kiểm soát việc đóng mở các nội dung, chúng ta dùng các input dạng radio button hoặc checkbox rồi cho ẩn nó đi; dùng các label để làm tiêu đề; cuối cùng là dùng hiệu ứng cuộn xếp (accordion) để  thực hiện đóng mở phần nội dung.

Nếu dùng checkbox thì ta có thể mở cùng lúc nhiều phần (section), còn radio button thì mỗi lúc chỉ một phần được mở.

Chú ý: chỉ có trình duyệt có hỗ trợ các thuộc tính CSS3 mới chạy được hiệu ứng này. Khuyến cáo dùng Google Chrome hoặc FireFox.

Bắt đầu!!!

Các thẻ HTML

Chúng ta dùng thẻ SECTION để bọc tất cả các mục (item). Mỗi mục được chia thành một DIV, trong mỗi DIV gồm các phần INPUT, LABEL, ARTICLE. Để set cho một mục nào đó mặc định là mở (open), ta thêm thuộc tính checked=checked vào trong tag INPUT.

<section class="ac-container">
<div><input id="ac-1" type="checkbox" name="accordion-1" /> <label for="ac-1">About me</label>
<article class="ac-small">
Hello World. I'm Cosmos Pham. I love programming.

</article></div>
<div><input id="ac-2" type="checkbox" name="accordion-2" /> <label for="ac-2">CSS3</label>
<article class="ac-small">
This is a CSS3 tutorial.

</article></div>
<div><input id="ac-3" type="checkbox" name="accordion-3" /> <label for="ac-3">Blogger needed</label>
<article class="ac-medium">
I'm finding someone who love blogging. We will share our interest and knowledge for everybody.

</article></div>
<div><input id="ac-4" type="checkbox" name="accordion-4" /> <label for="ac-4">Contact me</label>
<article class="ac-medium">
Email to <strong>phamquocbuu@gmail.com</strong> or Skype/Yahoo! <strong>phamquocbuu</strong>.

</article></div>
</section>

Chú ý là ta đặt tên (name) khác nhau cho các INPUT dạng checkbox khác nhau. Nếu INPUT là radio thì name phải giống nhau – vì giống nhau thì ta mới chọn chỉ-một-radio button được.

Bây giờ chuyển sang phần định dạng.

Định dạng bằng CSS

Căn giữa phần cuộn xếp – cho đẹp ^^

.ac-container {
	width: 400px;
	margin: 10px auto 30px auto;
}

Tiếp theo, chúng ta định dạng cho thằng LABEL, cho nó bóng bẩy một chút, thiết lập nó để ta có thể click vào, tạo bóng… Rồi set z-index (thứ tự trên dưới) cho nó là 20 để đảm bảo không bị mấy thằng khác đè lên.

.ac-container label {
	font-family: 'Arial Narrow', Arial;
	padding: 5px 20px;
	position: relative;
	z-index: 20;
	display: block;
	height: 30px;
	cursor: pointer;
	color: #777;
	text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
	line-height: 33px;
	font-size: 19px;
	background: #ffffff;
	background: -moz-linear-gradient(top, #ffffff 1%, #eaeaea 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#ffffff), color-stop(100%,#eaeaea));
	background: -webkit-linear-gradient(top, #ffffff 1%,#eaeaea 100%);
	background: -o-linear-gradient(top, #ffffff 1%,#eaeaea 100%);
	background: -ms-linear-gradient(top, #ffffff 1%,#eaeaea 100%);
	background: linear-gradient(top, #ffffff 1%,#eaeaea 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea',GradientType=0 );
	box-shadow:
		0px 0px 0px 1px rgba(155,155,155,0.3),
		1px 0px 0px 0px rgba(255,255,255,0.9) inset,
		0px 2px 2px rgba(0,0,0,0.1);
}

Khi rà chuột lên, cho cái LABEL nền trắng…

.ac-container label:hover {
	background: #fff;
}

Khi click chuột, checkbox sẽ được check và chúng ta dùng hiệu ứng sau để đánh dấu là nó được check rồi.

.ac-container input:checked + label,
.ac-container input:checked + label:hover {
	background: #c6e1ec;
	color: #3d7489;
	text-shadow: 0px 1px 1px rgba(155,155,155,0.3);
	box-shadow:
		0px 0px 0px 1px rgba(155,155,155,0.3),
		0px 2px 2px rgba(0,0,0,0.1);
}

Chúng ta dùng “bộ nối” (adjacent sibling combinator), tức là cái dấu cộng +, để chọn LABEL tương ứng với checkbox được check.

Thêm một mũi tên be bé khi rà chuột lên LABEL. Ta dùng pseudo-class after, để tránh phải thêm các thẻ không cần thiết.

.ac-container label:hover:after,
.ac-container input:checked + label:hover:after {
	content: '';
	position: absolute;
	width: 24px;
	height: 24px;
	right: 13px;
	top: 7px;
	background: transparent url('../images/arrow_down.png') no-repeat center center;
}

Bây giờ là mũi tên chỉ hướng ngược lại…

.ac-container input:checked + label:hover:after {
	background-image: url('../images/arrow_up.png');
}

Ẩn các INPUT đi…

.ac-container input {
	display: none;
}

Phần nội dung mặc định có height là 0px và các nội dung tràn (overflow) sẽ được ẩn đi. Sau đó thêm các hiệu ứng chuyển động cho chiều cao và thêm viền cho khung của nội dung. Một chuyển động là đóng nội dung và một cái mở ra.

.ac-container article {
	background: rgba(255,255,255,0.5);
	margin-top: -1px;
	overflow: hidden;
	height: 0px;
	position: relative;
	z-index: 10;
	-webkit-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
	-moz-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
	-o-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
	-ms-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
	transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
}

.ac-container input:checked ~ article {
	-webkit-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
	-moz-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
	-o-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
	-ms-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
	transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
	box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3);
}

Thêm một chút định dạng cho phần nội dung.

.ac-container article p {
	font-style: italic;
	color: #777;
	line-height: 23px;
	font-size: 14px;
	padding: 20px;
	text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
}

Vì chiều cao không thể thiết lập auto, mà ta phải cho giá trị “cứng” để dễ dàng trong việc tạo hiệu ứng chuyển động . Phần nội dung nào dài thì ta cho chiều cao lớn, và ngắn thì chiều cao nhỏ.

.ac-container input:checked ~ article.ac-small {
	height: 85px;
}

.ac-container input:checked ~ article.ac-medium {
	height: 105px;
}

.ac-container input:checked ~ article.ac-large {
	height: 155px;
}

Một số trình duyệt trên điện thoại có thể không hỗ trợ tốt phần CSS này.

Chúc bạn vui và có những ứng dụng tốt từ bài viết này.

Reference: http://tympanus.net/codrops/2012/02/21/accordion-with-css3/


USB SSK SFD166 mạ Vàng

USB SSK SFD166 mạ Vàng với Giá cực SỐC !

USB SSK SFD166 mạ Vàng

USB SSK SFD166 mạ Vàng với Giá cực SỐC !

Chi tiết sản phẩm: 

  • Xuất xứ: Chính hãng SSK (Nhập khẩu)
  • Chất liệu: thép không rỉ và pha lê
  • Kích thước: 37 x 12 x 4.5 mm
  • Màu sắc: Vàng
  • Dung lượng: 4G – 8G
  • Cổng giao tiếp: 2.0 – tương thích cổng USB 1.1

USB 4G:  160,000 VNĐ/cái 

USB 8G: 199,000 VNĐ/cái 

Bảo hành 12 tháng

Giao hàng tận nơi (Sài Gòn)

Có xuất hoá đơn đỏ nếu cần.

Có giá tốt cho các bạn lấy từ 20 cái trở lên

Liên hệ:

Điện thoại: 0169 299 8182 – 012 1617 9469

Email: phamquocbuu@gmail.com

Yahoo!: phamquocbuu  Yahoo Messenger Icons
Skype: phamquocbuu My status

2 thoughts on “CSS3 cuộn xếp – đóng mở nội dung kèm chuyển động

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s