Cara Membuat Menu Navigasi Dropdown Sederhana | Tutorial Lengkap

Cara Membuat Menu Navigasi Dropdown Sederhana

Menu Navigasi Dropdown merupakan sebuah menu navigasi yang di dalamnya terdapat kumpulan submenu lainnya. Untuk membuat menu navigasi dropdown caranya sangat sulit karena harus memahami bahasa pemrograman HTML dan juga CSS, dan bila perlu juga menambahkan kode javascript untuk membuat menu tersebut lebih nyaman bagi pengunjung blog.

Zona Internetku September 06, 2018

Tapi kalian nir perlu susah susah lagi buat membuat atau menyewa programmer buat hidangan dropdown ini, karena saya sudah menyiapkan scriptnya buat membentuk sajian dropdown memakai beberapa pilihan

Cara Membuat Menu Navigasi Dropdown Di Blogspot

Cara Membuat Menu Navigasi Dropdown Keren

Style 1 : Cara Membuat Menu Bar Dropdown Sederhana Dari HTML Dan CSS

Untuk opsi pertama saya menyiapkan script menu dropdown dari html dan css, meskipun tampilannya sangat simpel tapi tidak akan memberikan efek loading yang lama pada blog kalian karena script tersebut hanya menggunakan event hover pada css

1. Masuk ke dalam blog kalian >> Pilih menu "Tema" >> Klik "Edit HTML"

2. Selanjutnya kalian cari kode tag </head> (gunakan Ctrl+F supaya cepat), kemudian letakkan kode berikut ini di atasnya

			<style> #menunavku{margin:0;padding:0;background-color:black;width:100%;height:40px;overflow:hidden;text-transform:uppercase;font-family:calibri} #menunavku #menuku{list-style-type:none;margin:0;padding:0;width:100%;height:40px} #menuku li{display:inline-block;float:left;margin-left:1px} #menuku li a{display:block;height:30px;text-align:center;line-height:30px;color:#fff;background:#2f3036;text-decoration:none;padding:5px 10px} #menuku ul li ul li a{min-width:140px} #menuku .hiddenku{display:none} #menuku li .hiddenku li a{min-width:170px;background-color:#5d5e63} .hiddenku{width:170px;margin:0;padding:0;position:absolute;z-index:999} .hiddenku li a{display:inline-block} /*menuku hover*/ #menuku li a:hover{background-color:red} #menuku li .hiddenku li a:hover{background-color:red} /*memunculkan menu*/ #menuku li:hover .hiddenku{display:block;min-width:140px;float:none} \*menu checkbox*\ #show-menuku{width:100%;height:20px;cursor:pointer} input[type=checkbox]{display:none;-webkit-appearance:none} input[type=checkbox]:checked ~ #menuku{display:block} .show-menuku{text-decoration:none;color:#fff;background-color:#1946c5;text-align:center;padding:10px 0;display:none} /*Responsive Styles*/ @media screen and (max-width:800px){#menunavku{width:100%;height:auto}#menuku{width:100%;display:none}#menunavku #menuku{position:relative;height:0}#menuku li{display:inline-block;margin:0;width:100%}#menuku li a{display:inline-block;margin-left:1px;width:100%;padding:5 0;margin:0}#menuku .hiddenku{position:relative;width:100%;padding:0}.show-menuku{display:block;cursor:pointer}} </style>
Jika sudah, klik "Simpan Tema"

3. Setekah itu kalian masuk ke menu "Tata Letak" dan klik "Tambahkan Gadget"

kemudian pilih gadget "HTML/Javascript" dan letakkan kode berikut ini di dalamnya

			 <nav id='menunavku'>  <label for="show-menuku" class="show-menuku">Show Menu</label>  <input type="checkbox" id="show-menuku" role="button"/>  <ul id="menuku">   <li><a href="#">Home</a></li>   <li>    <a href="javascript:void(0)">Pages &#65516;</a>    <ul class="hiddenku">     <li><a href="#">About</a></li>     <li><a href="#">Contact</a></li> <li><a href="#">Disclaimer</a></li>     <li><a href="#">Privacy Police</a></li>    </ul>   </li>     <li>    <a href="javascript:void(0)">Belajar Microscoft Office &#65516;</a>    <ul class="hiddenku">     <li><a href="#">Microsoft Word</a></li>     <li><a href="#">Microsoft Excel</a></li>     <li><a href="#">Microsoft Power Point</a></li>    </ul>   </li>  </ul> </nav>
Kemudian kalian simpan widget tersebut

Baca Juga :

Cara Membuat Template Blog Dari Awal

Cara Membuat Menu Navigasi Di Blog

Trik Memodifikasi Widget Arsip Supaya Keren

Style 2 : Cara Membuat Menu Bar Dropdown Keren Dan Mobile Friendly Dari HTML, CSS Dan JS

Untuk menu dropdown yang satu ini bisa di bilang menu dropdown yang sangat keren dan juga responsive di segala perangkat, bahkan menu navigasi menggunakan event click pada menu saat di gunakan di perangkat mobile (Seluler).

Menu Navigasi Dropdown ini juga di lengkapi dengan kolom pencarian, jadi kalian tidak perlu repot repot menambahkan widget pencarian yang menambah beban loading blog.

Berikut ini cara memasangnya

1. Masuk ke dalam blog kalian >> Pilih menu "Tema" >> Klik "Edit HTML"

2. Selanjutnya kalian cari kode tag </head> (gunakan Ctrl+F supaya cepat), selanjutnya letakkan kode berikut ini di atasnya

			<style> .menunav{display:none} #navigate .menu{font-family:kartika;width:100%;overflow:hidden;margin:0;padding:0;background:#19B5FE} .menu{list-style:none;margin:0;padding:0} .menu li{float:left;padding:0;margin:0;list-style:none} .menu li a{padding:8px 10px;margin:0;background:#22A7F0;overflow:hidden;display:block;text-decoration:none;font-size:18px;line-height:1.3;color:#fff} #navigate .menu li a:hover{color:#fff;background:#1F3A93;box-shadow:0 4px 0 #fff inset} #navigate .menu li:after a:hover{border-top:5px solid red} .menu li.trigger a.sub:after{content:'+';float:right;font-size:17px;font-weight:bold} #navigate .menu li:hover a:before{border-top:10px;border:10px solid red} .menu li .submenu{visibility:hidden;margin:0;padding:0;max-width:150px;position:absolute;z-index:9999} .menu li .submenu li{float:left;list-style:none;margin:0;padding:0} .menu li.trigger:hover .submenu{visibility:visible} .menu li.trigger .submenu li{float:none} .menu li.trigger .submenu li a{min-width:170px;display:block} .menu li.trigger .submenu li.trigger .submenu{visibility:hidden} .menu li.trigger .submenu li.trigger:hover .submenu{visibility:visible;margin-left:190px;margin-top:-42px;position:absolute} .search-box{float:right;width:300px;padding:0;margin:auto 0} .search-box input{width:calc(100% - 85px);padding:9px 5px;margin:2px 0;border:0} .search-box .search-icon[type="submit"]{width:60px;margin:4px 0;padding:9px 0;border:0;color:black;background:white;font-weight:bold;font-family:FontAwesome;background:#3A539B;color:#ffffff;transition:all 0.25s;-moz-transition:all 0.25s;-webkit-transition:all 0.25s} #myHeader{margin:0 auto;width:100%;max-width:1000px} .header{} .sticky{position:fixed;top:0;left:0;right:0} .sticky + body{padding-top:102px} @media (max-width:768px){#navigate .menu{overflow-y:auto;overflow-x:hidden;height:100%;-webkit-transition:left 2.25s ease;-webkit-transition:display 0.5s ease;-moz-transition:display 0.5s ease;-o-transition:display 0.5s ease;transition:display 0.5s ease} .menunav{display:block;padding:15px 10px;margin:0;background:#359bed;overflow:hidden;text-decoration:none;font-size:18px;color:#fff;cursor:pointer} .menunav span{font-family:kartika} .close{background:#3A539B;z-index:999;padding:10px 15px;max-width:35px;text-align:center;position:absolute;top:0;right:0;margin-right:-45px;font-family:kartika;font-weight:bold} .overlay{z-index:998;background:rgba(0,0,0,0.5);position:fixed;top:0;bottom:0;left:0;right:0} .navigate{display:none} nav.active{position:fixed;display:block;top:0;left:0;height:100%;z-index:9999;width:80%;-webkit-transition:display 0.5s ease;-moz-transition:display 0.5s ease;-o-transition:display 0.5s ease;transition:display 0.5s ease} .menu li{width:100%} .menu li .submenu{display:block;position:relative;width:100%;max-width:100%} .menu li .sub .active{max-height:100%} #navigate .menu li a.active{background:#4B77BE} #navigate .menu li a.active:after{content:'-';float:right;font-size:17px;font-weight:bold} .menu li.trigger a.sub{background:#1E8BC3} .menu li.trigger .submenu{visibility:visible;display:none} .menu li.trigger .submenu li.trigger:hover .submenu{margin:0;visibility:visible;position:relative} .menu li.trigger .submenu li.trigger .submenu{visibility:visible;display:none} .menu li.trigger > ul.active{display:block} .menu li.trigger > ul.active > li.trigger > ul.active{display:block} .search-box{width:100%} .search-box input{width:calc(100% - 85px);margin:2px 4px} </style> <script>//Script by M. Chusnul Chakim eval(function(p,a,c,k,e,d){e=function(c){return c};if(!''.replace(/^/,String)){while(c--){d[c]=k[c]||c}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('$(8).9(2(){$(".10").4(2(){$("#7").0("1");$("5").0("6")});$("11.18 > 17.12").4(2(3){3.16();$(15).0("1").13("14").0("1")})});',10,19,'toggleClass|active|function|e|click|body|overlay|navigate|document|ready|menunav|li|sub|next|ul|this|preventDefault|a|trigger'.split('|'),0,{})) </script>
Klik "Simpan Tema" jika sudah selesai

3. Selanjutnya kalian masuk ke menu "Tata Letak" dan klik "Tambahkan Gadget"

kemudian pilih gadget "HTML/Javascript" dan letakkan kode berikut ini di dalamnya

			<div id="menunav" class='menunav'><i class='fa fa-list'></i><span> Menu</span></div> <nav id='navigate' class='navigate'> <div class='menunav close'>X</div> <ul class='menu'> <li><a href='#url'>Home</a></li> <li><a href='#url'>Menu</a></li> <li class='trigger'><a href='#url' class='sub'>SubMenu 1</a> <ul class='submenu'> <li class='trigger'><a href='#url' class='sub'>SubMenu</a> <ul class='submenu'> <li><a href='#url'>Menu</a></li> <li><a href='#url'>Menu</a></li> <li><a href='#url'>Menu</a></li> </ul> </li> <li><a href='#url'>Menu</a></li> <li><a href='#url'>Menu</a></li> <li class='trigger'><a href='#url' class='sub'>SubMenu</a> <ul class='submenu'> <li><a href='#url'>Menu</a></li> <li><a href='#url'>Menu</a></li> <li><a href='#url'>Menu</a></li> </ul> </li> </ul> </li> <li class='trigger'><a href='#url' class='sub'>SubMenu 2</a> <ul class='submenu'> <li><a href='#url'>Menu</a></li> <li><a href='#url'>Menu</a></li> <li><a href='#url'>Menu</a></li> </ul> </li> <form action='/search/' class='search-box' expr:action='data:blog.searchUrl' id='search-box'>   <input autocomplete='on' expr:value='data:view.isSearch ? data:view.search.query.escaped : &quot;&quot;' name='q' placeholder='Type here' size='10' type='text'/>    <input class='search-icon' title='search' type='submit' value=''/> </form> </ul> </nav>
Setelah itu simpan perubahan widget tersebut

Sekian tutorial mengenai Cara Membuat Menu Navigasi Dropdown Sederhana di Blogspot, semoga ini bisa membantu

Komentar

Posting Komentar

Postingan populer dari blog ini

4 Aplikasi Pelindung Mata Untuk Mengurangi Dampak Dari Radiasi Layar HP | Tutorial Lengkap

Gambar
4 Aplikasi Pelindung Mata Untuk Mengurangi Dampak Dari Radiasi Layar HP Aplikasi Pelindung Mata Untuk Mengurangi Dampak Dari Radiasi Layar HP Dan Tablet . Smartphone atau yang lebih akrab disebut dengan gadget telah menjadi bagian kebutuhan pokok sehari hari, mulai dari untuk berkomunikasi, berbisnis, mencari informasi ataupun hanya untuk sekedar mencari hiburan seperti bermain game. Zona Internetku November 11, 2019 Tetapi tahukah kalian bahwa sinar biru (blue light) yang dipancarkan sang layar HP jua mengakibatkan radiasi dalam organ mata sebagai akibatnya mampu berdampak buruk bagi si pengguna gadget tersebut, terutama bagi orang yang melakukan semua aktifitasnya melalui HP, terlebih lagi jika mereka sanggup memakai HP lebih dari 8 jam setiap harinya yg padahal itu jelek bagi kesehatannya. Tapi kita juga masih sanggup buat mengurangi pengaruh atau resiko yg disebabkan sinar biru smartphone dengan memakai fitur fitur yg sudah disediakan sang pihak pengembang beberapa pelaksan...
Baca selengkapnya

Cara Mengubah Suasana Siang Menjadi Malam Di Photoshop | Tutorial Lengkap

Gambar
Cara Mengubah Suasana Siang Menjadi Malam Di Photoshop Cara Mengubah Suasana Siang Menjadi Malam Di Photoshop Zona Internetku September 11, 2016 Cara Mengubah Suasana Siang Menjadi Malam . Halo.. sob, selamat datang di zona internetku, pada tutorial kali ini saya akan memposting tutorial tentang cara mengubah suasana siang menjadi malam, efek kali ini memberikan kesan yang agak suram atau sepi karena biasanya susana di malam hari memang sangat menakutkan, tapi berbeda bagi para editor yang menggunakan efek ini untuk menciptakan suasana tertentu, yang tentu saja menggunakan aplikasi photoshop yang penuh dengan fitur fitur yang sangat keren, dan saya kali ini menggunakan aplikasi photoshop cs6 kalian juga bisa menggunakan aplikasi photoshop yang lain seperti photoshop cc yang selalu update dengan fitur fiturnya yang lebih keren dari generasi yang lainnya. tetapi itu semua tergantung dari bagaimana cara menggunakan aplikasi tersebut dengan keahlian kalian masing masing. Ok langsun...
Baca selengkapnya

5 Daftar Situs Yang Bisa Digunakan Untuk Belajar Memulai Bisnis | Tutorial Lengkap

Gambar
Lima Daftar Situs Yang Bisa Digunakan Untuk Belajar Memulai Bisnis Daftar Situs Yang Bisa Digunakan Untuk Belajar Memulai Bisnis. Untuk memulai sebuah bisnis atau berwirausaha yang sukses maka kita memerlukan pengetahuan dan pengalaman yang cukup untuk mengelola usaha tersebut, selain itu juga jika bisnis tersebut sudah berkembang besar maka diperlukan mentor yang profesional sehingga kita akan terbantu saat menangani masalah pada bisnis kita dan juga orang yang dapat dipercaya. Zona Internetku September 02, 2019 Berbicara soal usaha, aku akan membahasnya dari yang mendasar yaitu pengetahuan atau ilmu buat menemukan ide, memulai Untuk mempejalari semua itu kita bisa memperolehnya dengan belajar mengikuti sebuah kursus, pelatihan maupun seminar. Namun kita juga bisa mendapatkan semua ilmu tersebut melalui situs-situs di internet yang telah dibagikan secara gratis, untuk mengetahuinya silahkan simak daftarnya disini. Website Terbaik Untuk Belajar Dalam Memulai Bisnis 1. Trend...
Baca selengkapnya