Membuat Menu Melayang CSS



Xfoost – Berbagi Info Teknologi

Xfoost – Pada postingan kali ini Xfoost akan membahas tentang bagaimana cara membuat menu melayang CSS. oke pertama tama apa menu melayang itu? menu melayang disini disini dibuat menggunakan CSS dan juga jquery, jadi ketika mouse di scroll kebawah otomatis menu navigation bar mengikuti turun kebawah.

Beberapa bahan yang diperlukan yaitu

  • file CSS
  • Jquery

oke kita ikuti petunjuknya dibawah

1. Menu navigasi normal tanpa melayang kode CSS dibawah tambahkan ke file CSS.


.menu-normal {

background-color: #CD2027;

border: 2px solid grey;

margin-top:0;

width: 1150px; }

 

2. lalu tambahkan kode dibawah ini tepat diatas kode sebelumnya


.melayang-menu-normal { z-index: 9999; position: fixed; top: 0;} 

3. Selanjutnya simpan kode dibawah ini tepat dibagian bawah </head> lalu simpan

 <script src="kolasifilejquery.js"></script> <script> jQuery("document").ready(function($){ var nav = $('.menu-normal'); $(window).scroll(function () { if ($(this).scrollTop() > 136) { nav.addClass("melayang-menu-normal"); } else { nav.removeClass("melayang-menu-normal"); } }); }); </script> 

4. lalu untuk memasang kode diatas pada html menggunakan kode dibawah lalu simpan.

<div class="menu-normal">kode navigasi yang ada sebelumnya</div>

Selesai

baca Juga postingan Xfoost lain yaitu Membuat Gambar Kiri Kanan Sejajar CSS

Semoga Bermanfaat

 



Indra Bayu

Indra Bayu

Penulis dan Editorial Xfoost.com Email : indrabayu@xfoost.com