Nurul Imam Studio

Belajar HTML, CSS, JavaScript, PHP & MySQL untuk pemula & tingkat lanjut

Jasa Pembuatan Website Profesional

Membuat Menu Tab Scroll Effect Dengan CSS3

Pada kesempatan kali ini, Blog & Note of Nurul Imam akan membahas tentang Bagaimana Cara Membuat Menu Tab Scroll Effect Dengan CSS3 atau biasa disebut dengan Accordion Tab Effect CSS3. Menu ini berupa daftar link yang mana jika kita klik menu tersebut akan menampilkan konten dibawahnya dengan effect scroll halus ketika dibuka. Untuk lebih jelasnya, silahkan lihat Demo Accordion Tab Effect CSS3 dibawah ini.

Demo Accordion Tab CSS3

Untuk pembuatan menu tersebut, silahkan siapkan editor favorite anda & ketikkan beberapa kode HTML & CSS3 dibawah ini.

<!DOCTYPE html>
<html>
<head>
<title>Demo Accordion Tab Effect CSS3</title>
<style type="text/css">
body {
    background: #eee;
   font-size: 1.3em;
}
.utama {
  width: 50%;
 margin: 50px 25%;
}
.bersih  {
    clear: both;
}
h1, p {
    text-align: justify;
}
a, a:hover, a:link, a:active {
 color: #000;
    display: block;
 text-decoration: none;
}
dl {
 padding: 10px;
}
dl dt {
  border-radius: 7px;
 border: 1px solid #333;
 margin: 2px 0;
  padding: 10px;
}
dl dd {
  overflow: hidden;
   transition: height 1s ease;
 -moz-transition: height 1s ease;
}
dl dd:not(:target) {
   height: 0;
}
dl dd:target {
   height: 10em;
}
dl a.ie:hover dd, dl a.ie:focus dd {
  height: auto;
   color: #fcf !important;
}
</style>
</head>
<body>
<article class="utama">
<h1>Demo : Accordion Tab Effect CSS3</h1>
<dl>
<dt><a href="#satu">Web Design</a></dt>
<dd id="satu">
<p>Ini bukan artikel, Tulisan ini dibuat hanya sebagai contoh dalam beberapa tutorial saja. Karena butuh teks yang banyak dalam menerapkan multi kolom ini. Saya menuliskan teks yang mungkin tidak perlu untuk dibaca. Jika anda tetap membacanya, lebih baik anda membuka dan membaca source kodenya dengan cara CTRL + U / CMD + U. Hayu buka sekarang juga. Selamat mencoba :)</p>
</dd>
<dt><a href="#dua">Web Development</a></dt>
<dd id="dua">
<p>Ini bukan artikel, Tulisan ini dibuat hanya sebagai contoh dalam beberapa tutorial saja. Karena butuh teks yang banyak dalam menerapkan multi kolom ini. Saya menuliskan teks yang mungkin tidak perlu untuk dibaca. Jika anda tetap membacanya, lebih baik anda membuka dan membaca source kodenya dengan cara CTRL + U / CMD + U. Hayu buka sekarang juga. Selamat mencoba :)</p>
</dd>
<dt><a href="#tiga">Desktop Applications</a></dt>
<dd id="tiga">
<p>Ini bukan artikel, Tulisan ini dibuat hanya sebagai contoh dalam beberapa tutorial saja. Karena butuh teks yang banyak dalam menerapkan multi kolom ini. Saya menuliskan teks yang mungkin tidak perlu untuk dibaca. Jika anda tetap membacanya, lebih baik anda membuka dan membaca source kodenya dengan cara CTRL + U / CMD + U. Hayu buka sekarang juga. Selamat mencoba :)</p>
</dd>
<dt><a href="#empat">Graphics Design</a></dt>
<dd id="empat">
<p>Ini bukan artikel, Tulisan ini dibuat hanya sebagai contoh dalam beberapa tutorial saja. Karena butuh teks yang banyak dalam menerapkan multi kolom ini. Saya menuliskan teks yang mungkin tidak perlu untuk dibaca. Jika anda tetap membacanya, lebih baik anda membuka dan membaca source kodenya dengan cara CTRL + U / CMD + U. Hayu buka sekarang juga. Selamat mencoba :)</p>
</dd>
</dl>
<section class="bersih">&nbsp;</section>
<p><a href="http://www.nurulimam.com/2013/12/membuat-menu-tab-scroll-effect-dengan-css3.html">Kembali ke Tutorial</a></p>
</article>
</body>
</html>

Setelah semuanya diketik, silahkan simpan dengan nama tab.html lalu jalankan di web browser anda. Anda juga dapat menambahkan menu ini ke dalam blog anda baik Blogger maupun WordPress dengan menambahkan HTML & CSS secara terpisah.

41 Comments

  1. Index ApkReply

    bisa dikasih contoh langsung untuk kode sidebar blog gk mas??
    ane pengen buat untuk sidebar blog saya, biar nggk terlalu panjang kebawah,,hehe

    • Nurul ImamReply

      Silahkan sesuaikan dengan kode sidebar blognya. Contohnya seperti ini….

      <dl>
      <dt><a href="#satu">Nama Sidebar</a></dt>
      <dd id="satu">
      Masukkan isi sidebar satu disini !
      </dd>
      
      <dt><a href="#dua">Nama Sidebar</a></dt>
      <dd id="dua">
      Masukkan isi sidebar dua disini !
      </dd>
      </dl>
  2. Blogs Of HariyantoReply

    jujur..aku tidak terlalu memahami tentang CSS3..tapi ntar aku coba mempelajarinya dech :-)

    • Nurul ImamReply

      Ditunggu ketertarikannya pak :)

  3. Dwi alfinaReply

    ijin mendalami dulu sob

    • Nurul ImamReply

      Jangan terlalu dalam bro :p

  4. FazriReply

    wah keren. bisa menghemat tempat ya.. nanti saya praktekan dulu

    • Nurul ImamReply

      Sekarang aja prakteknya mas :D

  5. Game BegogReply

    Saya menyimak terus nih. Tapi saya ada kendala CSS3 tidak valid nih di validator :(
    Saya cuma valid html5 saya nih bang

    • Nurul ImamReply

      Saya juga kurang memperhatikan validasi css3, tapi kebanyakan error karena pemakaian

      -moz- -o- -webkit- -ms- -khtml-

      Tapi itukan saya pakai untuk cross browser :D

      • ArchyseilaReply

        CSS3 masih dalam pengembangan juga gan, jadi prefix masih di anggap sebagai parse error..

    • ImanReply

      Good Job

  6. Intan SudibjoReply

    hahayy.. gagah pisan mas, memang mas Ilham jagonya desain :)

    • AgriReply

      bener tu mas.. saya aja mau berguru habis2an sama mas nurul.. hbisnya beliau jago sih.. :D

      • Nurul ImamReply

        Emang sih saya guru, tapi murid SMK saya ga ada yang namanya Agri lho :D

        • AgriReply

          hahaha.. saya emng bukan berasal dari smk dapat ilmu koding aja suatu kebetulan.. :) semua belajar dari internet.. apa salahnya saya menganggap mas nurul itu guru saya.. lagian tutorial blog ini kan bisa saya pelajari biar bisa hebat seperti mas nurul :D

          • Nurul Imam

            Saya juga sama kok belajar dari internet, sering ikutan kursus online di website luar negri. Berarti berguru pada blog saya aja yah, jangan berguru sama saya :p

    • Nurul ImamReply

      Emangnya mas ilham ayam yah pake jago segala :D

  7. AgriReply

    baru kali ini melihat kode dd:not(:target) kira2 mksdnya sprti apa tu ya mas?

    • Nurul ImamReply

      Klo dl dd:target menunjukkan style untuk link yang aktif atau diklik. Diatas value heightnya 10em; maka konten yang ada pada id link yang di klik akan ditampilkan dengan ukuran tinggi 10em.

      Sedangkan dl dd:not(:target) itu menunjukkan style untuk link yang tidak aktif atau diklik maka value heightnya 0. Jadi disembunyikan kontennya.

      Coba pelajari di http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_target

  8. RirinReply

    wah-wah menarik sekali mas menu tab nya. Pengen banget nyoba di blog saya, tapi masih takut kalau salah. Jadi nya masih alami blog nya belum di otak-atik kode nya hehe :D

    • Nurul ImamReply

      Harus berani mencoba, klo error kan tinggal konsultasi sama saya private lewat hp ;)

  9. Tommy MayReply

    scrollnya keren gan
    mantep nih klo dipasang di blog saya

    • Nurul ImamReply

      Silahkan mas :)

  10. palaeskuReply

    mantap, Bro..jadikan saya muridmu..( he..he..)

    • Nurul ImamReply

      Waduhhh, murid SMK saya aja pada ga mau punya guru kayak saya :D

  11. sanjayReply

    itu di pasang kan di mana

    • Nurul ImamReply

      Di bagian kode kode HTML mas diantara tag body, klo CSSnya diantara tag style

  12. sanjayReply

    di Edit HTML y bagia ]]> atau yg lain

    • Nurul ImamReply

      Di Blogspot saya lupa mas, udah lama ga liat kode templatenya :D

  13. audio hajiReply

    keren gan

    • Nurul ImamReply

      Keren juga :D

  14. yohanesReply

    makasih atsa infonya……

    • Nurul ImamReply

      Iya sama-sama

  15. rahayuReply

    kak, klo mw pake di tab drop down list itu gmn sih koding html+css nya?,,, (aku pake sublime)

    • Nurul ImamReply
      <select><option>Test</option></select>
  16. RafiReply

    gan caranya supaya di klik bisa nutup lagi gmna ya ?

    soalnya mau saya buat navigation bar

    • Nurul ImamReply

      Pake accordion tab mas :)

  17. Kedai Ace MaxsReply

    Thanks infonya gan, sangat membantu :)

  18. tinoReply

    KK Tolong Bantuin donk, Saya Mau belajar Buat website Mohon bimbingannya kalo Bisa lewat sosmed atau ke email saya : tinojack478961@gmail.com Terima kasih

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>