NianShiraz0ge 29-01-2015 21:22

Newbie Posts: 41

Menu Nav Melayang

Mlem agan/wati,,caranya bikin menu nav melayang (kayak diatas) gimana...??
untuk web bkan blog
maksi gan mdah2n berkenan membantu

29-01-2015 21:22

0

Kutip Balas

Beri apresiasi terhadap thread ini Gan!

syamsq 29-01-2015 22:06

Kaskus Addict Posts: 1,000

#1

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.

29-01-2015 22:06

Diubah oleh syamsq 29-01-2015 22:08

0

Kutip Balas

sikelopes 30-01-2015 00:28

Kaskus Addict Posts: 1,297

#2

Kalau mau gampang, pake bootstrap css gan

30-01-2015 00:28

0

Kutip Balas

NianShiraz0ge 30-01-2015 09:35

Newbie Posts: 41

#3

Quote:

Original Posted 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.

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

30-01-2015 09:35

0

Kutip Balas

ttiiddaakk 30-01-2015 10:39

Kaskuser Posts: 226

#4

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> 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>

30-01-2015 10:39

0

Kutip Balas