• 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

Hiệu ứng đàn xếp khung lưới sử dụng CSS kết hợp jQuery

4
08/11/2010

Hiệu ứng đàn xếp khung lưới là một kiểu thanh điều hướng đàn xếp cải tiến được xây dựng bằng jQuery.

Nó hoạt động tương tự như các hiệu ứng đàn xếp khác, chỉ một ô được mở ra vào một thời điểm và sẵn sàng hiển thị thông tin chi tiết về các mục bên trong một khung lưới.

Điều quan trọng là cột của ô mở hiện tại mở rộng theo chiều rộng hợp lý. Kỹ thuật này do Chris Coyier tại bang Florida (Mỹ) tạo ra.

Xem Demo.

Nếu bạn thích kỹ thuật này thì thực hiện theo các bước sau đây.

1. Đặt phần code bên dưới vào trước thẻ </head>.
<style type='text/css'>
#page-wrap { width: 960px; padding: 0 0 0 15px; margin: 0 auto; overflow: hidden; height: 100%; }

.info-col { float: left; width: 132px; height: 100%; padding: 50px 0 0 0; }
.info-col h2 { text-align: center; font-weight: normal; padding: 25px 0; }

.image { height: 100px; text-indent: -9999px; display: block; border-right: 1px solid white; }

.batman { background: url(http://css-tricks.com/examples/InfoGrid/images/batman.jpg) center center no-repeat; }
.spiderman { background: url(http://css-tricks.com/examples/InfoGrid/images/spiderman.jpg) center center no-repeat; }
.aquaman { background: url(http://css-tricks.com/examples/InfoGrid/images/aquaman.jpg) center center no-repeat; }
.ironman { background: url(http://css-tricks.com/examples/InfoGrid/images/ironman.jpg) center center no-repeat; }
.superman { background: url(http://css-tricks.com/examples/InfoGrid/images/superman.jpg) center center no-repeat; }

dt { padding: 5px; background: #900; color: white; border-bottom: 1px solid white; border-right: 1px solid white; }
dd { position: absolute; left: -9999px; top: -9999px; width: 299px; background: #900; padding: 10px; color: white; border-right: 1px solid white; }

dt:nth-of-type(1) { background: #b44835; }
dd:nth-of-type(1) { background: #b44835; }

dt:nth-of-type(2) { background: #ff7d3e; }
dd:nth-of-type(2) { background: #ff7d3e; }

dt:nth-of-type(3) { background: #ffb03b; }
dd:nth-of-type(3) { background: #ffb03b; }

dt:nth-of-type(4) { background: #c2a25c; }
dd:nth-of-type(4) { background: #c2a25c; }

dt:nth-of-type(5) { background: #4c443c; }
dd:nth-of-type(5) { background: #4c443c; }

dt:nth-of-type(6) { background: #656b60; }
dd:nth-of-type(6) { background: #656b60; }

.curCol { -moz-box-shadow: 0 0 10px rgba(0,0,0,0.2); -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.2); z-index: 1; position: relative; }
</style>

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>
<script type='text/javascript' src='http://css-tricks.com/examples/InfoGrid/js/infogrid.js'></script>
2. Thiết lập cấu trúc HTML như bên dưới.
<div id="page-wrap">
<div class="info-col">
<h2>Tiêu đề lớn 1</h2>
<a class="image superman"></a>
<dl>
<dt>Tiêu đề 1</dt>
<dd>Mô tả chi tiết 1</dd>
<dt>Tiêu đề 2</dt>
<dd>Mô tả chi tiết 2</dd>
<dt>Tiêu đề 3</dt>
<dd>Mô tả chi tiết 3</dd>
<dt>Tiêu đề 4</dt>
<dd>Mô tả chi tiết 4</dd>
<dt>Tiêu đề 5</dt>
<dd>Mô tả chi tiết 5</dd>
<dt>Tiêu đề 6</dt>
<dd>Mô tả chi tiết 6</dd>
</dl>

</div>

<div class="info-col">
<h2>Tiêu đề lớn 2</h2>
<a class="image batman"></a>
<dl>
<dt>Tiêu đề 7</dt>
<dd>Mô tả chi tiết 7</dd>
<dt>Tiêu đề 8</dt>
<dd>Mô tả chi tiết 8</dd>
<dt>Tiêu đề 9</dt>
<dd>Mô tả chi tiết 9</dd>
<dt>Tiêu đề 10</dt>
<dd>Mô tả chi tiết 10</dd>
<dt>Tiêu đề 11</dt>
<dd>Mô tả chi tiết 11</dd>
<dt>Tiêu đề 12</dt>
<dd>Mô tả chi tiết 12</dd>
</dl>

</div>

<div class="info-col">

<h2>Tiêu đề lớn 3</h2>

<a class="image aquaman"></a>

<dl>
<dt id="starter">Tiêu đề 13</dt>
<dd>Mô tả chi tiết 13</dd>
<dt>Tiêu đề 14</dt>
<dd>Mô tả chi tiết 14</dd>
<dt>Tiêu đề 15</dt>
<dd>Mô tả chi tiết 15</dd>
<dt>Tiêu đề 16</dt>
<dd>Mô tả chi tiết 16</dd>
<dt>Tiêu đề 17</dt>
<dd>Mô tả chi tiết 17</dd>
<dt>Tiêu đề 18</dt>
<dd>Mô tả chi tiết 18</dd>
</dl>

</div>

<div class="info-col">

<h2>Tiêu đề lớn 4</h2>

<a class="image spiderman"></a>

<dl>
<dt>Tiêu đề 19</dt>
<dd>Mô tả chi tiết 19</dd>
<dt>Tiêu đề 20</dt>
<dd>Mô tả chi tiết 20</dd>
<dt>Tiêu đề 21</dt>
<dd>Mô tả chi tiết 21</dd>
<dt>Tiêu đề 22</dt>
<dd>Mô tả chi tiết 22</dd>
<dt>Tiêu đề 23</dt>
<dd>Mô tả chi tiết 23</dd>
<dt>Tiêu đề 24</dt>
<dd>Mô tả chi tiết 24</dd>
</dl>

</div>
<div class="info-col">
<h2>Tiêu đề lớn 5</h2>

<a class="image ironman"></a>

<dl>
<dt>Tiêu đề 25</dt>
<dd>Mô tả chi tiết 25</dd>
<dt>Tiêu đề 26</dt>
<dd>Mô tả chi tiết 26</dd>
<dt>Tiêu đề 27</dt>
<dd>Mô tả chi tiết 27</dd>
<dt>Tiêu đề 28</dt>
<dd>Mô tả chi tiết 28</dd>
<dt>Tiêu đề 29</dt>
<dd>Mô tả chi tiết 29</dd>
<dt>Tiêu đề 30</dt>
<dd>Tiêu đề 30</dd>
</dl>
</div>
</div>
Điều bạn cần phải làm là đặt tên cho các Tiêu đề lớn, Tiêu đề và Mô tả chi tiết cho các tiêu đề tương ứng.

{4 bình luậnAdd yours ?}

09:04:00, 12 thg 11, 2010

thank bạn đã chia sẻ, hiệu ứng này hay lắm.

Reply
15:39:00, 20 thg 10, 2011

Quá đẹp, thật tuyệt vời, giữ để sử dụng cho các mẫu blog khác, cám ơn Hà đã chiia sẻ

Reply
09:23:00, 25 thg 12, 2014

Các chương trình khuyến mãi vinaphone, nạp tiền điện thoại, nap thẻ zing me, bên cạnh đó còn có các chương trình mobifone khuyến mãi lớn đáng được tổ chức tại trang thecao.net . Để các bạn có thể nạp thẻ game online nhanh chóng nhất phục vụ cho việc chơi game nhận skin !

Key :Bạn có muốn nap tien dien thoai nhanh chóng, hãy đến với trang thecao.net để có thể nap the zing chơi game thỏa thích.Thecao.net luôn cập nhật thông tin vinaphone khuyen mai một cách sớm và chính xác nhất. !

Reply
22:15:00, 2 thg 8, 2016

tử vi 12 cung hoàng đạo ngày mai rồi nhé

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