Cara buat Menu Navigasi Ala Rak Buku

Setelah beberapa hari lalu kita membahas berbagai cara membuat menu blog yang keren antara lain :
Kini saatnya kita buat lagi Menu Navigasi Ala Rak buku, Berikut cara pasang di blog : Cek View Demo Dulu

Pertama

Klik Dasboard + Rancangan + Edit HTML

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">
 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 SIMPAN

Ketiga

Klik Rancangan + Tambahkan Gadget Pilih HTML/JavaScript

Silahkan Copy dan Paste Kode Berikut ini

 <div id="info">
 <ul class="topUL">
 <li class="b1"><a class="p1" href="#url">Menu 1</a>
 <ul class="sub">
 <li class="cover">Menu 1 by DeeJayHan-Blog Hover to open ...</li>
 <li class="content">
 Contents
 <a href="http://deejayhan.blogspot.com/">1. Home</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">Menu 2</a>
 <ul class="sub">
 <li class="cover">Menu 2 by DeeJayHan-Blog Hover to open ...</li>
 <li class="content">
 Contents
 <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">Menu 3</a>
 <ul class="sub">
 <li class="cover">Menu 3 by DeeJayHan-BlogHover to open ...</li>
 <li class="content">
 Contents
 <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">Menu 4</a>
 <ul class="sub">
 <li class="cover">Menu 4 by DeeJayHan-BlogHover to open ...</li>
 <li class="content">
 Contents
 <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">Menu 5</a>
 <ul class="sub">
 <li class="cover">Menu 4 by DeeJayHan-BlogHover to open ...</li>
 <li class="content">
 Contents
 <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> 

Terakhir Klik SIMPAN

Keterangan:
SilahkanGanti tanda # dengan Alamat Url yang diingin kan, dan silahkan Ganti Nama Menu sesuai selera dan kebutuhan masing masing

Header Ads

Cara buat Menu Navigasi Ala Rak Buku

No comments

Sponsored

Popular

Recent

Comments

Custom Widget

Photography

Categories

Blog Archive

Popular Posts

Pageviews past week