Cara Membuat Menu Navigasi Dropdown Responsive Tanpa Javascript

Santos el Salam

10 September 2019

Sebelumnya telah saya bahas mengenai cara membuat menu navigasi horizontal versi mobile dengan efek scroll, pada kesempatan kali ini, saya akan berbagi cara membuat menu navigasi Dropdown Responsive tanpa Javascript. Biasanya untuk membuat navigasi yang responsive ada dua cara, yakni menggunakan javascript dan css media query. Namun cara seperti ini kadang error karena kode tidak berfungsi atau bentrok dengan kode script lainnya. Oleh karenanya cara yang akan saya bagi kali ini tidak menggunakan javascript, sehingga anti error dan juga fast loading. Meski tanpa javascript, tampilan menu navigasi ini seperti menu-menu navigasi pada umumnya, tetap responsive baik untuk tampilan web maupun tampilan mobile. Dan jangan lupa bisa dropdown tentunya. Untuk tampilannya anda bisa lihat contoh berikut ini:

Bagaimana cara membuatnya?. Caranya cukup mudah. Anda hanya cukup memasukkan beberapa kode css dan kode untuk menu navigasi ke dalam menu edit html anda. Untuk lebih jelasnya anda bisa ikuti langkah-langkah berikut ini. 

1. Buka akun blogger anda. 

2. Pilih thema dan klik edit html. 

3. Setelah terbuka, back-up terlebih dulu jika perlu untuk menghindari kesalahan pemasangan kode, setelah itu cari kode  ]]></b:skin> 

4. Letakkan kode berikut ini tepat diatas kode ]]></b:skin> 

Berikut kodenya:

#nav {background: #000000;margin-bottom: 20px;text-transform:uppercase;font-weight:bold}

#nav ul {margin:0;padding:0;}

#nav li {list-style:none;display:-moz-inline-stack;display:inline-block;zoom:1;*display:inline;margin:0;padding:0;}

#nav li a {display:block;text-decoration:none;color:white;padding:1em;}

#nav li a:hover {color:white;background:#808000;}

.show-menu {background: #002200;text-decoration: none;color: #fff;text-align: left;padding: 10px 5px;display: none;}

.show-menu b{font-size:30px;}

.show-menu span{margin-right: 1em;float:right;}

#nav input[type=checkbox]{display: none;}

#nav input[type=checkbox]:checked ~ #menus {display: block;}

#nav ul.sub-menus{height:auto;overflow:hidden;width:180px;background:#fff;position:absolute;z-index:99;display:none;}

#nav ul.sub-menus li{display:block;width:100%;text-transform:none;text-shadow:none}

#nav ul.sub-menus a{color:#fff;background:#000}

#nav ul.sub-menus a:hover{background:#0f0;color:#ff0000}

#nav li:hover ul.sub-menus{display:block}

#nav a.prett{padding:13px}

#nav a.prett::after{content:"";width:0;height:0;border-width:6px 5px;border-style:solid;border-color:#ffff00 transparent transparent transparent;position:absolute;top:18px;right:9px}

@media screen and (max-width:768px){

#nav ul {position: static;display: none;}

#nav li {border-bottom: 1px solid #ffffff;}

#nav ul li, #nav li a {width: 100%;}

#nav li a{display:block;height:auto;line-height:normal;}

#nav li a {text-align:left;}

#nav ul.sub-menus{width:100%;position:static;padding-left:20px}

.show-menu {display:block!important;line-height:30px;}

.show-menu:hover {cursor:pointer;}

label {margin:0!important;}

}

5. Jangan anda simpan dulu, setelahnya cari kode </header>

6. Setelah ketemu letakkan kode berikut ini tepat di bawah kode </header>

Berikut kodenya:

<nav id='nav'>

<label class='show-menu' for='show-menu'><b>☰</b> <span>Menu</span></label>

<input autocomplete='off' id='show-menu' role='button' type='checkbox'/>

<ul id='menus'>

<li><a href='https://santossalam.blogspot.com'>Home</a></li>

    <li><a href='https://santossalam.blogspot.com'>Daftar Isi</a></li>

<li><a class='prett' href='#'>Label 1 <span class='arrow'>▼</span></a>

 <ul class='sub-menus'>

 <li><a href='https://santossalam.blogspot.com'>Seni Budaya</a></li>

 <li><a href='https://santossalam.blogspot.com'>Sejarah</a></li>

 <li><a href='https://santossalam.blogspot.com'>Horizon</a></li>

 <li><a href='https://santossalam.blogspot.com'>Mozaik</a></li>

<li><a href='https://santossalam.blogspot.com'>Kesehatan</a></li>

</ul></li>

<li><a class='prett' href='#'>Label 2 <span class='arrow'>▼</span></a>

 <ul class='sub-menus'>

 <li><a href='https://santossalam.blogspot.com'>Info Sains</a></li>

 <li><a href='https://santossalam.blogspot.com'>Sosial</a></li>

<li><a href='https://santossalam.blogspot.com'>Selingan</a></li>

<li><a href='https://santossalam.blogspot.com'>Tips  Cara</a></li>

</ul></li>

    <li><a href='https://santossalam.blogspot.com'>About</a></li>

    <li><a href='https://santossalam.blogspot.com'>Contact</a></li>

<li><a class='prett' href='#'>Web Tool <span class='arrow'>▼</span></a>

 <ul class='sub-menus'>

 <li><a href='https://santossalam.blogspot.com'>Privacy</a></li>

 <li><a href='https://santossalam.blogspot.com'>Disclaimer</a></li>

</ul></li>

</ul>

</nav>

Keterangan:

Ganti link Url https://santossalam.blogspot.com dan nama-nama Menu di atas dengan link Url dan nama-nama Menu Blog anda. Untuk jumlah menu dan background warna bisa anda rubah sesuai selera. 

7. Jika kode di atas sudah dimasukkan, silahkan klik simpan dan lihat hasilnya. 

Baca juga: Cara Mudah Membuat Menu Navigasi Responsive Lewat Tambahkan Gadget

Demikianlah Cara Membuat Menu Navigasi Dropdown Responsive Tanpa Javascript. Semoga bermanfaat.

Labels: Blogging

Thanks for reading Cara Membuat Menu Navigasi Dropdown Responsive Tanpa Javascript. Please share...!

Facebook

Twitter