Cara Membuat Menu Vertikal Keren Dengan HTML5 dan CSS3 - Menu adalah sistem navigasi yang digunakan user untuk memilih dalam melakukan suatu operasi tertentu. Di dalam website terkadang kita meletakan menu sebagai navigasi website untuk merujuk ke suatu halaman tertentu, pada umumnya menu berdasarkan orientasinya terbagi menjadi dua yaitu horizontal dan vertikal. Pada kali ini kita akan membuat menu yang berbentuk vertikal atau ke memanjang ke bawah. Menu ini sangat cocok digunakan sebagai backend website, Menu vertikal ini dibuat dengan HTML5 dan CSS3 sehingga tidak berat.
Baca juga : Cara Membuat Slider Keren Dengan HTML5 dan CSS3
Untuk menulisakan script anda dapat menggunakan apa saja bebas, contoh : Notepad, Notepad++, Dreamwaver, NetBeans, Eclipse. Karena game ini cukup sederhana saya sarankan menggunakan Notepad atau Notepad++ saja sudah cukup.
HTML
Buatlah sebuah folder baru dengan nama vertikal menu, kemudian buka notepad++ anda dan masukan script berikut :
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="wrapper">
<h1>Menu Vertikal Dengan Animasi Link</h1>
<div class="mobile">
<!-- Checkbox to toggle the menu -->
<input type="checkbox" id="tm">
<!-- The menu -->
<ul class="sidenav">
<li><a href="#"><i class="fa fa-check"></i><b>Tasks</b></a></li>
<li><a href="#"><i class="fa fa-inbox"></i><b>Messages</b></a></li>
<li><a href="#"><i class="fa fa-pencil"></i><b>New Post</b></a></li>
<li><a href="#"><i class="fa fa-cog"></i><b>Settings</b></a></li>
<li><a href="#"><i class="fa fa-star"></i><b>Starred</b></a></li>
<li><a href="#"><i class="fa fa-power-off"></i><b>Logout</b></a></li>
</ul>
<!-- Content area -->
<section>
<!-- Label for #tm checkbox -->
<label for="tm">Click Me</label>
</section>
</div>
</div>
</body>
</html>
Sekarang simpan dengan di dalam folder sebelumnya dengan nama index.html
CSS
Sekarang tambahkan script CSS di antara tag <head></head> sehingga script anda sekarang sepenuhnya menjadi :
<!DOCTYPE html>
<html>
<head>
<style class="csscreations">
/*Fontawesome Iconfont*/
@import url(http://thecodeplayer.com/uploads/fonts/font-awesome-4.0.1/css/font-awesome.min.css);
/*Montserrat, Open Sans*/
@import url(http://fonts.googleapis.com/css?family=Montserrat|Open+Sans:400,300);
* {margin: 0; padding: 0;}
body {background: #333;}
#wrapper {width: 645px; height: 500px; margin: 35px auto 0 auto;}
h1 {
color: white; font: 300 40px 'Open Sans';
width: 300px; padding: 30px; float: left;
}
.mobile {
float: left; position: relative;
box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.5);
overflow: hidden;
}
/*Hiding the checkbox*/
#tm {display: none;}
/*Content area*/
.mobile section {
background: url("mb1.png");
width: 285px; height: 500px;
position: relative; transition: all 0.25s;
}
.mobile section label {
color: white; font: bold 14px Montserrat; text-align: center;
border: 2px solid white; border-radius: 4px;
display: block; padding: 10px 0;
width: 60%; position: absolute; left: 20%; top: 100px;
cursor: pointer; text-transform: uppercase;
}
/*Nav styles*/
.sidenav {
background: rgb(50, 60, 60); width: 150px;
position: absolute; left: 0; top: 0; bottom: 0; padding-top: 100px;
}
.sidenav li {list-style-type: none;}
.sidenav a { color: white; text-decoration: none; }
.sidenav b {
font: bold 12px/48px Montserrat; display: block;
opacity: 0; -webkit-transform: translateX(50px); transition: all 0.4s;
}
.sidenav i {
display: block; width: 50px; float: left;
font-size: 16px; line-height: 48px; text-align: center;
}
/*Animation controls dengan checkbox hack*/
/*Animate content area to the right*/
#tm:checked ~ section {-webkit-transform: translateX(150px);}
/*Animate links dari kanan ke kiri + fade in effect*/
#tm:checked ~ .sidenav b {opacity: 1; -webkit-transform: translateX(0);}
/*Adding delay animation - in multiples of .08s*/
#tm:checked ~ .sidenav li:nth-child(1) b {transition-delay: 0.08s;}
#tm:checked ~ .sidenav li:nth-child(2) b {transition-delay: 0.16s;}
#tm:checked ~ .sidenav li:nth-child(3) b {transition-delay: 0.24s;}
#tm:checked ~ .sidenav li:nth-child(4) b {transition-delay: 0.32s;}
#tm:checked ~ .sidenav li:nth-child(5) b {transition-delay: 0.40s;}
#tm:checked ~ .sidenav li:nth-child(6) b {transition-delay: 0.48s;}
</style>
</head>
<body>
<div id="wrapper">
<h1>Menu Vertikal Dengan Animasi Link</h1>
<div class="mobile">
<!-- Checkbox to toggle the menu -->
<input type="checkbox" id="tm">
<!-- The menu -->
<ul class="sidenav">
<li><a href="#"><i class="fa fa-check"></i><b>Tasks</b></a></li>
<li><a href="#"><i class="fa fa-inbox"></i><b>Messages</b></a></li>
<li><a href="#"><i class="fa fa-pencil"></i><b>New Post</b></a></li>
<li><a href="#"><i class="fa fa-cog"></i><b>Settings</b></a></li>
<li><a href="#"><i class="fa fa-star"></i><b>Starred</b></a></li>
<li><a href="#"><i class="fa fa-power-off"></i><b>Logout</b></a></li>
</ul>
<!-- Content area -->
<section>
<!-- Label for #tm checkbox -->
<label for="tm">Click Me</label>
</section>
</div>
</div>
</body>
</html>
Kemudian untuk bankground menu simpan file gambar berikut ini dalam folder yang sama dengan sebelumnya simpan dengan nama mb1.png
 |
| Background Vertikal Menu |
Sekarang Vertikal Menu dengan HTML5 dan CSS3 anda sudah selesai anda dapat mencobanya dengan cara klik 2x pada file tersebut, disarankan membukanya dengan browser Chrome atau Mozilla, jangan menggunakan IE hehheeh klw di IE tidak jalan saya sudah tidak heran.
0 komentar