Cara buat Menu Navigasi Ala Rak Buku ~ BEE 4 BISNIS

Thursday, January 3, 2013

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

BEE 4 BISNIS | BISNIS ONLINE INDONESIA

Header Background

About

RUMAH RAYA

Blogger news

Categories

Blogroll

Comments

FOLLOW ME

LATEST

Top Links Menu

Report Abuse

Top Links Menu

Menu based on Icons

Archive

Sections

Campus

Courses

Testimonials

Search This Blog

Latest video-course

Campus

About

Testimonials

Main Menu

Logo

Section Background

Section Background

Ads block

Courses

Section Background

ABOUT

Contact us-desc:Feel free to contact us at anytime about our courses and tutorials.

Categories

SEARCH

Popular

Thursday, January 3, 2013

Cara buat Menu Navigasi Ala Rak Buku

Social Profiles

TRANSLATE HERE

Blogger templates

Popular Posts

Blogger templates

Blog Archive