Pada umumnya Responsive Menu Navigasi (versi Mobile) menggunakan Javascript dan teknik yang agak rumit. Namun kali ini Pro Blogiz akan membagi tutorial cara membuat menu navigasi dropdown responsive ( dengan sub menu) sederhana tanpa Javascript. Menu ini hanya mengandalkan kombinasi antara CSS dan HTML5 ( No Javascript ), dimana metode ini juga menunjukkan bahwa Javascript tidak selalu diperlukan!
Kode CSS, HTML yang saya gunakan hanya untuk keperluan dasar saja baik untuk struktur dan style, agar mudah dipahami dan terutama dapat memberikan kesempatan bagi sobat blogger untuk memberikan sentuhan atau kostum sendiri pada hasil akhir menu navigasi responsive ini.
HTML
Seperti yang Anda lihat kode dibawah, sampel ini menggunakan DOCTYPE HTML5 dan juga struktur dasar halaman web. Dalam membangun struktur dasar menu navigasi dropdown, kita akan gunakan HTML basic saja dengan semantik sederhana dan bersih. Tentu ini dimaksudkan agar lebih mudah dimengerti esensi dari tutorial ini, yaitu membuat menu navigasi responsive, bukan difokuskan pada bentuk dan style menu-nya.
Untuk menunjukkan top level link menu mempunyai dropdwon saya juga menambahkan unicode down arrow: ▾, dan juga menggunakan Icon Symbol HTML : ☰ pada toggle button pada menu responsivenya (lihat Symbol dan Ikon Entitas HTML)
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Responsive Menu Navigasi tanpa Javascript</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
</head>
<body>
<label for="show-menu" class="show-menu">☰</label>
<input type="checkbox" id="show-menu" role="button">
<ul id="menu">
<li class="active"><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiLBsCM-l2soq1tXfbmo76iXqsgZjfraGehqa8piRFdx8sDfFrTWFczhqN_D61TaLoh6lLihpYMJ7r9YRyG_x7tGP0_KiocQIRg55cVY2ZYZpRG-uDOmPdfduYfS-2q5dXTDomeFxZ74Y/s1600/home-icon.png" alt="home"> </a></li>
<li>
<a href="#">Tutorial ▾</a>
<ul class="hidden">
<li><a href="#">CSS</a></li>
<li><a href="#">HTML5</a></li>
<li><a href="#">Javascript</a></li>
</ul>
</li>
<li>
<a href="#">Web Design ▾</a>
<ul class="hidden">
<li><a href="#">Blogger Template</a></li>
<li><a href="#">Menu Navigasi</a></li>
<li><a href="#">Responsive Design</a></li>
<li><a href="#">Codding</a></li>
</ul>
</li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact</a></li>
</ul>
</body>
</html>
CSS
Pertama saya akan mencoba mulai dari membuat menu navigasi dropdown horizontal sederhana, memasang beberapa styling dasar untuk elemen ul dan li yang bertujuan menghilangkan style bullet points atau list style lainnya.
/*Strip the ul of padding and list styling*/
ul {
list-style-type:none;
margin:0;
padding:0;
position: absolute;
}
/*Create a horizontal list with spacing*/
li {
display:inline-block;
float: left;
margin-right: 1px;
}
Selanjutnya, mari kita memberi style pada tampilan link-link menu, jika Anda berniat untuk memberi gaya/style menu link sesuai keinginan sendiri, dibagian ini yang harus diedit.
/*Style for menu links*/
li a {
display:block;
min-width:140px;
height: 50px;
text-align: center;
line-height: 50px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #fff;
background: #C0791E;
text-decoration: none;
}
li.active a {
background-color: #63390A;
}
/*Hover state for top level links*/
li:hover a {
background: #63390A;
}
/*Style for dropdown links*/
li:hover ul a {
background: #DCB679;
color: #2f3036;
height: 40px;
line-height: 40px;
}
/*Hover state for dropdown links*/
li:hover ul a:hover {
background: #63390A;
color: #fff;
}
Sekarang saatnya memberi styling untuk link-link dropdown, seperti membuat link dropdown tidak akan terlihat ( visible )secara default dan akan terlihat saat hover. Juga style utntuk link-link vertikal dan mencegah text menu tidak keluar blok ( prevent text wrapping )
/*Hide dropdown links until they are needed*/
li ul {
display: none;
}
/*Make dropdown links vertical*/
li ul li {
display: block;
float: none;
}
/*Prevent text wrapping*/
li ul li a {
width: auto;
min-width: 100px;
padding: 0 20px;
}
/*Display the dropdown on hover*/
ul li a:hover + .hidden, .hidden:hover {
display: block;
}
Responsive Style
Sampai tahapan diatas sebenarnya sudah selesai untuk membuat menu navigasi dropdown, namun hanya siap untuk penggunaan dekstop saja (layar monitor yang lebih besar). Agar tampilan menu bisa responsive dan friendly bagi pengguna mobile (ponsel), kita akan memberi beberapa perubahan pada code css. Pada contoh kali ini media query mentargetkan untuk device/perangkat dengan lebar max 760px.
/*Responsive Styles*/
@media screen and (max-width : 760px){
/*Make dropdown links appear inline*/
ul {
position: static;
display: none;
}
/*Create vertical spacing*/
li {
margin-bottom: 1px;
}
/*Make all menu links full width*/
ul li, li a {
width: 100%;
}
}
Keterbatasan ruang pada perangkat mobil, sehingga akan lebih indah jika menu ini ( menu dropdown dengan sub menu ) menggunakan semacam tombol yang bisa diklik untuk menampilkan semua link menu ( seperti button toggle ). Untuk membuatnya kita bisa menggunakan dengan metode checkbox , kode berikut dapat Anda letakkan diatas kode HTML ( paling atas menu ).
<label for="show-menu" class="show-menu">☰</label>
<input type="checkbox" id="show-menu" role="button">
Tambahkan kode berikut ke dalam CSS dimana saja di luar code media query
/*Style 'show menu' label button and hide it by default*/
.show-menu {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-decoration: none;
color: #fff;
background: #11A092;
text-align: center;
padding: 10px 0;
display: none;
}
/*Hide checkbox*/
input[type=checkbox]{
display: none;
-webkit-appearance: none;
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu{
display: block;
}
Dan kode ini dalam media query
/*Display 'show menu' link*/
.show-menu {
display:block;
}
Sehingga nantinya tampilan menu pada perangkat mobile seperti yang ada pada contoh DEMO diatas
Final Code ( CSS + HTML )
Menu navigasi responsive ini bisa digunakan di Blogger platform template dan bekerja baik di semua browser modern terkini dan tidak memerlukan Javascript apapun, tentu berpengaruh baik pada page load time.
HTML:
<label for="show-menu" class="show-menu">☰</label>
<input type="checkbox" id="show-menu" role="button">
<ul id="menu">
<li class="active"><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiLBsCM-l2soq1tXfbmo76iXqsgZjfraGehqa8piRFdx8sDfFrTWFczhqN_D61TaLoh6lLihpYMJ7r9YRyG_x7tGP0_KiocQIRg55cVY2ZYZpRG-uDOmPdfduYfS-2q5dXTDomeFxZ74Y/s1600/home-icon.png" alt="home"> </a></li>
<li>
<a href="#">Tutorial ▾</a>
<ul class="hidden">
<li><a href="#">CSS</a></li>
<li><a href="#">HTML5</a></li>
<li><a href="#">Javascript</a></li>
</ul>
</li>
<li>
<a href="#">Web Design ▾</a>
<ul class="hidden">
<li><a href="#">Blogger Template</a></li>
<li><a href="#">Menu Navigasi</a></li>
<li><a href="#">Responsive Design</a></li>
<li><a href="#">Codding</a></li>
</ul>
</li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact</a></li>
</ul>
CSS :
/*Strip the ul of padding and list styling*/
ul {
list-style-type:none;
margin:0;
padding:0;
position: absolute;
}
/*Create a horizontal list with spacing*/
li {
display:inline-block;
float: left;
margin-right: 1px;
}
/*Style for menu links*/
li a {
display:block;
min-width:140px;
height: 50px;
text-align: center;
line-height: 50px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #fff;
background: #C0791E;
text-decoration: none;
}
li.active a {
background-color: #63390A;
}
/*Hover state for top level links*/
li:hover a {
background: #63390A;
}
/*Style for dropdown links*/
li:hover ul a {
background: #DCB679;
color: #2f3036;
height: 40px;
line-height: 40px;
}
/*Hover state for dropdown links*/
li:hover ul a:hover {
background: #63390A;
color: #fff;
}
/*Hide dropdown links until they are needed*/
li ul {
display: none;
}
/*Make dropdown links vertical*/
li ul li {
display: block;
float: none;
}
/*Prevent text wrapping*/
li ul li a {
width: auto;
min-width: 100px;
padding: 0 20px;
}
/*Display the dropdown on hover*/
ul li a:hover + .hidden, .hidden:hover {
display: block;
}
/*Style 'show menu' label button and hide it by default*/
.show-menu {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-decoration: none;
color: #fff;
background: #11A092;
text-align: center;
padding: 10px 0;
display: none;
}
/*Hide checkbox*/
input[type=checkbox]{
display: none;
-webkit-appearance: none;
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu{
display: block;
}
/*Responsive Styles*/
@media screen and (max-width : 760px){
/*Make dropdown links appear inline*/
ul {
position: static;
display: none;
}
/*Create vertical spacing*/
li {
margin-bottom: 1px;
}
/*Make all menu links full width*/
ul li, li a {
width: 100%;
}
/*Display 'show menu' link*/
.show-menu {
display:block;
}
}
Ok Sobat Blogger....silahkan dicoba, Anda juga bisa menggunakan style yang disukai. Menu diatas hanya sebagai contoh saja atau metode cara membuat Menu Navigasi Dropdown Responsive tanpa Javascript ( versi mobile ).
recources: http://medialoot.com/blog/how-to-create-a-responsive-navigation-menu-using-only-css/