Kali ini kita ekspos tips cara bikin menu floating atau menu yang ngambang di halaman blog. Dengan menu ini, user bisa lebih fleksible dan gak harus scroll susah-susah mau akses menu diatas yang biasanya ditaruh di header blog.
Langsung aja ya? Oke, mari kita mulai :D
Hal pertama yang harus dibutuhkan adalah jQuery. Apa itu jQuery? jQuery adalah kumpulan eksekusi yang lengkap dan bisa digunakan untuk semua keperluan termasuk animasi yang membutuhkan timer atau pengatur waktu. Dengan menggunakan jQuery, semua animasi bisa kita mainkan.
Disini kita membutuhkan 2 jQuery, yaitu:
- jQuery.min.js
- jQuery.ui.js
Animasi lebih cenderung ke Javascript, yah itulah jquery. Akan tetapi, saat ini ada Bootstrap Twitter yang menghandle semua keperluan itu. Tapi, tidak ada salahnya kita gunakan dulu fitur lama tapi gak kalah bersaing dengan bootstrap.
Kedua, Kita atur tampilan menu tersebut sebagus mungkin yang kira-kira tidak mengganggu user/visitor didalam menjelajahi isi/konten blog kita.
Let's go to the point!
1. Copy script dibawah ini dan paste-kan dibawah tag-buka <head> atau tag-tutup </head>:
<link href='//www.appacyber.net/_stylesheet/bs-v2.3.2/css/bootstrap.min.css' media='all' rel='stylesheet' type='text/css'/>
<script src='http://www.appacyber.net/_stylesheet/bs-v2.3.2/js/jquery.min.js'></script>
<script src='http://www.appacyber.net/_stylesheet/bs-v2.3.2/js/jquery-ui.js'/></script>
<script src='http://www.appacyber.net/_stylesheet/bs-v2.3.2/js/bootstrap.min.js'/></script>
2. Copy dan paste-kan script CSS dibawah ini dibagian bawah sekali CSS blogspotmu:
#acnmnu {
position:fixed;
width:250px;
height:31px;
background-color:#000;
cursor:move;
border-top:14px outset #336666;
border-radius:27px;
-moz-border-radius:27px;
-ms-border-radius:27px;
-webkit-border-radius:27px;
-o-border-radius:27px;
border-spacing:2px;
top:57%;
left:6px;
bottom:auto;
right:auto;
font-weight:normal;
}
#acnmnu a {
cursor:pointer;
}
#acnmnu h3{
color:#ffffff;
font-size:17px;
line-height:1.300;
font-weight:bold;
margin-top:-11px;
}
.sidebar-nav{
background-color:#55606C;
border-radius:0px 0px 27px 27px;
-moz-border-radius:0px 0px 27px 27px;
-ms-border-radius:0px 0px 27px 27px;
-webkit-border-radius:0px 0px 27px 27px;
-o-border-radius:0px 0px 27px 27px;
}
.sidebar-nav li{
list-style:none;
list-style-image:none;
}
.sidebar-nav li a{
text-decoration:none;
color:#FFFFFF;
}
.sidebar-nav li a:hover{
text-decoration:none;
color:#FFFFFF;
}
ul#side-menu li a:hover{
text-decoration:none;
color:#FFFFFF;
background-color:#000;
border-radius:27px;
-moz-border-radius:27px;
-ms-border-radius:27px;
-webkit-border-radius:27px;
-o-border-radius:27px;
}
.bgsub{
background-color:#55606C;
}
3. Bentuk tampilannya gini:
<div id='acnmnu'>
<h3 align='center'> True Blogger Menu</h3>
<div class='col-lg-12'>
<div class='navbar-default sidebar' role='navigation'>
<div class='sidebar-nav navbar-collapse'>
<ul class='nav' id='side-menu'>
<li><a href='#'><i class='fa fa-bar-chart-o fa-fw'/> test1 <span class='fa arrow'/></a>
<ul aria-expanded='true' class='bgsub nav nav-second-level collapse in'>
<li class='bgsub'><a href='#'>sub-test1</a></li>
<li class='bgsub'><a href='#'>sub-test1</a></li>
</ul>
</li>
<li><a href='#'><i class='fa fa-table fa-fw'/> test2</a></li>
<li><a href='#'><i class='fa fa-edit fa-fw'/> test2</a></li>
</ul>
</div>
</div>
</div>
</div>
Selesai!
Selanjutnya, anda bisa kembangkan sendiri dari semua script yang sudah ada diatas sesuai kebutuhan.
Untuk contoh prakteknya, disudut kiri bawah blog ini bisa anda coba drag menu tersebut.
Selamat Mencoba
No comments:
Post a Comment