Cara Membuat Menu Tab Vertikal Dengan CSS3

Hai, ketemu lagi dengan saya, pada tutorial kali ini saya akan kasih tau kalian mengenai Cara Membuat Menu Tab Vertikal Dengan CSS3, banyak sekali cara untuk membuat tampilan menu tab, tergantung keinginan. Namun kali ini kita akan membuat menu tab dengan menggunakan CSS3. berikut langkah-langkahnya.

Pertama, kita akan buat 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>

Pada kode p atau paragraf silahkan kalian bisa isikan satu buah paragraf sebagai isian tab nya. Kemudian setelah itu baru kita desai tampilan menu 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 sudah, simpan terlebih dahulu file nya, kemudian coba jalankan dibrowser masing-masing. Silahkan kalian modifikasi lagi menjadi lebih bagus dan menarik untuk dilihat.

Baik, sampai disini tutorial mengenai Cara Membuat Menu Tab Vertikal Dengan CSS3, semoga bermanfaat, amin.

Selamat mencoba 🙂