Cara Mudah Membuat Menu navigasi kaya rak buku

Menu pada sebuah website atau blog pada umumnya sangat berbeda-beda antara satu dan yang lainnya, nah kali ini saya akan memberikan tutorial cara membuat menu navigation mirif rak buku, lihat contoh gambar di bawah ini :

kurang lebih seperi gambar di atas yang akan saya share kali ini, untuk membuat menu tersebut yang harus kalian lakukan adalah :

1. klik dasbor>rancangan>edit html
2. carilah kode </head>
3. stehal berhasil di temukan, lalu copy paste kode berikut tepat di atas kode </head> :
4.  <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>
5. klik save templete

setelah menyelesaikan urusan di atas maka masuk ke tahap selanjutnya..

1. klik rancangan>tambah gadget>HTML/javascript
2. silahkan copy paste kode berikut ini ke dalam HTML/javascript :
3.  
   

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

   klik simpan dan semua prosesnya selesai..
   
    note : gantilah tanda # dengan url yang kamu inginkan, dan ganti juga nama menu sesuai ke inginan.