Blog Request tutorial? klik disini!

  • Cara Membuat Menu Tetap Pada Posisinya

    Ditulis oleh: Faizal Rafik
    5125 kali dibaca
    02 Apr / 2014 13:57

    Dalam tutorial kali ini saya ingin membahas bagaimana caranya membuat Menu tetap pada Posisinya atau bisa di sebut juga dengan Fixed Position Menu maksudnya adalah Posisi Menu tidak akan bergerak walaupun kita scroll sampai ke bawah. Contoh gaya seperti ini sudah banyak banget di terapkan oleh para Web Designer untuk mendesain websitenya dan website sosial pun sudah banyak yang menerapkan gaya seperti ini contohnya seperti Twitter, Facebook, dan lain-lainnya.

    Oke langsung saja kita praktekan ya teman-teman.

    Pertama siapkan file index.html

    Buat struktur HTML nya seperti di bawah ini :

    CSS

    Style untuk id logo :

    Style untuk id main dan class menu :

    Style untuk id content :

    Style untuk footer :

    Di CSS id logo dan id main terdapat property CSS position:fxied yang berfungsi untuk membuat posisi elemen tersebut tidak berubah-ubah saat kita scroll dan untuk mengatur letak content agar berada tepat di bawah menu gunakan property CSS top: dan bottom:.

    Untuk melihat hasilnya silahkan lihat DEMO dan untuk mendownload source nya bisa di download di SINI.

    Selamat mencoba teman-teman semoga berguna untuk mendesain website teman-teman agar terlihat lebih menarik lagi. smiley






Baca juga

Rukan Artha Gading Niaga Blok i - 23, Jalan Boulevard Artha Gading

Kelapa Gading, Jakarta Utara 14240

(Belakang Mall Artha Gading)

Telp: (021) 4585-0387


Ruko Permata Regensi Blok B - 18, Jalan Haji Kelik

Srengseng, Kebon Jeruk, Jakarta Barat 11630

(Depan Hutan Kota Srengseng)

Telp: (021) 5890-8355


Ruko Jalan Taman Daan Mogot Raya No. 23

Kel. Tanjung Duren Utara Kec. Grogol Petamburan, Jakarta Barat 11470

(Belakang Mall Citraland dan Kampus UNTAR II)

Telp: (021) 2941-1188


Ruko Jalan Kartini Raya No. 53

Pancoran Mas, Depok 16436

(± 5 Menit dari Kantor Walikota Depok)

Telp: (021) 7720-7657


Rukan Crown Palace Blok A no 12, Jl Prof Dr Soepomo no 231 (Samping Universitas Sahid).

Kec. Tebet, Kel. Menteng Dalam.

(± 1 Menit dari Tugu Pancoran)

Jakarta Selatan 12870

Telp: (021) 2298-3886

Buka setiap hari Senin - Minggu jam 09.00 s/d 21.00

SMS: 0851-0055-5666 / 0819-7555-666 / 0812-9933-3913 / 0812-9393-3210 / 0812-1999-9155