Judul : Cara buat Menu Navigasi Ala Rak Buku
link : Cara buat Menu Navigasi Ala Rak Buku
Cara buat Menu Navigasi Ala Rak Buku
Menemani sobat blogger yang suka mengutak atik blog agar kelihatan Ganteng, kumpulancara kembali hadir dalam acara dan Gelombang Menu me Menu.
Setelah beberapa hari lalu kita membahas berbagai cara membuat menu blog yang keren antara lain :
Cara Buat Menu Rolling Ala Goyang Ayu ting ting
Cara Buat Menu Flip Animasi Ala Mak EROT
Cara buat Menu ala Lavalamp 6 warna
Cara buat dan pasang menu Flash Keren
Cara buat Drop Down menu Blue Dawn
Cara buat Drop Down menu Sunrise Gloss
Cara buat Drop Down menu Massive Blue
Cara Mudah buat Menu Melayang di sisi kiri Blog
Kini saatnya kita buat lagi Menu Navigasi Ala Rak buku, Berikut cara pasang di blog : Cek TKP dulu Gan

Pertama
Klik + +
Ingat Setiap edit HTML selalu Download Template Lengkap untuk jaga kesalahan
Kedua
Cari kode </head>
Setelah ketemu Copy dan Paste kode Css berikut tepat diatas / Sebelumnya
<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>
Silahkan klik
Ketiga
Klik + Pilih

<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 Kumpulancara.com </i><em>Hover to open ...</em></li>
<li class="content">
<b>Contents</b>
<a href="#url">1. Mak erot</a>
<a href="#url">2. Mak Icih</a>
<a href="#url">3. Bang Kumis</a>
<a href="#url">4. Bang Jenggot</a>
<a href="#url">5. Bang Brewok</a>
<a href="#url">6. Si Jambang</a>
</li>
</ul>
</li>
<li class="b2"><a class="p1" href="#url"><span>A Concise History</span></a>
<ul class="sub">
<li class="cover">Menu Sarapan<br /><i>by Kumpulancara.com </i><em>Hover to open ...</em></li>
<li class="content">
<b>Contents</b>
<a href="#url">1. Sarapan Pagi</a>
<a href="#url">2. Sarapan Siang</a>
<a href="#url">3. Sarapan Malam</a>
<a href="#url">4. Mandi Kembang</a>
</li>
</ul>
</li>
<li class="b3"><a class="p1" href="#url"><span>Design for Beginners</span></a>
<ul class="sub">
<li class="cover">Halaman Cinta<br /><i>by Kumpulancara.com</i><em>Hover to open ...</em></li>
<li class="content">
<b>Contents</b>
<a href="#url">1. Cerita Cinta</a>
<a href="#url">2. Cinta Pertama</a>
<a href="#url">3. Cinta Kedua</a>
<a href="#url">4. Cinta Ketiga</a>
<a href="#url">5. Putus Cinta</a>
</li>
</ul>
</li>
<li class="b4"><a class="p1" href="#url"><span>Address Book</span></a>
<ul class="sub">
<li class="cover">Alamat ku<br /><i>by Kumpulancara.com</i><em>Hover to open ...</em></li>
<li class="content">
<b>Contents</b>
<a href="#url">1. Facebook ku</a>
<a href="#url">2. Twitter ku</a>
<a href="#url">3. Google+ ku</a>
<a href="#url">4. Skype ku</a>
<a href="#url">5. Alay sekali</a>
<a href="#url">6. Cape deh</a>
</li>
</ul>
</li>
<li class="b5"><a class="p1" href="#url"><span>Travellers Tales</span></a>
<ul class="sub">
<li class="cover">Musik Koe<br /><i>by Kumpulancara.com</i><em>Hover to open ...</em></li>
<li class="content">
<b>Contents</b>
<a href="#url">1. Dangdut</a>
<a href="#url">2. Pop</a>
<a href="#url">3. Rock</a>
<a href="#url">4. Melayut</a>
<a href="#url">5. Blues</a>
</li>
</ul>
</li>
</ul>
<div class="shelf"></div>
</div> <!-- end of info -->
Terakhir Klik SIMPAN
Keterangan:
SilahkanGanti tanda # dengan Alamat Url yang diingin kan, dan silahkan Ganti Nama Menu sesuai selera dan kebutuhan masing masing
Demikianlah Artikel Cara buat Menu Navigasi Ala Rak Buku
Sekian Cara buat Menu Navigasi Ala Rak Buku, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sekian postingankali ini.