Cara buat Menu Navigasi Ala Rak Buku - Hallo Sob Jody Blog, artikel kali ini berjudul Cara buat Menu Navigasi Ala Rak Buku, kami telah menuliskan yang kami tahu pada artikel ini, semoga bermanfaat.

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

Silahkan Copy dan Paste Kode Berikut ini

<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.

Anda sedang membaca artikel Cara buat Menu Navigasi Ala Rak Buku dan artikel ini url permalinknya adalah https://caratutorialgratis.blogspot.com/2012/02/cara-buat-menu-navigasi-ala-rak-buku.html Semoga artikel ini bisa bermanfaat.

Tweet