Cara membuat menu tab scroll effect dengan menggunakan css3

Untuk kali ini Saya akan membuat menu tab scroll effect dengan menggunakan css. Dengan menggunakan menu ini bisa membuat tampilan web atau blog Anda menjadi lebih simple (sederhana), sehingga dapat mengurangi space (tempat) dalam menampilkan sesuatu baik itu artikel, gambar dan lain-lain. Karena hanya satu menu saja yang menampilkan sesuatu dalam menu tersebut, sedangkan yang lainnya disembunyikan.

Untuk membuka dan untuk mengetahui apa yang ada pada menu tersebut, Anda tinggal memilih dengan cara mengklik pada menu tersebut. Disini Anda bisa mencobanya dengan mengklik menu yang saya sertakan di bagian bawah postingan ini sebagai contoh hasinya. Nah, berikut ini script css3 yang bisa Anda gunakan untuk membuat menu tab scroll effect:

<style type="text/css">
body {
    background: #4C4C;
    font-size: 1.3em;
}
.utama {
    width: 50%;
    margin: 50px 25%;
}
.clearx  {
    clear: both;
}
h1, p {
    text-align: justify;
}
a, a:hover, a:link, a:active {
    color: #8080;
    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>

Sedangkan script HTML5 nya seperti ini:

<!DOCTYPE html>
<head>
<title>Tab scroll effect by w3codez</title>
</head>
<body>
<article class="utama">
<h3>MENU TAB SCROLL EFFECT BY W3CODEZ</h3>
<dl>
<dt><a href="#satu">WEB PROGRAMMING</a></dt>
<dd id="satu">
<p>Tampilan pertama tentang web programming. Cara membuat menu tab scroll effect dengan menggunakan css3.</p>
</dd>
<dt><a href="#dua">WEB DESAIN</a></dt>
<dd id="dua">
<p>Tampilan kedua tentang web desain. Cara membuat menu tab scroll effect dengan menggunakan css3.</p>
</dd>
<dt><a href="#tiga">DATABASE</a></dt>
<dd id="tiga">
<p>Tampilan ketiga tentang database. Cara membuat menu tab scroll effect dengan menggunakan css3.</p>
</dd>
</dl>
<section class="clearx"> </section>
</article>
<center>
<footer><a href='http://w3codez.blogspot.com/'>w3codez</a></footer></center>
</body>
</html>

Silahkan Anda gabungkan script diatas dengan menempatkan script CSS3 nya di atas yang ada pada script HTML5. Nah, untuk hasilnya nanti akan seperti ini:

MENU TAB SCROLL EFFECT BY W3CODEZ

WEB PROGRAMMING: Tampilan pertama tentang web programming. Cara membuat menu tab scroll effect dengan menggunakan css3.
WEB DESAIN: Tampilan kedua tentang web desain. Cara membuat menu tab scroll effect dengan menggunakan css3.
DATABASE: Tampilan ketiga tentang database. Cara membuat menu tab scroll effect dengan menggunakan css3.

Untuk mencobanya, silahkan Anda 'klik' menu di atas satu persatu.

Sekian, semoga bermanfaat. Mohon maaf bila ada kesalahan.

Pages

w3codez

adchoices