Cara Membuat Menu Tab Vertikal Dengan CSS3

Haloo, ketemu lagi dengan saya, di panduan kali ini saya akan kasih tau kalian mengenai Cara Membangun Fitur Tab Vertikal Dengan CSS3, banyak sekali cara bagi membangun tampilan fitur tab, tergantung keinginan. Namun kali ini kita akan membangun fitur tab dengan menggunakan CSS3. berikut langkah-langkahnya.

Pertama-tama, kita akan bikin struktur nya dulu dengan kode HTML berikut.

<nav>
  <ul>
    <li tabindex=0>
      <b>1. Tab</b>
      <span>rarr;</span>
      <div>
        <h1>1. Tab</h1>
        <p>Something in 1. tab.</p>
      </div>
    </li>
    <li tabindex=0>
      <b>2. Tab</b>
      <span>rarr;</span>
      <div>
        <h1>2. Tab</h1>
        <p>Something in 2. tab.</p>
      </div>
    </li>
    <li tabindex=0>
      <b>3. Tab</b>
      <span>rarr;</span>
      <div>
        <h1>3. Tab</h1>
        <p>Something in 3. tab.</p>
      </div>
    </li>
    <li tabindex=0>
      <b>4. Tab</b>
      <span>rarr;</span>
      <div>
        <h1>4. Tab</h1>
        <p>Something in 4. tab.</p>
      </div>
    </li>
    <li tabindex=0>
      <b>5. Tab</b>
      <span>rarr;</span>
      <div>
        <h1>5. Tab</h1>
        <p>Something in 5. tab.</p>
      </div>
    </li>
  </ul>  
  <div>
    <h1>About this</h1>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
  </div>
</nav>

Di kode p atau paragraf silahkan kalian dapat isikan satu buah paragraf selaku isian tab nya. Kemudian setelah itu baru kita desai tampilan fitur tab nya dengan kode CSS3 berikut.

body {
  background: #FFAA76;
  background: #666;
  margin: 0 auto;
}

nav {
  position: relative;
  overflow: hidden;
  margin: 0 auto;
  margin-top: 25px;
  word-spacing: -5px;
  width: 700px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

nav ul {
  margin: 0 auto;
  padding: 0;
  display: inline-block;
}

nav li {
  background: white;
  word-spacing: 0;
  width: 160px;
  list-style: none;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-right: none;
  border-bottom: none;
  font-family: calibri light;
  letter-spacing: 3px;
  box-shadow: inset -50px 0 175px -50px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}

nav li:hover {
  box-shadow: inset -50px 0 175px -50px rgba(0, 0, 0, 0.1);
}

nav li:active {
  background: rgba(255,170,118, .5);
}

nav li span {
  float: right;
  font-weight: bold;
  display: none;
}

nav li:hover span {
  display: block;
}

nav div {
  position: absolute;
  top: 0;
  right: 0;
  width: 450px;
  height: 100%;
  background: white;
  padding: 25px;
  font-family: calibri;
  word-spacing:3px;
}

nav li div {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  width: 450px;
  height: 100%;
  background: white;
  padding: 25px;
  font-family: calibri;
  letter-spacing: 1px;
  z-index: 10;
}

nav div h1 {
  margin: 0 auto;
  font-family: calibri light;
  font-size: 25px;
}

nav li:focus {
  outline: none;
  background: white;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: none;
}

nav li:focus div {
  display: block;
}

Nah, kalo telah, simpan terlebih dahulu file nya, kemudian coba jalankan dibrowser masing-masing. Silahkan kalian modifikasi lagi menjadi lebih bagus dan menarik bagi dilihat.

Bagus, hingga disini panduan mengenai Cara Membangun Fitur Tab Vertikal Dengan CSS3, semoga bermanfaat, amin.

Selamat mencoba 🙂

Sumber https://kursuswebsite.org