Membuat Daftar Menu dengan Style Rak Buku | Buku Catatan si Ugi

Home › Blogs Tutorial › CSS › Text Effects › Membuat Daftar Menu dengan Style Rak Buku

Dengan menggunakan CSS3, metode ini dapat menghasilkan sebuah daftar menu dengan style Rak Buku.

Bila dilihat di Firefox, Safari dan Chrome Anda dapat melihat efek 3D dengan latar belakang gradien, warna dan bayangan. Sedangkan pada Opera Anda dapat melihat drop bayangan saja dan latar belakang gradien tidak akan terlihat. Pada IE anda tidak akan melihat bayangan maupun latar belakang gradien.

Pada prinsifnya, saat hover diatas Rak buku, Buku terpilih akan melayang diatas Rak digantikan sebuah buku dengan sampul tertutup. Untuk membuka dan menampilkan isi buku, anda dapat hover kembali pada sampul yang tertutup tersebut.


Demo:
Letakan kursor pada buku...






More Detail :

Berikut ini Kode Lengkap Untuk Membuat Daftar Menu dengan Style Rak Buku:


<html>
<head>
<style type="text/css">
/* ================================================================
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/css3-cssplay6.html
Copyright (c) 2005-2009 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
=================================================================== */
ul.topUL {padding:0; margin:0; list-style:none; width:250px; margin:0 auto; position:relative; z-index:100; font-family:verdana, arial, sans-serif;}
ul.topUL > li {float:left; margin-right:1px; position:relative; z-index:10;}
ul.topUL > li a.p1 {display:block; width:43px; border:2px solid #333; border-width:1px 3px; height:248px; color:#fff; top:0; left:0; text-decoration:none; position:relative;
-o-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);

-webkit-transition: 0.25s;
-moz-transition: 0.25s;
-o-transition: 0.25s;
transition: 0.25s;
}
ul.topUL > li > a span {display:block; width:43px; white-space:nowrap; position:absolute; left:0px; top:200px;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
}
ul.topUL > li.b1 > a {background:#562; border-color:#340;
background: -moz-linear-gradient(0, #562, #784 50%, #562 100%);
background: -webkit-gradient(linear, 0 0, 100% 0, from(#562), color-stop(50%, #784), color-stop(100%, #562));
}
ul.topUL > li.b2 > a {background:#366; border-color:#144;
background: -moz-linear-gradient(0, #366, #688 50%, #366 100%);
background: -webkit-gradient(linear, 0 0, 100% 0, from(#366), color-stop(50%, #688), color-stop(100%, #366));
}
ul.topUL > li.b3 > a {background:#246; border-color:#024;
background: -moz-linear-gradient(0, #246, #579 50%, #246 100%);
background: -webkit-gradient(linear, 0 0, 100% 0, from(#246), color-stop(50%, #579), color-stop(100%, #246));
}
ul.topUL > li.b4 > a {background:#741; border-color:#520;
background: -moz-linear-gradient(0, #741, #a74 50%, #741 100%);
background: -webkit-gradient(linear, 0 0, 100% 0, from(#741), color-stop(50%, #a74), color-stop(100%, #741));
}
ul.topUL > li.b5 > a {background:#623; border-color:#401;
background: -moz-linear-gradient(0, #623, #956 50%, #623 100%);
background: -webkit-gradient(linear, 0 0, 100% 0, from(#623), color-stop(50%, #956), color-stop(100%, #623));
}

ul.topUL ul.sub {padding:0; list-style:none; position:absolute; left:-51px; top:230px; width:0; overflow:hidden; height:250px; margin:0 0 20px 0;
-o-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);

-webkit-transition: 0s;
-moz-transition: 0s;
-o-transition: 0s;
transition: 0s;
transition-delay:0s;
-o-transition-delay: 0s;
-moz-transition-delay: 0s;
-ms-transition-delay: 0s;
-webkit-transition-delay: 0s;
}

ul.topUL > li.b1 > ul {background:#784;}
ul.topUL > li.b2 > ul {background:#688;}
ul.topUL > li.b3 > ul {background:#579;}
ul.topUL > li.b4 > ul {background:#a74;}
ul.topUL > li.b5 > ul {background:#956;}

ul ul li.content {width:0; height:190px; position:absolute; left:0; top:10px; background:#eee; padding:40px 0 0 0; text-indent:20px; font-size:11px; color:#444; overflow:hidden;
-o-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);

-webkit-transition: 0s;
-moz-transition: 0s;
-o-transition: 0s;
transition: 0s;
transition-delay: 0s;
-o-transition-delay: 0s;
-moz-transition-delay: 0s;
-ms-transition-delay: 0s;
-webkit-transition-delay: 0s;
}
ul ul li b {display:block;}
ul ul li a {text-decoration:none; color:#444; padding-left:20px; line-height:20px;}
ul ul li a:hover {color:#000; text-decoration:underline;}

ul ul li.cover {width:0; height:220px; position:absolute; padding-top:30px; text-indent:10px; font-size:14px font-weight:bold; color:#fff; left:0; top:0; z-index:100; overflow:hidden; white-space:nowrap;}

ul ul li.cover i {font-weight:normal; font-style:normal; font-size:10px; line-height:40px; padding-left:10px;}
ul ul li.cover em {display:block; font-weight:normal; font-style:normal; margin-top:120px; font-size:10px; line-height:40px;}

ul.topUL > li.b1 li.cover {background:#562;
background: -moz-linear-gradient(0, #562, #784 100%);
background: -webkit-gradient(linear, 0 0, 100% 0, from(#562), color-stop(100%, #784));
}
ul.topUL > li.b2 li.cover {background:#366;
background: -moz-linear-gradient(0, #366, #688 100%);
background: -webkit-gradient(linear, 0 0, 100% 0, from(#366), color-stop(100%, #688));
}
ul.topUL > li.b3 li.cover {background:#246;
background: -moz-linear-gradient(0, #246, #579 100%);
background: -webkit-gradient(linear, 0 0, 100% 0, from(#246), color-stop(100%, #579));
}
ul.topUL > li.b4 li.cover {background:#741;
background: -moz-linear-gradient(0, #741, #a74 100%);
background: -webkit-gradient(linear, 0 0, 100% 0, from(#741), color-stop(100%, #a74));
}
ul.topUL > li.b5 li.cover {background:#623;
background: -moz-linear-gradient(0, #623, #956 100%);
background: -webkit-gradient(linear, 0 0, 100% 0, from(#623), color-stop(100%, #956));
}


ul.topUL > li:hover {direction:ltr; z-index:100;}
ul.topUL > li:hover a.p1 {top:230px;left:-100px;
-o-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.7);
-moz-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.7);
-webkit-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.7);
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.7);

-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
transition-delay: 0s;
-o-transition-delay: 0s;
-moz-transition-delay: 0s;
-ms-transition-delay: 0s;
-webkit-transition-delay: 0s;
}

ul.topUL li:hover ul {width:200px;
-o-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.7);
-moz-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.7);
-webkit-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.7);
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.7);

-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
transition-delay: 0.5s;
-o-transition-delay: .5s;
-moz-transition-delay: 0.5s;
-ms-transition-delay: 0.5s;
-webkit-transition-delay: 0.5s;
}
ul.topUL li:hover ul li.cover {width:200px;
-webkit-transition: 0.25s;
-moz-transition: 0.25s;
-o-transition: 0.25s;
transition: 0.25s;
}

ul.topUL li:hover ul li.content {width:190px;
background: -moz-linear-gradient(0, #ddd, #fff 50%);
background: -webkit-gradient(linear, 0 0, 100% 0, from(#ddd), color-stop(50%, #fff));
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}

ul.topUL li:hover ul:hover {overflow:visible;}

ul.topUL li.b1:hover ul:hover li.cover {border-right:4px solid #451;}
ul.topUL li.b2:hover ul:hover li.cover {border-right:4px solid #255;}
ul.topUL li.b3:hover ul:hover li.cover {border-right:4px solid #135;}
ul.topUL li.b4:hover ul:hover li.cover {border-right:4px solid #630;}
ul.topUL li.b5:hover ul:hover li.cover {border-right:4px solid #512;}

ul.topUL li.b1:hover ul:hover li.cover {border-right:4px solid #451;}
ul.topUL li.b2:hover ul:hover li.cover {border-right:4px solid #255;}
ul.topUL li.b3:hover ul:hover li.cover {border-right:4px solid #135;}
ul.topUL li.b4:hover ul:hover li.cover {border-right:4px solid #630;}
ul.topUL li.b5:hover ul:hover li.cover {border-right:4px solid #512;}

ul.topUL li:hover ul:hover li.cover {left:-2px; width:1px; height:235px; top:-15px; padding-top:45px;
-o-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);

-webkit-transition: 0.25s;
-moz-transition: 0.25s;
-o-transition: 0.25s;
transition: 0.25s;
}

.shelf {clear:left; width:350px; height:25px; background:#620; margin:0 auto;
background: -moz-linear-gradient(90deg, #620, #950 20%, #620 30%);
background: -webkit-gradient(linear, 0 100%, 0 0 , from(#620), color-stop(20%, #950), color-stop(30%, #620));
-o-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.7);
-moz-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.7);
-webkit-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.7);
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.7);
}
</style>

</head>
<body>

<div id="info">

<ul class="topUL">

<li class="b1"><a class="p1" href="#url"><span>Product Guide</span></a>
<ul class="sub">
<li class="cover">Product Guide<br /><i>by Buku Catatan si Ugi</i><em>Hover to open ...</em></li>
<li class="content">
<b>Contents</b>
<a href="#url">1. Lorem ipsum dolor</a>
<a href="#url">2. Duis velit leo</a>
<a href="#url">3. Aliquam quis magna</a>
<a href="#url">4. Sed et orci</a>
<a href="#url">5. In risus libero</a>
<a href="#url">6. Nunc sed</a>
</li>
</ul>
</li>

<li class="b2"><a class="p1" href="#url"><span>A Concise History</span></a>
<ul class="sub">
<li class="cover">A Concise History<br /><i>by Buku Catatan si Ugi</i><em>Hover to open ...</em></li>
<li class="content">
<b>Contents</b>
<a href="#url">1. Pellentesque</a>
<a href="#url">2. Praesent ullamcorper</a>
<a href="#url">3. Nullam bibendum</a>
<a href="#url">4. Quisque eget</a>
</li>
</ul>
</li>

<li class="b3"><a class="p1" href="#url"><span>Design for Beginners</span></a>
<ul class="sub">
<li class="cover">Design for Beginners<br /><i>by Buku Catatan si Ugi</i><em>Hover to open ...</em></li>
<li class="content">
<b>Contents</b>
<a href="#url">1. Praesent ullamcorper</a>
<a href="#url">2. Phasellus tempor</a>
<a href="#url">3. Etiam eleifend nisi</a>
<a href="#url">4. Fusce venenatis</a>
<a href="#url">5. Vivamus vitae tempus</a>
</li>
</ul>
</li>

<li class="b4"><a class="p1" href="#url"><span>Address Book</span></a>
<ul class="sub">
<li class="cover">Address Book<br /><i>by Buku Catatan si Ugi</i><em>Hover to open ...</em></li>
<li class="content">
<b>Contents</b>
<a href="#url">1. In et arcu eget</a>
<a href="#url">2. Quisque nibh odio</a>
<a href="#url">3. Phasellus sagittis</a>
<a href="#url">4. Curabitur varius</a>
<a href="#url">5. Suspendisse diam</a>
<a href="#url">6. Class aptent taciti</a>
</li>
</ul>
</li>

<li class="b5"><a class="p1" href="#url"><span>Travellers Tales</span></a>
<ul class="sub">
<li class="cover">Travellers Tales<br /><i>by Buku Catatan si Ugi</i><em>Hover to open ...</em></li>
<li class="content">
<b>Contents</b>
<a href="#url">1. Nunc velit arcu</a>
<a href="#url">2. Pellentesque suscipit</a>
<a href="#url">3. Nulla porta lacinia</a>
<a href="#url">4. Aliquam aliquet</a>
<a href="#url">5. Curabitur tristique</a>
</li>
</ul>
</li>
</ul>

<div class="shelf"></div>

</div> <!-- end of info -->

</body>
</html>


Keterangan:
Silahkan lihat cara pemasangan dalam konten spoiler diatas.

sumber: cssplay

2 komentar:

  1. JuraganSedenk12/27/2012 7:33 PM

    agar posisinya di header gmn gan,sy cb posisinya dibawah, bru mau belajar css,mohon penjelasan penempatannya.makasih,suksesselalu

    ReplyDelete
  2. Dahe Ugi12/29/2012 1:03 AM

    @JuraganSedenkmungkin bisa juga dengan menambahkan "Widget" diatas atau bawah header, dengan cara : Tambah Gadget >> Tambah HTML/JavaScript >> masukan source code kedalamnya, kemudian "save", tapi sebelum menyimpannya, terlebih dahulu mungkin anda harus menentukan posisi yang tepat dimana widgat ingin ditempatkan, hal ini untuk memudahkan anda memberikan customisasi pada setiap property. Atau jika anda seorang yang familiar, anda dapat meng-edit template anda di "Edit HTML" Terimakasih telah berkunjung, semoga bermanfaat!

    ReplyDelete



Catatan :

Untuk menyisipkan gambar kedalam komentar, gunakan tag : [img]URL_Gambar[/img]
atau <i rel="image">URL_Gambar</i>
Untuk Video Youtube : [youtube]URL_Video[/youtube]
atau <i rel="youtube">URL_Video</i>
Untuk "Kutipan", gunakan : [blockquote]Kutipan_Anda[/blockquote]
atau <b rel="quote">Kutipan_Anda</b>
Untuk menyisipkan Kode: [code]KODE[/code]
atau <i rel="code">KODE</i>
atau <i rel="pre">KODE</i>
Dan untuk menyisipkan smiles/ emoticon, lihat kode Emoticon







 

Anda sudah mengaktifkan penyaringan konten ( AdBlocker di Aktifkan )

Mohon maaf untuk sementara Anda tidak dapat melihat halaman ini, silahkan kembali lagi setelah Anda menonaktifkan filter yang Anda gunakan. Abaikan