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

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.