Fitur tabs baik vertical maupun horizontal sangat berguna khususnya bagi anda yang mempunyai konten yang sangat padat. Dengan adanya tabs dalam suatu konten akan membantu merapikannya. Dalam artian, anda hanya menampilkan konten tertentu pada satu tab sebagai tampilan utama, sedangkan yang lainnya disembunyikan untuk meminimalisir space/ruang konten yang bisa berpengaruh pada tampilan layout yang bersih dan rapi.
Bagaimana cara membuat Responsive Tabs hanya menggunakan CSS?
Kali ini saya akan membantu untuk membuat tabs hanya menggunakan CSS dan tidak memerlukan bantuan Jquery untuk menerapkannya. Tabs tersebut menggunakan <input> + <label> dengan bantuan styling CSS yang tidak akan memberatkan server tentunya.
Struktur HTML dan Style di bawah adalah salah satu contoh dari 8 Tabs yang murni hanya menggunakan CSS tanpa bantuan jQuery, yakni;
- 4 Horizontal Tabs
- 4 Vertical Tabs
Struktur HTML
Pertama kita harus membuat struktur HTMLnya untuk menentukan kerangka Tabsnya.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<main class="af-tab-standard"> <input id="tab1" name="tabs" type="radio" /> <label for="tab1">Jakarta</label> <input id="tab2" checked="checked" name="tabs" type="radio" /> <label for="tab2">Semarang</label> <input id="tab3" name="tabs" type="radio" /> <label for="tab3">Pekalongan</label> <input id="tab4" name="tabs" type="radio" /> <label for="tab4">Cirebon</label> <div id="content1"> <h3>Daerah Khusus Ibu Kota</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, quos, voluptate, sunt, in suscipit quibusdam quis dignissimos eligendi repellendus ipsam exercitationem adipisci nostrum fugit accusamus quae cum nisi accusantium eaque.</p> </div> <div id="content2"> <h3>Semarang Kaline Banjir</h3> <p>Consectetur adipisicing elit. Consequatur, dolore, impedit eveniet necessitatibus voluptate distinctio quam repellendus voluptates voluptatum inventore rem sapiente minus esse saepe iste harum architecto numquam quis vero dignissimos beatae est id libero adipisci enim odio natus commodi explicabo modi similique nesciunt deserunt vel consectetur velit omnis quaerat corrupti.</p> </div> <div id="content3"> <h3>Pekalongan ono megono</h3> <p>Perspiciatis, culpa, reprehenderit laboriosam obcaecati deleniti soluta tempora ipsum ipsam iure temporibus dolore modi quidem cum doloribus ex vel suscipit sapiente ut esse optio voluptates molestias natus nostrum illo.</p> </div> <div id="content4"> <h3>Welcome to Cirebon!</h3> <p>Ratione, minus, commodi, magni laborum doloribus libero ullam quos tenetur quis molestias ipsam consequuntur harum asperiores culpa nostrum omnis.</p> </div> </main> |
Pada judul masing-masing Tabs di atas, saya menggunakan nama kota, perlu diingat bahwa judul harus berada dalam <label>. Perlu diingat bahwa masing-masing value id pada <input> harus unik dan harus sama dengan value for pada <label> di bawahnya.
Adapun pada bagian konten, tidak lupa juga bahwa masing-masing id juga harus unik.
Styling CSS
Ok sekarang kita langsung permak struktur yang telah kita buat dengan CSS untuk mendesain bagian-bagian Tabs di atas.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 |
/* -------------------------------- * Style umum untuk Horizontal Tabs * jangan lupa masukkan style di bawah ini juga * ------------------ * General style for Horizontal Tabs * Do not forget to include this below style -------------------------------- */ main input, main>div:not(.af-content) { clear: both; padding-top: 10px; display: none; } main>label:hover { cursor: pointer; } #tab1:checked ~ #content1, #tab2:checked ~ #content2, #tab3:checked ~ #content3, #tab4:checked ~ #content4 { display: block; } /* -------------------------------- * Tabs Horizontal 1. Standard -------------------------------- */ @media (min-width:600px) { .af-tab-standard { padding: 3em } .af-tab-standard input:checked + label { border-right-color: #DDD; border-left-color: #DDD; border-bottom-color: transparent!important; } .af-tab-standard label { float: left; width: 25%; } } .af-tab-standard { background: #FFF; max-width: 600px; margin: 3em auto; padding: 1.5em; box-shadow: 0 3px 5px rgba(0,0,0,0.2); } .af-tab-standard label { font-weight: bold; font-size: 14px; text-align: center; display: block; padding: 12px 30px; border-top: 2px solid transparent; border-right: 1px solid transparent; border-left: 1px solid transparent; border-bottom: 1px solid #DDD; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } .af-tab-standard input:checked + label:hover { color: inherit!important } .af-tab-standard input + label:hover { color: #E91E63; } .af-tab-standard input:checked + label { border-top-color: #E91E63; border-bottom-color: #DDD; text-decoration: none; } |
Pada file download yang akan anda terima, setiap file HTML dari masing-masing desain saya bedakan, harap untuk menyimak secara menyeluruh. Anda tinggal mengaplikasikannya salah satu file HTMLnya untuk melihat hasilnya.
Pada file style.css, style masing-masing desain saya masukkan jadi satu dalam style.css, namun setiap style desainnya saya bedakan agar memudahkan anda untuk menemukan style masing-masing desain.