alexa-tracking
Selamat Guest, Agan dapat mencoba tampilan baru KASKUS Masih Kangen Tampilan Sebelumnya
Kategori
Kategori
1024
1024
KASKUS
51
244
https://www.kaskus.co.id/thread/54ca423f148b46691e8b4569/menu-nav-melayang

Menu Nav Melayang

Mlem agan/wati,,caranya bikin menu nav melayang (kayak diatas) gimana...??
untuk web bkan blog
maksi gan mdah2n berkenan membantu
Urutan Terlama
itu namanya Sticky gan. Tinggal cari aja di google. "Cara buat sticky menu". maaf, kalau kode-kode saya gak bisa. Tapi blog saya Blog Arsip juga pakai cara sticky.
Diubah oleh syamsq
Kalau mau gampang, pake bootstrap css gan
Quote:


iya gan mkasi infonya,,tp bkan untuk blog untuk web...

ada banyak cara..klo mau pakai JQuery ada banyak library tinggal search di google..penggunaannya tinggal ikutin dokumentasinya dari si pembuatnya..

kalau mau bikin sendiri salah satunya bisa pakai CSS..coba agan belajar tentang CSS "Positioning"....yg agan mau itu position fixed..
http://www.w3schools.com/css/css_positioning.asp

Kalau implementasinya tergantung design program agan..mau pakai <div> atau <ul> atau apapun itu, sisipkan atribut "class" atau "id" buat penggunaan di CSS'a..
taruh class di pembungkus paling luar menunya(tergantung design agan)..misalnya..

Code:

<body>
<div class='fixedMenu'>
<ul>
<li>Home</li>
<li>About</li>
</ul>
<div>
</body>


lalu pasang di CSS'a
Code:
<style type="text/css">
.fixedMenu /* artinya semua yg ber-"class" "fixedMenu" dan yg ada di dalamnya(antara tag pembuka <div> sampai penutup </div>emoticon-Wink akan menggunakan settingan CSS yg di tentukan */
{
position: fixed; /*posisi tetap(tidak berubah) sesuai lokasi top/right/bottom/left yg sudah ditentukan*/
top: 30px; /*30px berarti ada jarak sebanyak 30px dari jendela atas browser(posisi akan lebih turun ke bawah)*/
left: 0px; /*0px berarti tidak ada jarak dari jendela kiri browser seperti menu di kaskus ini */

/*tidak perlu top & right & bottom & left di deklarasi semua, cukup yg di perlukan saja..*/
}
</style>


atau langsung(inline)
Code:

<body>
<div style="position: fixed; top:30px; left;0px;">
<ul>
<li>Home</li>
<li>About</li>
</ul>
<div>
</body>



×
GDP Network
Copyright © 2018, Kaskus Networks, PT Darta Media Indonesia.
Ikuti KASKUS di