#3 Desain Website – Menu Navigasi Mobile Friendly

Posted By fuadfauzi 22 Desember, 2018
#3 Desain Website – Menu Navigasi Mobile Friendly

Menu Navigasi Mobile Friendly

#3 Desain Website – Menu Navigasi Mobile Friendly – Pada sub bab kali ini saya akan menjelaskan mengenai menu navigasi mobile friendly. Sub Bab ini adalah lanjutan dari #2 Desain Website – Meta Tag pada Header.

Mobile Friendly

Apa maksudnya Mobile Friendly? Maksudnya adalah saat pengguna membuka website pada perangkat mobile. Maka ukuran dan lebar website akan menyesuaikan pada perangkat mobile.

Jadi bisa dibilang Mobile Friendly itu disebut juga Responsive. Lalu seberapa pentingkah Responsive pada website saat ini?

Responsive sangat penting seiring banyaknya masyarakat yang menggunakan Smartphone. Dalam beberap kasus banyak orang yang menutup website dikarenakan halaman tersebut tidak Responsive.

Mobile Friendly bukan hanya soal Responsive, namun juga tata letak huruf, yang terlalu berdekatan atau bahkan, tertutup oleh elemen tertentu.

Bayangkan saja saat kita membaca paragraph dalam sebuah artikel. Namun setengah dari paragraph tersebut tertutup oleh widget atau elemen yang tidak responsive. Itu akan membuat pembaca merasa kecewa.

Namun Google juga menafsirkan mobile friendly sebagai kecepatan website. Bila website tersebut lambat dikarenakan sebuah .js ataupun sebuah .css yang lambat dalam loading. Maka google akan menganggap halaman tersebut tidak mobile friendly.

Jadi Mobile friendly yang terpenting adalah responsive, tata letak huruf dan loading website.

Menu Navigasi

Menu Navigasi pada sebuah website sangat berguna bagi website dalam mengarahkan pengguna untuk mengetahui Topik atau Kategori penting pada website tersebut. Menu navigasi juga berguna untuk menaruh header image, icon social media, search box ataupun contact telp.

Menu Navigasi biasa diletakan di atas header ataupun dibawah header. Ada juga website yang menggunakan Menu Navigasi tambahan yang diletakan pada Footer. Itu semua sesuai dengan kebutuhan pada website tersebut.

Menu Navigasi pada website biasa dituliskan dalam bahasa HTML dengan

<nav>
Disini
</nav>

Seiring dengan invonasi-inovasi yang dilakukan, terdapat banyak sekali jenis desain menu navigasi yang mungkin cocok untuk website anda.

Ada dua jenis menu navigasi, yaitu Menu Navigasi Horizontal dan Menu Navigasi Vertikal. Namun yang saya sering sekali temui adalah jenis Menu Navigasi Horizontal.

Membuat Menu Navigasi Mobile Friendly dan Responsive

Membuat menu navigasi mobile friendly pada kali ini. Mungkin akan sedikit membingungkan bila anda tidak mengerti cara menaruh HTML, CSS, CSS Mobile Friendly, JavaScript, jQuery dsb.

Bila anda mengalami kesulitan silahkan ceritakan pada kami di kolom komentar.

Membuat Menu Navigasi #Versi Satu

Menu navigasi mobile friendly yang ada dibawah ini yaitu versi horizontal dan menu drop down lalu terdapat social media icon dan search box. Anda dapat melihat demonya pada halaman template ini:

Template Blogger Overlord Blue

Pertama masukan jQuery ini:

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js”></script>

Bila sudah ada tidak perlu ditambahkan

Masukan js ini

$(document).ready(function(){
  $("#hidding1").click(function(){
    $("#kuromenu ul").toggleClass("displaying");
  });
  $("#hidding2").click(function(){
    $("#kuromenu ul").toggleClass("displaying");
  });
});

Lalu anda gunakan CSS dibawah ini, anda bisa mengeditnya sesuai kebutuhan anda.

/*--MENU--*/
#kuromenu{background:#0033cc;padding:4px;}
#kuromenu{overflow:hidden;clear:both}
#kuromenu ul{list-style:none;padding:0;margin:0;font-weight:bold;}
#kuromenu ul li{display:block;float:left;margin:0}
#kuromenu ul li a{color:#fff}
#kuromenu ul li a{display:block;font-size:13px;padding:15px 15px;}
#kuromenu ul li a:hover{color:#fff}
#kuromenu ul li:hover{color:#fff;background:#00248E;border-radius:5px}
#kuromenu ul li:hover ul{visibility:visible}
#kuromenu ul li ul{visibility:hidden;position:absolute;z-index:9999;border-top:4px solid #0033cc;padding:4px;background:#00248E;}
#kuromenu ul li ul li{float:none;background:#00248E}
#kuromenu ul li ul li a{font-size:12px;}
#kuromenu ul li ul li a:hover{background:#0033CC}
#pencari{margin-left:5px;background:#fff;margin-bottom:5px;text-align:center}
#search{padding:5px}
#nyarinya input[type="text"]{border:0;padding:10px;background:#fff;font-weight:bold;color:#666;font-size:13px;margin:0}
#search-top{padding:5px;overflow:hidden;text-align:right;margin:0}
#nyarinya{float:right}
#hidding2{display:none}
#hidding2{background:#00248E;color:#fff;padding:13px;font-size:16px;cursor:pointer}
.socialmedia{float:right}
#hidding2 input:checked ~ #kuromenu ul{display:block}
@media only screen and (max-width:1000px){
#kuromenu ul li{float:none}
#kuromenu ul li ul{position:inherit;visibility:visible;background:#34495e}
#kuromenu ul li ul li a{padding:10px 0 10px 45px}
#kuromenu ul li:hover a{background:inherit}
#kuromenu ul{display:none;float:none;clear:both}
#hidding1,#hidding2{display:block;clear:both;font-weight:bold}
#hidding2{float:left}.displaying{display:inherit!important}
}

Nah selanjutnya tinggal anda memasukan HTMLnya saja yaitu seperti ini, namun HTML ini khusus pengguna Blogger:

<nav id=’kuromenu’>
<label id=’hidding2′>&#8801; Menu</label>
<ul>
<li><a href=’/’><i class=’fa fa-home’></i> Home</a></li>
<li><a href=’/p/anime-list.html’><i class=’fa fa-list’></i> Anime List</a></li>
<li><a href=’#’><i class=’fa fa-tags’></i> Genre</a></li>
<li><a href=’#’><i class=’fa fa-users’></i> Partner</a></li>
<li><a href=’#’><i class=’fa fa-user’></i> Staff</a></li>
<li><a href=’#’><i class=’fa fa-list’></i> Menu+</a><ul>
<li><a href=’#’> Sub – Menu 1 </a></li>
<li><a href=’#’> Sub – Menu 2 </a></li>
<li><a href=’#’> Sub – Menu 3 </a></li>
</ul>
</li>
</ul>
<div id=’nyarinya’>
<form action=’/search’ id=’search-top’ method=’get’>
<input id=’diklik’ name=’q’ placeholder=’Search…’ type=’text’/>
</form>
</div>
<ul class=’socialmedia’>
<li><a href=’#’ title=’Facebook’><i class=’fa fa-facebook’></i></a></li>
<li><a href=’#’ title=’Twitter’><i class=’fa fa-twitter’></i></a></li>
<li><a href=’#’ title=’Google Plus’><i class=’fa fa-google-plus’></i></a></li>
<li><a href=’#’ title=’Join Site’><i class=’fa fa-plus’></i></a></li>
</ul>
</nav>

Bila anda menggunakannya pada Theme WordPress maka gunakan HTML ini

<nav id=’kuromenu’>
<label id=’hidding2′>&#8801; Menu</label>
<?php wp_nav_menu( array( ‘container_class’ => ‘menu-header’, ‘theme_location’ => ‘primary’ ) ); ?>
<div id=’nyarinya’>
<form action=’/’ id=’search-top’ method=’get’>
<input id=’diklik’ name=’s’ placeholder=’Nyari apa…’ type=’text’/>
</form>
</div>
<ul class=’socialmedia’>
<li><a href=’#’ title=’Facebook’><i class=’fa fa-facebook’></i></a></li>
<li><a href=’#’ title=’Twitter’><i class=’fa fa-twitter’></i></a></li>
<li><a href=’#’ title=’Google Plus’><i class=’fa fa-google-plus’></i></a></li>
<li><a href=’#’ title=’Join Site’><i class=’fa fa-plus’></i></a></li>
</ul>
</nav>

Jangan lupa masukan juga PHP dibawah ini pada Function.php atau fungsi tema

register_nav_menus( array(
‘primary’ => __( ‘Navigasi Utama’, ‘desyonet’ ),
) );

Sebenarnya untuk pengguna wordpress itu tergantung dengan kebutuhan kalian masing masing. Contoh Kode PHP Menu Navigasi pada wordpress diatas itu saya integrasikan dengan theme, jadi akan muncul di customize.

Sekian dari artikel #3 Desain Website – Menu Navigasi Mobile Friendly. Pada sub bab selanjutnya anda akan belajar mengenai #4 Desain Website – Header pada Website.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *