Artikel menarikMenu Navigasi Dropdown Keren Responsive Ringan Tanpa Javascript - Black Exotic - Hallo friend Black Exotic, Pada kesempatan ini, friend akan membaca Artikel yang dengan judul Artikel menarikMenu Navigasi Dropdown Keren Responsive Ringan Tanpa Javascript - Black Exotic, tim kami telah mengemas artikel ini dengan baik untuk anda simak dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel Blogging, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Artikel menarikMenu Navigasi Dropdown Keren Responsive Ringan Tanpa Javascript - Black Exotic
link : Artikel menarikMenu Navigasi Dropdown Keren Responsive Ringan Tanpa Javascript - Black Exotic

Artikel menarikMenu Navigasi Dropdown Keren Responsive Ringan Tanpa Javascript - Black Exotic

Penggunaan javascript memang sering dijumpai dalam pembuatan menu navigasi blog/website agar dapat berjalan sebagaimana mestinya. Namun jika di blog anda sudah terlalu banyak menggunakan javascript, penambahan javascript untuk menu navigasi tentunya akan membuat loading blog menjadi semakin berat sehingga hal ini mesti dipikirkan lagi secara efektif. 

Alternatifnya, ternyata membuat menu navigasi tidak harus selalu menggunakan javascript untuk membuatnya berjalan sesuai fungsinya. Seperti yang akan saya bagikan pada postingan kali ini, hanya menggunakan kombinasi kode html dan CSS murni, anda juga dapat membuat menu navigasi keren dan fungsional untuk memudahkan pengunjung saat menjelajah isi konten dalam blog anda. 

Menu navigasi ini juga responsive alias tetap oke saat diakses via mobile maupun tablet. Dan kerennya lagi, menu navigasi ini juga mendukung fitur dropdown sehingga anda dapat menambahkan sub-sub menu baru sesuai kategori di blog anda. Karena tanpa menyertakan javascript, menu navigasi ini juga ringan sehingga tidak memberatkan loading. Lihat tampilan screenshotnya berikut ini:

view web

view mobile

Bagaimana cara membuatnya?. Cukup mudah, silahkan ikuti langkah-langkah berikut ini

Cara Membuat Menu Navigasi Dropdown Keren Responsive Ringan Tanpa Javascript

Jika sebelumnya sudah terpasang menu navigasi di blog anda, silahkan terlebih dulu hapus kode yang ada, baik kode html, javascript, maupun CSSnya untuk menggantinya dengan menu navigasi ini. Jika sudah, silahkan simak cara pemasangannya di bawah ini. 

1. Buka akun blogger anda. 

2. Pilih thema dan klik edit html. 

3. Untuk pemasangan CSSnya, cari kode  ]]></b:skin> atau </style> dan letakkan kode berikut ini di atasnya. 

#menu {background:#393939;color:#eee;height: 40px;width:100%;max-width:960px;margin:0 auto;} #menu ul,#menu li{margin:0 0;padding:0 0;list-style:none} #menu ul{height:40px;border-bottom:4px solid #080} #menu li{float:left;display:inline;position:relative;font-family:'Oswald',Arial;font-weight:500;font-size:15px;text-shadow: 0 -1px 0 #000;border-right: 1px solid #444;text-transform:uppercase} #menu li:first-child{border-left: none} #menu a{display:block;line-height:40px;padding:0 14px;text-decoration:none;color:#eee;}#menu li:hover > a,#menu li a:hover{background:#0a0} #menu input{display:none;margin:0 0;padding:0 0;width:80px;height:40px;opacity:0;cursor:pointer} #menu label{font:bold 30px font-family:'Oswald',Arial;font-weight:500;display:none;width:35px;height:36px;line-height:36px;text-align:center} #menu label span{font-size:12px;position:absolute;left:40px} #menu ul.menus{height:auto;overflow:hidden;width:180px;background:#393939;position:absolute;z-index:99;display:none;border:0;} #menu ul.menus li{display:block;width:100%;font:12px font-family:'Oswald',Arial;font-weight:500;text-transform:none;} #menu li:hover ul.menus{display:block} #menu a.home {background-color:#0a0;} #menu a.prett{padding:0 27px 0 14px} #menu a.prett::after{content:"";width:0;height:0;border-width:6px 5px;border-style:solid;border-color:#eee transparent transparent transparent;position:absolute;top:15px;right:9px} #menu ul.menus a:hover{background:#E73138;}

@media screen and (max-width: 768px){ #menu{background:#000;position:relative} #menu ul{background:#111;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;text-align:left;display:none} #menu ul.menus{width:100%;position:static;padding-left:20px} #menu li{display:block;float:none;width:auto} #menu input,#menu label{position:absolute;top:0;left:0;display:block} #menu input{z-index:4} #menu input:checked + label{color:white} #menu input:checked ~ ul{display:block}}

4. Selanjutnya yaitu tinggal memasang html menu navigasinya. Silahkan cari kode </header> dan letakkan kode berikut ini di bawahnya. 

<nav id='menu'> <input type='checkbox'/> <label><svg style='width:30px;height:30px' viewbox='0 -3 24 24'> <path d='M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z' fill='currentColor'/></svg><span style='margin-top:1px;font-size:17px'>Navigasi</span></label> <ul> <li><a class='home' href='https://namabloganda.blogspot.com'><span style='margin:3px;'>Home</span></a></li> <li><a href='https://namabloganda.blogspot.com/search/xxxxxxxxxxx' title='Menu1'>Menu1</a></li> <li><a href='https://namabloganda.blogspot.com/search/xxxxxxxxxxx' title='Menu2'>Menu2</a></li> <li><a href='https://namabloganda.blogspot.com/search/xxxxxxxxxxx' title='Menu3'>Menu3</a></li> <li><a href='https://namabloganda.blogspot.com/search/xxxxxxxxxxx' title='Menu4'>Menu4</a></li> <li><a class='prett' href='#'>Dropdown1</a> <ul class='menus'> <li><a href='https://namabloganda.blogspot.com/search/xxxxxxxxxxx' title='Sub Menu1'>Sub Menu1</a></li> <li><a href='https://namabloganda.blogspot.com/search/xxxxxxxxxxx' title='Sub Menu2'>Sub Menu2</a></li> <li><a href='https://namabloganda.blogspot.com/search/xxxxxxxxxxx' title='Sub Menu3'>Sub Menu3</a></li> <li><a href='https://namabloganda.blogspot.com/search/xxxxxxxxxxx' title='Sub Menu4'>Sub Menu4</a></li> </ul> <li><a class='prett' href='#'>Dropdown2</a> <ul class='menus'> <li><a href='https://namabloganda.blogspot.com/search/xxxxxxxxxxx' title='Sub Menu5'>Sub Menu5</a></li> <li><a href='https://namabloganda.blogspot.com/search/xxxxxxxxxxx' title='Sub Menu6'>Sub Menu6</a></li> <li><a href='https://namabloganda.blogspot.com/search/xxxxxxxxxxx' title='Sub Menu7'>Sub Menu7</a></li> <li><a href='https://namabloganda.blogspot.com/search/xxxxxxxxxxx' title='Sub Menu8'>Sub Menu8</a></li> </ul> </li> <li><a href='https://namabloganda.blogspot.com/search/xxxxxxxxxxx' target='_blank' title='Menu5'>Menu5</a></li> </li></ul> </nav>

Keterangan:

• Ganti nama-nama menu dan link-link Url di atas dengan nama menu dan link Url di blog anda. 
• Jumlah menu silahkan anda sesuaikan, bisa anda tambahkan atau kurangi sesuai kebutuhan. 

7. Silahkan simpan kembali template dan anda bisa lihat hasilnya. 

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

Demikianlah Artikel Artikel menarikMenu Navigasi Dropdown Keren Responsive Ringan Tanpa Javascript - Black Exotic

Cukup sampai disini artikel Artikel menarikMenu Navigasi Dropdown Keren Responsive Ringan Tanpa Javascript - Black Exotic kali ini, semoga dapat memberi manfaat untuk friend semua. baiklah, jangan lupa membaca artikel lainnya.

Artikel yang sedang anda baca Artikel menarikMenu Navigasi Dropdown Keren Responsive Ringan Tanpa Javascript - Black Exotic dengan alamat link https://blackexotic.blogspot.com/2020/08/artikel-menarikmenu-navigasi-dropdown.html

Share this post