Cara Menyoroti Menu Navigasi Dengan Css

Beberapa bagian dari halaman interaktif di situs web seperti baru menu atau yang lainnya mungkin perlu ada yang di tonjolkan seperti tombol login atau tombol follow blog agar mudah dilihat oleh pengguna dan mendapatkan interaksi atau tindakan yang lebih positif dari pengunjung situs web sesuai dengan yang kita harapkan.

Maka dari itu kita perlu membuat strategi kecil dengan menyoroti elemen interaktif yang penting dengan memberikan warna yang berbeda dengan elemen interaktif lainnya.

Jika kamu pernah melihat situs-situs web raksasa yang memerlukan tindakan lebih dari pengguna, mereka juga melakukan strategi ini, yaitu menyoroti elemen interaktif dengan membuat warna yang berbeda dengan halaman interaktif lainnya, bahkan dari sekian banyak situs web milik google juga melakukan hal serupa.

Lalu bagaimana cara menyoroti elemen interaktif seperti menu navigasi agar mendapatkan lebih banyak interaksi dari pengunjung? Mari kita simak penjelasan berikut ini.

Cara Membuat Warna Berbeda (Sorotan) Pada Menu Navigasi.

Sebagai contoh kode menu navigasi di website anda menggunakan kode html seperti di bawah ini;
[code type="HTML"]<div id='menunaviy'>
<nav id='topmenu'>
<ul>
<li><a href='url'>About</a></li>
<li><a href='url'>Contact</a></li>
<li><a href='url'>Privacy Policy</a></li>
<li><a href='url'>Disclaimer</a></li>
<li><a href='url'>Login</a></li>
</ul>
</nav>
</div>[/code]
Kemudian tambahkan class='currentmenu' pada link menu yang akan disoroti misalnya menu Login, sehingga menjadi seperti yang terlihat di bawah ini;
[code type="HTML"]<li><a class='currentmenu' href='url'>Login</a></li>[/code]
Selanjutnya gunakan css berikut untuk membuat warna yang berbeda pada menunavigasi agar lebih menonjol dari elemen interaktif lainnya.
[code type="Css"]a.currentmenu{background-color:#008066;color:#fafafa;font-weight:bold;width:auto;border-radius:5px}
a.currentmenu:hover{background-color:#656666;}[/code]
Catatan: Kamu dapat menambahkan css "line-height:30px" untuk style tambahan untuk mendapatkan efek sorotan yang lebih memukau, tetapi jika itu digunakan, kamu juga harus menyeting tinggi line atau line-height menunavigasi setara dengan 30px.

Selesai...!

Bagaimana jika kode html menu dibuat dengan kode otomatis seperti script dan widget pagelist di blogger? Untuk versi yang seperti ini sebenarnya lebih mudah, kamu hanya perlu menambahkan css seperti berikut ini tanpa melekukan pengeditan di bagian html.

[code type="Css"]//css ini hanya sample saja, ini mungkin tidak cocok dengan format id atau class di html web anda.
#topmenu li:last-child{background-color:#008066;color:#fafafa;font-weight:bold;width:auto;border-radius:5px;height:30px;line-height:30px}[/code]
Jika yang akan di sorot adalah menu paling kanan atau akhir maka gunakan target elemen ul li:last-child atau jika yang akan di sorot adalah paling kiri menu gunakan target elemen ul li:first-child.

Lihat demo sorotan menu_navigasi pada link dibawah ini;

Demo #1

https://borisinil.blogspot.com

Demo #2

https://athiyablog.blogspot.com

Saya pikir sampai disini saja tutorial "cara menyoroti menu navigasi" atau membuat warna yang berda pada menunavigasi. Semoga saja totorial ini menjadi ilmu yang bermanfaat untuk anda dan dapat membantu anda dalam meningkatkan interaksi pengunjung di situs web.