Cara Membuat Menu Dropdown Sederhana di Blog atau Website Kalian - ShareItCare Blog

Oke guys, kembali lagi di tips and trik desain blog :v

Kali ini saya akan share tentang Navigasi Bar atau Menu pada sebuah blog ataupun web.

Kalo settingan default dari template blog ataupun web bisanya kan cuma datar" aja nih, kayak di blog aku sekarang ini :v

Pasti dari kalian ada yang cari-cari Menu DropDown yang bisa kebawah itu loh, kayak gambar diatas ^-^

Nih saya kasih script nya cuy !!! [Inget, Ini saya hanya share script yang paling sederhana ya, kalian bisa kembangkan lagi menggunakan javascript, jquery, html, css, php, dls.]

Awal banget buat kalian yang mau membuat menu dropdown ini, buatlah dulu code html-nya (Buat para expert html pasti sudah bisa nih :v)

<header class="header"> <div class="menu-shareitcare"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Menu 1</a></li> <li><a href="#">Menu 2</a></li> <li class="dropdown"><a href="#">Menu 3</a> <ul class="isi-dropdown"> <li><a href="#">Sub Menu 1</a></li> <li><a href="#">Sub Menu 2</a></li> <li><a href="#">Sub Menu 3</a></li> <li><a href="#">Sub Menu 4</a></li> </ul> </li> <li><a href="#">Menu 4</a></li> </ul> </div> </header> <br/> <center> <h1> Membuat Menu Dropdown Sederhana Dengan HTML dan CSS<br/>shareitcare.blogspot.com</h1> </center>

Tampilan dari script diatas akan hanya seperti pada gambar dibawah ini..

Lanjut, kita akan masuk ke CSS nih, biar tampilannya jadi smooth dan bisa dropdown ke bawah :v

html,body{ padding: 0; margin:0; font-family: sans-serif; } .menu-shareitcare{ background-color: #3141ff; } .menu-shareitcare ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; } .menu-shareitcare > ul > li { float: left; } .menu-shareitcare li a { display: inline-block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } .menu-shareitcare li a:hover{ background-color: #2525ff; } li.dropdown { display: inline-block; } .dropdown:hover .isi-dropdown { display: block; } .isi-dropdown a:hover { color: #fff !important; } .isi-dropdown { position: absolute; display: none; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; background-color: #f9f9f9; } .isi-dropdown a { color: #3c3c3c !important; } .isi-dropdown a:hover { color: #232323 !important; background: #f3f3f3 !important; }

Nah, setelah script diatas digabungin bakal kayak gini jadinya..

Simpel banget kan guys, kalian bisa mengubah CSS atau HTML diatas sesuai selera (Pasti bagi yang expert sudah bisa, hehe..)

Oh iya, gimana cara masukan script itu ke blog (Bagi yang menggunakan blogspot atau sejenisnya)?

• Masuk ke Blogspot kalian.
• Klik menu Tata Letak → Tambahkan widget.
• Lalu copy kan script HTML yang sudah kalian buat seperti yang saya contohkan diatas.
• Oh iya, untuk tanda # pada script saya diatas, ganti dengan link alamat artikel kalian.
• Kemudian masuk ke menu template → Edit HTML.
• Cari kode ]]></b:skin> dan masukan script CSS yang kalian buat diatas kode tersebut.
• Klik save dan lihat hasilnya.

Untuk membuat menu dropdown disuatu website yang familiar seperti wordpress, dls. Saya rasa sudah sangat dipermudah dengan adanya widget default untuk membuatnya.

Sekilas aja untuk yang mau nambahin nih :v

Bagi yang mau menggunakan jquery atau javascript tinggal kalian buat functionnya saja seperti kode dibawah ini strukturnya..

//Sentuhan Javascript <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script type="text/javascript"> $(function() { $(".nav-button").click(function() { $(this).parent().parent().toggleClass("closed"); }); }); </script> //Sentuhan jQuery $(document).ready(function(){ $(" #nav ul ").css({display: "none"}); $(" #nav li").hover(function(){ $(this).find('ul:first').css({visibility: "visible",display: "none"}).show(400); },function(){ $(this).find('ul:first').css({visibility: "hidden"}); }); });

Nah guys, mungkin sampai sini dulu share saya hari ini.. Semoga bermanfaat juga buat temen-temen ^-^

Oh iya, banyak juga yang tanya ke saya "Kenapa sih kok gak sekalian share coding yang lanjutan bukan dasar seperti memakai Bootstrap, PHP, MySQL, HTML5, CSS3 dan lain sebagainya?"

Bukannya gak mau share ya guys :v bagi kalian yang sudah pada expert-expert soal dasar bahasa web design dan programming coba ikut share ilmu di kolom komentar aja yuk.. biar dedek-dedek yang baru mau melangkah ke dunia programming bisa ngikutin dan belajar dari dasar ^-^

Note: Jika ada penulisan code yang salah dan ada hal yang ingin ditanyakan ataupun mau share ilmu juga bisa dikolom komentar kok .. ☺