Nah kali ini saya akan berbagi tentang bagaimana cara membuat tampilan lebih menarik. Nah di sini kita akan membuat tampilan menu.
Pertama-tama buatlah file dengan extensi .html "index.html".
Setelah itu ketikan deklarasi di bawah ini:
a. Line pertama diisi dengan html
<!DOCTYPE html>
<html lang='en'>
<head>
<title>Menu</title>
b. Line selanjutnya diisi dengan style dari CSS
<style type='text/css'>
*{
transition: all 0.3s ease;
}
body{
margin: 0 auto;
}
#button-menu{
margin: 10px;
padding: 5px;
border: 1px solid #4DBCE9;
position: fixed;
border-radius: 2px;
}
#button-menu div{
width: 30px;
padding: 3px;
margin: 4px auto;
background: #4DBCE9;
border-radius: 2px;
}
#button-menu:hover{
background: #4DBCE9;
cursor: pointer;
}
#button-menu:hover div{
background: white;
}
#box-menu{
margin: 5px;
position: fixed;
width: 200px;
height: 400px;
top: 55px;
left: -320px;
background: #4DBCE9;
border-radius: 2px;
}
#box-menu nav{
margin: 10px auto;
list-style-type: none;
}
#box-menu ul{
padding: 5px;
padding-left: 20px;
font-family: arial;
width: auto;
margin: 0;
font-weight: bold;
color: white;
border-bottom: 2px solid white;
}
#box-menu ul:hover{
margin-left: 20px;
cursor: pointer;
}
</style>
Penjelasan:
Untuk css di atas saya hanya akan memberikan penjelasan yang penting-penting saja untuk anda ketahui:
- transition -> adalah gerakan motion ketika terjadi perubahan di dalam document. Misalnya ukuran (seperti height, width), color, bakground, margin dan padding, dan lain-lain.
- # -> digunakan untuk tag id, sedangkan . -> digunakan untuk tag class
- hover -> digunakan ketika ada event atau kejadian mouse menunjuk bagian dari tag dengan nama yang sudah didefinisikan
c. Kemudian memasukkan JavaScript
<script type='text/javascript'>
var menu_active = 0;
function _(x){
return document.getElementById(x);
}
function show_menu(){
_('box-menu').style.left = "5px";
menu_active = 1;
}
window.addEventListener('mouseup',function(){
if(menu_active == 1){
var box = _('box-menu');
var sub_box = _('sub-menu');
if( event.target != box && event.target.parentNode != box && event.target.parentNode != sub_box){
box.style.left = "-320px";
menu_acive = 0;
}
}
});
</script>
Penjelasan:
Nah di sini ada banyak yang harus anda diketahui>
1. function _(x) berguna untuk mengembalikan suatu Element dengan nama tertentu yang disimpan di dalam argumen x.
2. function show_menu() -> dijalankan ketika ada deklarasi pemanggilan di dalam tag document di dalam body onclcik="show_menu()". Nah nantinya fungsi ini akan mengubah style dari Element tersebut yang sudah ditandai dengan id pada tagnya. Style perubahan bisa terserah anda, tapi di sini saya ingin mengubah posisinya agar berada pada koordinant kiri 5px.
3. window.addEventListener('mouseup',function{....}) -> ini adalah suatu fungsi yang akan memperhatikan gerakan click dari mouse/cursor anda. Dimana dia akan menjalankan fungsi ini ketika anda melakukan click. Nah di dalam sini fungsi ini berfungsi ketika ada event ketika klik anda tidak mengenai box-menu, maka otomatis posisi style dari box-menu akan diubah menjadi -320px pada bagian kiri, ini berfungsi untuk menyembunyikan kembali box-menu tersebut.
d. Terkahir adalah body
</head>
<body>
<div id='button-menu' onclick='show_menu()'>
<div></div>
<div></div>
<div></div>
</div>
<div id='box-menu'>
<nav id='sub-menu'>
<ul>Home</ul>
<ul>About Me</ul>
<ul>Contact Us</ul>
<ul>Help</ul>
</nav>
</div>
</body>
</html>
Penjelasan:
Nah di sana anda bisa melihat terdapat id yang menandai suatu tag tertentu, agar nantinya menjadi identitas yang akan digunakan untuk style ataupun javascript.
Hasilnya:
Sampai di sini dulu sharing saya tentang bagaimana cara membuat tampilan menu yang power cool. Eee. Sebenarnya banyak type menu yang bisa anda gunakan seperti dropdown. Tetapi semuanya kembali lagi kepada selera anda.
:)
Nantikan artikle saya selanjutnya yaaa. :)
(y)
BalasHapus