alexa-tracking
Kategori
Beramal untuk Korban Gempa Lombok dengan Membeli Merchandise KASKUS
Hadiah Apa yang Agan Mau?

Menu Nav Melayang

Main Content

1024
1024
KASKUS
51
244
https://www.kaskus.co.id/thread/54ca423f148b46691e8b4569/menu-nav-melayang
Breaking News! 
Menu Nav Melayang
Mlem agan/wati,,caranya bikin menu nav melayang (kayak diatas) gimana...??
untuk web bkan blog
maksi gan mdah2n berkenan membantu
Edited by: syamsq
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.
Kalau mau gampang, pake bootstrap css gan
KASKUS Ads
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>

Post Reply
Previous Thread Next Thread