Membuat NAVIGASI Menu Dan Sub Menu Kolom

Disini Abenk Coba Berbagi Cara Membuat NAVIGASI Menu Dan Sub Menu Kolom

Bila Sobat ingin Navigasi ini dipasang di blog sobat ikuti langkah-langkah nya :

1. Buka Template ==> Edit Templete
2. Untuk Lebih Cepat CTR + F dan cari   ]]></b:skin>
3. Simpan Kode Dibawah ini diatas nya

#menufixed {position:fixed;top:0;left:0;width:100%;height:0px;z-index:999;}<br /> <br /> .menu3Dflip {margin:0 auto; text-align:center; position:relative; height:40px; z-index:999; background:rgba(99, 23, 169, 0.5); -moz-perspective: 100px; -webkit-perspective: 100px; -o-perspective: 100px; perspective: 100px; }<br /> .menu3Dflip ul.nav li {display:inline-block; display:inline;}<br /> .menu3Dflip ul.nav {padding:0; margin:0; list-style:none; display:inline-block; -moz-transform-style: preserve-3d; -webkit-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; }<br /> .menu3Dflip ul.nav li {float:left; display:block; padding:0 4px;}<br /> .menu3Dflip ul.nav > li {-moz-transform-style: preserve-3d;-webkit-transform-style: preserve-3d;}<br /> .menu3Dflip ul.nav li a.top-a {display:block; text-decoration:none; margin-top:4px; float:left; height:36px;}<br /> .menu3Dflip ul.nav li a.top-a b {display:block; padding:0 20px; font:bold 14px/30px arial, sans-serif; color:#ffff00;}<br /> .menu3Dflip ul.nav li:hover a.top-a {background:rgba(99, 23, 169, 0.8); border-radius:8px 8px 0 0; -moz-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); -webkit-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); -o-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); }<br /> .menu3Dflip ul.nav div {position:absolute; top:40px; left:4px; background:rgba(99, 23, 169, 0.9); padding:5px 0 10px 0; border-radius:0 0 15px 15px; -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; -moz-transform-origin: 0px 0px; -moz-transform: rotateX(-90deg); -webkit-transform-origin: 0px 0px; -webkit-transform: rotateX(-90deg); -o-transform-origin: 0px 0px; -o-transform: rotateX(-90deg); transform-origin: 0px 0px; transform: rotateX(-90deg); -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; }<br /> .menu3Dflip ul.nav div.left {left:auto; right:4px;} .menu3Dflip ul.nav div ul {padding:10px 0; list-style:none; width:140px; margin:10px 5px 0 5px; float:left; display:inline; text-align:left; background:rgba(255, 255, 255, 0.5); border-radius:6px; -moz-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); -webkit-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); -o-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); }<br /> .menu3Dflip ul.nav div ul.colLeft {margin-left:10px;}<br /> .menu3Dflip ul.nav div ul.colRight {margin-right:10px;}<br /> .menu3Dflip ul.nav div ul.colSingle {margin-left:10px; margin-right:10px;}<br /> .menu3Dflip ul.nav div ul li {float:left; border-bottom:1px dotted #09c; margin:0 5px 0 5px; display:inline;}<br /> .menu3Dflip ul.nav div ul li:last-child {border:0;}<br /> .menu3Dflip ul.nav div ul li a {display:block; width:105px; text-decoration:none; font:13px/16px arial, sans-serif; color:#fff; margin:0; padding:4px 0 4px 15px; background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghmetDmookfBXbG0jJY4XjM_xlnjtbNKa1I6nm4MrzggY-HwAlLr4rKa_8FUKUOM5GVLGCgbn2imOzY8xWgo7LdLYCSvkvM8W5eJaEURUvtHwTxI9YQAiYcNxfxo5jA_9Ycj5CcnzFMRw/h120/arrow.gif) no-repeat left center;}<br /> .menu3Dflip ul.nav div ul li a:hover {color:#ffff00; background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghmetDmookfBXbG0jJY4XjM_xlnjtbNKa1I6nm4MrzggY-HwAlLr4rKa_8FUKUOM5GVLGCgbn2imOzY8xWgo7LdLYCSvkvM8W5eJaEURUvtHwTxI9YQAiYcNxfxo5jA_9Ycj5CcnzFMRw/h120/arrow.gif) no-repeat 1px center;}<br /> .menu3Dflip ul.nav div.col1 {width:160px;}<br /> .menu3Dflip ul.nav div.col2 {width:310px;}<br /> .menu3Dflip ul.nav div.col3 {width:460px;}<br /> .menu3Dflip ul.nav li:hover div { -moz-transform: rotateX(0deg); -webkit-transform: rotateX(0deg); -o-transform: rotateX(0deg); transform: rotateX(0deg); }

4. Kemudian cari </body> dan simpan kode ini diatas nya

<div id='menufixed'> <br /> <div class='menu3Dflip'> <br /> <ul class='nav'> <li><a class='top-a' href='http://abenksofware.blogspot.com'><b>HOME</b></a></li> <li><a class='top-a' href='http://abenksofware.blogspot.com'><b>Menu 1</b></a><br /> <div class='col1'> <ul class='colSingle'> <li><a href='http://abenksofware.blogspot.com'>Sub Menu 1</a></li> <li><a href='http://abenksofware.blogspot.com'>Sub Menu 2</a></li> <li><a href='http://abenksofware.blogspot.com'>Sub Menu 3</a></li> </ul> </div> </li> <li><a class='top-a' href='http://abenksofware.blogspot.com'><b>Menu 2</b></a><br /> <div class='col2'> <ul class='colSingle'> <li><a href='http://abenksofware.blogspot.com'>Sub Menu 1</a></li> <li><a href='http://abenksofware.blogspot.com'>Sub Menu 2</a></li> <li><a href='http://abenksofware.blogspot.com'>Sub Menu 3</a></li> </ul> <ul class='col'> <li><a href='http://abenksofware.blogspot.com'>Sub Menu 1</a></li> <li><a href='http://abenksofware.blogspot.com'>Sub Menu 2</a></li> <li><a href='http://abenksofware.blogspot.com'>Sub Menu 3</a></li> </ul> </div> </li> <li><a class='top-a' href='http://abenksofware.blogspot.com'><b>Menu 3</b></a><br /> <div class='col3'> <ul class='colLeft'> <li><a href='http://abenksofware.blogspot.com'>Sub Menu 1</a></li> <li><a href='http://abenksofware.blogspot.com'>Sub Menu 2</a></li> <li><a href='http://abenksofware.blogspot.com'>Sub Menu 3</a></li> </ul> <ul class='col'> <li><a href='http://abenksofware.blogspot.com'>Sub Menu 1</a></li> <li><a href='http://abenksofware.blogspot.com'>Sub Menu 2</a></li> <li><a href='http://abenksofware.blogspot.com'>Sub Menu 3</a></li> </ul> <ul class='colRight'> <li><a href='http://abenksofware.blogspot.com'>Sub Menu 1</a></li> <li><a href='http://abenksofware.blogspot.com'>Sub Menu 2</a></li> <li><a href='http://abenksofware.blogspot.com'>Sub Menu 3</a></li> </ul> </div> </li> <li><a class='top-a' href='http://abenksofware.blogspot.com'><b>Menu 4</b></a></li> </ul> </div> </li> <br /> <br /> <br /> <br />

5. Dan ganti "http://abenksofware.blogspot.com" dengan link Sobat

DEMO

 

sumber : masandes, dan di tambah kode agar bisa menjadi 3 kolom sub menu

---

Share

Like

G+

Tweet

Tweet

---

Artikel Terkait

---

Silahkan Memberikan Komentar Jika Ada Hal Yang Kurang Dipahami Dengan Topik Yang Telah Sobat Baca. Biasakan Berkomentar Dengan:

۞ Sopan dan Bahasa Yang Mudah Dipahami.
۞ Tidak Memasukkan Link Aktif Dalam Form Komentar.
۞ Berkomentar Sesuai Artikel Atau Postingan.
۞ Berilah Informasi, Jika Script Atau Link Yang Tidak Berfungsi Dan Mati.
۞ komentar Jorok / Kasar / SARA / PORNO Anggap Sebagai SPAM.