Pada push menu ini, pada keadaan pertama, tampak seperti gambar di atas pada nomor 1, lalu saat ikon pada nomor 1 di klik, maka daftar menu pada nomor 2 muncul.
Pada nomor 2, jika ikon 'X' kita klik, maka menu kembali menjadi seperti nomor 1.
Untuk membuat push menu ini, kita mempelajari dasar HTML, CSS, dan Javascript. Berikut cara pembuatannya.
Alat :
- teks editor : notepad, notepad++ dan lainnya.
- Browser : Firefox, Chrome dan lain-lain.
- File HTML, CSS, Javascript
- Ikon close, menu, dan background menu dan jquery-1.11.1.min.js. Untuk perlengkapan ini bisa didownload di Perlengkapan push menu
- DIharapkan pembaca sudah mengerti sedikit tentang kode HTML dan CSS.
Pada bagian satu ini kita membuat file HTML-nya dengan teks editor. Beri nama file index.html. Berikut kode HTML-nya.
<!DOCTYPE html>
<html>
<head>
<link href='style.css' rel='stylesheet'>
</head>
<body>
<div class="menu">
<!-- Menu icon -->
<div class="icon-close">
<img src="file/close-ikon.png">
</div>
<!-- List menu -->
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Help</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<!-- Main body -->
<div class="tombol-menu">
<div class="icon-menu">
<i class="fa fa-bars"></i>
<img src="file/menu-icon.png">
Menu
</div>
<!-- Menu script -->
<script src="jquery-1.11.1.min.js"></script>
<script src="my-script.js"></script>
</body>
</html>
Penjelasan :
- Pada head kita sisipkan link file CSS kita yang bernama style.css.
- Pada divisi kelas Menu icon, kita masukkan ikon close-ikon.png. Pada saat file lengkap, ikon akan muncul bersamaan dengan daftar menu setelah ikon menu kita klik.
- Setalah icon-close maka kita buat daftar menu About, Blog, Help dan Contact.
- Menu ikon pada kelas tombol menu diiringi teks bertuliskan Menu. Kelas ini nentinya merupakan menu default.
- Setelah itu kita tambahkan script jquery. Beberapa method dari script ini nantinya kita gunakan ke file Javascript kita yang kita beri nama my-script.js.
Untuk Bagian kedua silahkan klik link Bagian 2.
0 komentar:
Posting Komentar