Penggunaan mobile dewasa ini sangatlah pesat. Berbagai kalangan berbondong-bondong untuk dapat membeli beragam jenis smartphone dengan berbagai fitur dan keunikannya. Salah satu keunikan dari smartphone adalah desain menunya yang bagus dan simple. Berangkat dari latar belakang tersebut, maka pada tutorial ini kita akan mencoba membuat menu sederhana dengan gaya mobile tentunya. Anda tertarik, mari simak tutorial berikut.
Langkah 1
Buatlah list menggunakan unordered list dengan tag anchor dan tag span. Kemudian tambahkan dengan id dan class yang berbeda. Contoh :
<div id="menu"> <ul class="mobile"> <li id="satu" class="file"><a href="#satu">My Files<span>253</span></a></li> <li id="dua" class="mail"><a href="#dua">Mail<span>56</span></a></li> <li id="tiga" class="design"><a href="#tiga">Design<span>127</span></a></li> <li id="empat" class="syntax"><a href="#empat">Syntax<span>108</span></a></li> </ul> </div>
HASIL
Langkah 2
Mulailah menambahkan style CSS untuk menu yang hendak kita buat. Diantaranya menambahkan lebar pada div,menghilangkan margin dan padding pada list serta menambahkan warna dengan CSS3 Gradient pada menu.
#menu {
width:200px;
margin:0 auto;
}
.mobile,
.mobile ul,
.mobile li,
.mobile a,
.mobile span {
margin: 0;
padding: 0;
border: none;
outline: none;
}
.mobile li {
list-style: none;
}
.mobile li > a {
display: block;
position: relative;
min-width: 110px;
padding: 0 10px 0 20px;
color: #fdfdfd;
font: bold 12px/32px Arial, sans-serif;
text-decoration: none;
text-shadow: 0px 1px 0px rgba(0,0,0, .35);
background: #6c6e74;
background: -moz-linear-gradient(top, #6c6e74 0%, #4b4d51 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6c6e74), color-stop(100%,#4b4d51));
background: -webkit-linear-gradient(top, #6c6e74 0%,#4b4d51 100%);
background: -o-linear-gradient(top, #6c6e74 0%,#4b4d51 100%);
background: -ms-linear-gradient(top, #6c6e74 0%,#4b4d51 100%);
background: linear-gradient(top, #6c6e74 0%,#4b4d51 100%);
-webkit-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
-moz-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
}
.mobile li > a span {
isplay: block;
position: absolute;
top: 7px;
right: 0;
padding: 0 10px;
margin-right: 10px;
font: normal bold 12px/18px Arial, sans-serif;
background: #404247;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
-webkit-box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1);
-moz-box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1);
box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1);
}
HASIL
Langkah 3
HTML
Buatlah submenu pada setiap menu utama dengan unordered list dan berikan class sub-menu. Anda dapat menambahkan submenu sesuai dengan selera dan keinginan Anda tentunya. Contoh submenu pada menu utama My Files.
<li id="satu" class="file"><a href="#satu">My Files<span>205</span></a> <ul class="sub-menu"> <li><a href="#satu"><em>01</em>Document<span>42</span></a></li> <li><a href="#satu"><em>02</em>Photo<span>87</span></a></li> <li><a href="#satu"><em>03</em>PDF<span>366</span></a></li> </ul> </li>
CSS
Tambahkan style CSS pada submenu. Seperti warna, efek shadow (bayangan) dan lainnya.
.sub-menu li a {
color: #797979;
text-shadow: 1px 1px 0px rgba(255,255,255, .2);
background: #e5e5e5;
padding-left:40px;
border-bottom: 1px solid #c9c9c9;
-webkit-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
-moz-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
}
.sub-menu li:last-child a { border: none; }
.sub-menu li > a span {
color: #797979;
text-shadow: 1px 1px 0px rgba(255,255,255, .2);
background: transparent;
border: 1px solid #c9c9c9;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.sub-menu em {
position: absolute;
top: 0;
left: 0;
margin-left: 14px;
color: #a6a6a6;
font: normal 10px/32px Arial, sans-serif;
}
HASIL
Langkah 4
Buatlah efek pada menu dan submenu ketika hover dan active.
.mobile > li:hover > a,
.mobile > li:target > a {
color: #3e5706;
text-shadow: 1px 1px 1px rgba(255,255,255, .2);
background: #a5cd4e;
background: -moz-linear-gradient(top, #a5cd4e 0%, #6b8f1a 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a5cd4e), color-stop(100%,#6b8f1a));
background: -webkit-linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%);
background: -o-linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%);
background: -ms-linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%);
background: linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%);
}
.mobile > li:hover > a span,
.mobile > li:target > a span {
color: #fdfdfd;
text-shadow: 0px 1px 0px rgba(0,0,0, .35);
background: #3e5706;
}
.sub-menu li:hover a { background: #efefef; }
HASIL
Langkah 5
Terakhir, buatlah efek pada submenu ketika tampil dan tersembunyi. Yaitu ketika salah satu menu utama diklik maka submenu akan tampil dan ketika menu utama lainnya diklik maka submenu sebelumnya akan tersembunyi. Disini kita akan menggunakan CSS3 Transition untuk menambahkan efek animasi tersebut.
.mobile li > .sub-menu {
height: 0;
overflow: hidden;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.mobile li:target > .sub-menu {
height: 98px;
}
