Membuat Menu Daftar Isi Blog Efek Transisi

 Membuat Menu Daftar Isi Blog Efek Transisi - Jika membahas tentang bagaimana cara membuat Daftar Isi Blog mungkin sudah banyak yang mengetahui cara membuatnya, karena setiap blog sudah pasti memiliki menu daftar isi yang Anda sematkan pada menu navigasi, hanya bentuk tampilan yang berbeda dengan menu daftar isi blog efek transisi pada tutorial kali ini. Dengan adanya menu ini, akan membantu mempermudah pengunjung dalam menjelajah keseluruhan isi blog Anda.


Agar tampilannya terlihat keren, saya memisahkan semua label dengan 3 tab menjadi seperti ini:
  • Tab 1 Tombol Daftar Isi
  • Tab 2 Label Title
  • Tab 3 Judul Artikel


Open/Close menu Image


Konsep Url Referensi -
➟ Cara Membuat Site Map Terbaru | Daftar Isi Blog
➟ Membuat Label Blogger Accordion Efek Tabulasi
➟ Memahami Dengan Mudah Bentuk Kinerja CSS Animasi





//bentuk tampilan tab-1
.menu_opener_label {
  background: #f1c40f;
  width: 150px;
  height:40px;
  display: block;
  cursor: pointer;
  position: absolute;
  top: 200px;text-align:center;
  z-index: 10;font:bold 20px/40px Roboto;}

Tab -1 akan tampil sebagai default icon tombol dengan title="daftar isi" dengan perintah KLIK. Sehingga saat Anda ingin menampilkan menu Label (Untuk melihat Tab 2) akan terlebih dahulu dengan melakukan KLIK pada tab-1.


//bentuk tampilan tab-2
.title {
  text-align:center;font:bold 13px/35px Roboto;
  width: 150px;position: absolute;
  height:35px;color:#111;
  display: block;
  top: 202px;left:0px;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  transition: all 0.4s ease;}

Pada tampilan Tab-2 saya beri efek transisi-out, yang jika tab-1 di KLIK maka label title pada tab-2 akan tampil disebelah kanan tab-1 dengan efek animasi-out. Dan akan kembali keawal setelah tab-1 diklik lagi untuk menutup Daftar Isi, sedangkan pada-

Tab -3 adalah menu link untuk menampilkan judul artikel per label. Sedangkan untuk tampilannya saya beri efek animasi fade-in dengan perintah HOVER pada tab-2 seperti ini:

//bentuk tampilan tab-3
.link:hover span {
  margin:0 0 0 19px;
  position:absolute;
  display: inline;
  width:350px;border-left:4px dotted #111;
  background:#ddd;color:#222;
  -webkit-animation:aniload 2s;
  -moz-animation:aniload 2s;
  -ms-animation:aniload 2s;
  -o-animation:aniload 2s;
  animation:aniload 2s;}

Hasilnya...





DEMO SHOW






Sekarang saatnya menggabungkan deklerasi tahapan kode diatas menjadi satu fungsi tampilan untuk Membuat Menu Daftar Isi Blog Efek Transisi dengan penerapan kode lengkapnya seperti ini:



.container {display: block;margin:auto;}
.menu_opener {display: none;}
.menu_opener:checked ~ .link1 {top: 65px;left:200px;}
.menu_opener:checked ~ .link2 {left: 200px;top:105px;}
.menu_opener:checked ~ .link3 {top: 145px;left:200px;}
.menu_opener:checked ~ .link4 {left: 200px;top:185px;}
.menu_opener:checked ~ .link5 {left: 200px;top:225px;}
.menu_opener:checked ~ .link6 {left: 200px;top:265px;}
.menu_opener:checked ~ .link7 {left: 200px;top:305px;}
.menu_opener:checked ~ .link8 {left: 200px;top:345px;}

.link2:hover span {margin:0 0 0 32px;}
.link3:hover span {margin:0 0 0 38px;}
.link4:hover span {margin:0 0 0 27px;}
.link5:hover span {margin:0 0 0 24px;}
.link6:hover span {margin:0 0 0 28px;}
.link7:hover span {margin:0 0 0 27px;}
.link8:hover span {margin:0 0 0 46px;}

.menu_opener_label {
  background: #f1c40f;
  width: 150px;
  height:40px;
  display: block;
  cursor: pointer;
  position: absolute;
  top: 200px;text-align:center;
  z-index: 10;font:bold 20px/40px Roboto;}

.title {
  text-align:center;font:bold 13px/35px Roboto;
  width: 150px;position: absolute;
  height:35px;color:#111;
  display: block;
  top: 202px;left:0px;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  transition: all 0.4s ease;}

.link1, .link2, .link3, .link4,
.link5, .link6, .link7, .link8 {background: #f1c40f;}
.link1 span, .link2 span, .link3 span, .link4 span,
.link5 span, .link6 span, .link7 span, .link8 span {
  display: none;
  text-align:left;
  padding:10px 10px;
  font:bold 11.5px/9px Arial,sans-serif;}

.link1:hover span, .link2:hover span, .link3:hover span, .link4:hover span,
.link5:hover span, .link6:hover span, .link7:hover span, .link8:hover span {
  margin:0 0 0 19px;
  position:absolute;
  display: inline;
  width:350px;border-left:4px dotted #111;
  background:#ddd;color:#222;
  -webkit-animation:aniload 2s;
  -moz-animation:aniload 2s;
  -ms-animation:aniload 2s;
  -o-animation:aniload 2s;
  animation:aniload 2s;}

@import url(http://fonts.googleapis.com/css?family=Roboto);
@-webkit-keyframes aniload {
  from {-webkit-transform:translate(1000px, 0px)}
  to   {-webkit-transform:translate(0px, 0px)}}

@-moz-keyframes aniload {
  from {-moz-transform:translate(1000px, 0px)}
  to   {-moz-transform:translate(0px, 0px)}}

@-ms-keyframes aniload {
  from {-ms-transform:translate(1000px, 0px)}
  to   {-ms-transform:translate(0px, 0px)}}

@-o-keyframes aniload {
  from {-o-transform:translate(1000px, 0px)}
  to   {-o-transform:translate(0px, 0px)}}

@keyframes aniload {
  from {transform:translate(1000px, 0px)}
  to   {transform:translate(0px, 0px)}}

.link1 a, .link2 a, .link3 a, .link4 a,
.link5 a, .link6 a, .link7 a, .link8 a {
   border-bottom:1.8px dotted #999;
   display:block;
   padding-bottom:5px;}


Sebagai contoh, saya hanya menampilkan 8 label. Jika ingin menambahkan beberapa label lagi, cukup tambahkan kode link9, link10,..dan seterusnya pada pengaturan CSS pada kelas masing-masing link. Tahap akhir dengan memanggil semua fungsi CSS diatas dengan penggunaan HTML seperti ini:


<div class="container">
<input class="menu_opener" id="menu_opener_id" type="checkbox" />
<label class="menu_opener_label" for="menu_opener_id">DAFTAR ISI</label>
   <label class="link1 title">DESAIN TEMPLATE
      <span>
        <a href="#">Text Link</a>
        <a href="#">Text Link</a>
        <a href="#">Text Link</a>
      </span>
   </label>
   <label class="link2 title">EFEK GAMBAR
      <span>
        <a href="#">Text Link</a>
        <a href="#">Text Link</a>
        <a href="#">Text Link</a>
      </span>
   </label>
   <label class="link3 title">CSS WIDGET
      <span>
        <a href="#">Text Link</a>
        <a href="#">Text Link</a>
        <a href="#">Text Link</a>
      </span>
   </label>
   <label class="link4 title">MENU NAVIGASI
      <span>
        <a href="#">Text Link</a>
        <a href="#">Text Link</a>
        <a href="#">Text Link</a>
      </span>
   </label>
   <label class="link5 title">EFEK COLECTION
      <span>
        <a href="#">Text Link</a>
        <a href="#">Text Link</a>
        <a href="#">Text Link</a>
      </span>
   </label>
   <label class="link6 title">TUTORIAL BLOG
      <span>
        <a href="#">Text Link</a>
        <a href="#">Text Link</a>
        <a href="#">Text Link</a>
      </span>
   </label>
   <label class="link7 title">INFORMASI SEO
      <span>
        <a href="#">Text Link</a>
        <a href="#">Text Link</a>
        <a href="#">Text Link</a>
      </span>
   </label>
   <label class="link8 title">CSS CODE
      <span>
        <a href="#">Text Link</a>
        <a href="#">Text Link</a>
        <a href="#">Text Link</a>
      </span>
   </label>
</div>

TE

Tags

Tampilkan selengkapnya

Top Post Ad

Below Post Ad