Menciptakan mengambang HTML Menu menggunakan jQuery dan CSS

Indonesian (Bahasa Indonesia) translation by Haikal Kamil (you can also view the original English article)

Untuk kita semua yang berurusan dengan halaman web yang panjang dan perlu menggulir (scroll) ke atas untuk melihat menu, hal berikut ini adalah alternatif yang bagus: menu terapung(floating menu) yang bergerak saat Anda menggulir halaman. Ini dilakukan dengan menggunakan HTML, CSS, dan jQuery, dan sepenuhnya kompatibel dengan W3C.

Demo dan Source

Anda dapat melihat demo tutorial ini dengan mengklik tombol "Demo" di atas. Untuk unduhan source-nya, harap dicatat bahwa library jQuery, plugin Dimensions , dan kode Reset Eric Meyer tidak ada dalam file ZIP.

Apa yang Kami Bangun

Tutorial ini mencakup cara membuat "floating menu" menggunakan HTML, CSS, dan jQuery. Untuk mengulangi, menu terapung tetap terlihat meskipun Anda menggulir halaman web ke bawah. Mereka dianimasikan, sehingga menu tersebut bergerak ke atas dan ke bawah saat Anda menggulirkan jendela browser ke atas atau ke bawah. Saya akan menunjukkan kepada Anda bagaimana membuat menu terapung menggunakan jQuery dan CSS, dan mudah-mudahan membuat beberapa murid jQuery baru: D.

Sebelum kita melanjutkan ke langkah-langkah pengkodean, telah melihat bentak dua layar di bawah ini. Pertama menunjukkan halaman web dengan menu yang mengambang di atas kanan. Tentu saja, Anda tidak bisa mengatakan itu mengambang sampai Anda melihatnya langsung dan benar-benar menggulir halaman. Jadi lihat snapshot kedua, dan Anda dapat melihat bahwa menu tersebut telah bergerak.

Langkah 1

    <div id="floatMenu">
        <ul>
            <li><a href="#" onclick="return false;"> Home </a></li>
        </ul>
        
       <ul>
            <li><a href="#" onclick="return false;"> Table of content </a></li>
            <li><a href="#" onclick="return false;"> Exam </a></li>
            <li><a href="#" onclick="return false;"> Wiki </a></li>
        </ul>
        
        <ul>
            <li><a href="#" onclick="return false;"> Technical support </a></li>
        </ul>
    </div>

Ini adalah markup dasar yang akan kita gunakan. Bagian utama dalam sedikit HTML ini adalah <div id="floatMenu">...</div> di Baris 01, yang merangkum seluruh menu. Tiga daftar hanya digunakan untuk menunjukkan struktur, yang dapat dimodifikasi sesuai dengan kebutuhan Anda. Dalam hal ini, ada tiga bagian ke menu, seperti diwakili oleh tiga daftar HTML yang tidak diurutkan.

Sebagai kebiasaan, saya menonaktifkan klik pada tautan dummy (href = "#"). Hanya untuk memastikan bahwa klik pada link dummy tidak mengirim halaman kembali ke atas, ada juga onclick = "return false;" di <a href>. Metode ini memungkinkan untuk menambahkan fitur item menu seperti lightboxing - sesuatu yang mengharuskan halaman untuk tetap pada posisi vertikal terakhir ketika pengguna mengklik link menu.

Langkah 2

Sekarang kita perlu beberapa aturan CSS untuk mengatur dan memposisikan menu. (Saya menggunakan CSS Reset dari Eric A. Meyer, jadi itu sebabnya tidak ada margin: 0 atau padding: 0 pada element ul):

body {
    background-color:#000;
    height:2000px;
    color:#ccc;
    font:10px "Lucida Grande", "Lucida Sans", "Trebuchet MS", verdana, sans-serif;
}
#floatMenu {
    position:absolute;
    top:150px;
    left:50%;
    margin-left:235px;
    width:200px;
}
#floatMenu ul {
    margin-bottom:20px;
}
#floatMenu ul li a {
    display:block;
    border:1px solid #999;
    background-color:#222;
    border-left:6px solid #999;
    text-decoration:none;
    color:#ccc;
    padding:5px 5px 5px 25px;
}

Body height(Line 03, di atas) telah ditetapkan hanya untuk mendapatkan ruang yang cukup untuk menu kami untuk menggulir ke atas dan ke bawah dengan halaman. Ini harus dihapus dalam skenario kasus nyata. Dua hal lain yang perlu diperhatikan adalah position:absolute (Baris 08) dan left:50% (Baris 10), keduanya dalam aturan #floatMenu CSS (Baris 07), di atas.

Atribut "position" digunakan ketika Anda harus menghapus elemen dari aliran dokumen dan menyimpannya di tempat yang tepat di halaman Anda. Jika Anda menggunakan fungsi zoom teks pada browser Anda, element dengan posisi absolute tidak akan bergerak, bahkan jika teks di sekitarnya bertambah besar.

Attribute "left" digunakan untuk memposisikan element div tertentu secara horizontal. Nilainya perlu didefinisikan sebagai persentase dalam hal ini kami ingin desain terpusat. Dengan nilai 50%, sisi kiri container diposisikan di tengah halaman. Untuk memposisikannya kiri atau kanan kita perlu menggunakan attribute "margin-left" (Baris 11), dengan nilai negatif untuk offset ke kiri dan yang positif untuk offset ke kanan.

Elemen-elemen lain dalam aturan stylesheet di atas menyesuaikan dengan desain visualnya.

Langkah 3

Sekarang kami memiliki tiga bagian menu yang diposisikan di sisi kanan atas halaman. Untuk meningkatkan efek roll-over item menu, mari kita tambahkan style class menu1, menu2 dan menu 3 ke masing-masing bagian menu, masing-masing (ke setiap element <ul>). Kami akan memiliki 3 sub-menu yang berbeda menggunakan 3 tag <ul> kami. Code di bawah ini adalah modifikasi dari kode HTML yang ditunjukkan pada Langkah 1 di atas:

1	<div id="floatMenu">
2	<ul class="menu1">
3	...
4	</ul>
5
6	<ul class="menu2">
7	...
8	</ul>
9
10	<ul class="menu3">
11	...
12	</ul>
13	</div>

Sekarang mari kita mendefinisikan beberapa efek roll-over berbasis CSS hover, yang akan berbeda untuk setiap bagian menu.

    #floatMenu ul.menu1 li a:hover {
        border-color:#09f;
    }
    #floatMenu ul.menu2 li a:hover {
        border-color:#9f0;
    }
    #floatMenu ul.menu3 li a:hover {
        border-color:#f09;
    }

Sekarang setiap bagian menu akan menampilkan warna yang berbeda ketika mouse melayang di atas item menu. Jika suka, Anda juga dapat menambahkan rules untuk status link menu lainnya menggunakan class pseudo :link, :visited, :hover dan :active. Urutan di mana Anda harus menulisnya dapat dengan mudah diingat seperti ini: LoVe dan HAte, di mana huruf besar mewakili huruf pertama dari setiap state.

Langkah 4

Kami punya menu yang terlihat bagus dan bisa berhenti di sini, tapi kami ingin menu ini mengambang, jadi sekarang saatnya menambahkan beberapa jQuery. Anda harus mengunduh library jQuery dan plugin Dimensions. Plugin ini akan digunakan untuk mengambil informasi tentang jendela browser (width, height, scroll, dll.). Anda dapat menautkan kedua bit kode jQuery tersebut dari file HTML Anda di bagian <head>...</head>. Hanya ingatlah untuk mengubah path URL berdasarkan di mana pada server Anda menempatkan library jQuery dan file plugin tersebut.

1	<script language="javascript" src="jquery.js"></script>
2	<script language="javascript" src="jquery.dimensions.js"></script>

Kami juga memerlukan beberapa kode jQuery custom , jadi mulailah bagian baru, juga di dalam bagian <script> baru, juga di dalam bagian <head>...</head> dari dokumen HTML Anda.

1	<script language="javascript">
2	...
3	</script>

Tambahkan kode jQuery berikut di dalam bagian <script>.

1	$(document).ready(function(){
2	// code will go here
3	});

Function $(document).ready() mirip dengan window.onLoad tetapi telah ditingkatkan. Dengan function window.onLoad, browser harus menunggu hingga seluruh halaman (DOM dan tampilan) dimuat. Dengan function $(document).ready(), browser hanya menunggu hingga DOM dimuat, yang berarti jQuery dapat mulai memanipulasi element-element lebih cepat.

Langkah 5

Kami membutuhkan pendengar untuk acara jendela "Gulir Halaman". Script kustom jQuery kami sekarang terlihat seperti ini:

	
    $(document).ready(function(){
        $(window).scroll(function () { 
            // code will go here
        });
    });

listener adalah event handler yang menunggu dalam keadaan siaga ketika peristiwa tertentu pada jendela halaman terjadi - dalam halaman ini scroll ke atas atau ke bawah.

Langkah 6

Karena menu kami akan "mengambang" saat halaman digulir, kami perlu melacak posisi awalnya. Daripada mengkodekannya ke jQuery yang sulit, kita akan membaca posisinya menggunakan plugin jQuery Dimensions, lalu menggunakan value yang diambil. Kami akan melakukan hal yang sama dengan nama menu kami. Mari kita tambahkan dua definisi variable (Baris 01, 02) sehingga code kita sekarang terlihat seperti ini:


    var name = "#floatMenu";
    var menuYloc = null;
	
    $(document).ready(function(){
        menuYloc = parseInt($(name).css("top").substring(0,$(name).css("top").indexOf("px")))
        $(window).scroll(function () { 
            // code will go here
        });
    });

Baris 01 dan 02 mendefinisikan variables "name" dan "menuYloc". Baris 05 menetapkan value dari "menuYloc". Variabele "name" akan digunakan untuk referensi menu mengambang kami. Variabel "menuYloc" akan berisi posisi vertikal asli dari menu kami.

Mari kita lihat bagaimana value dari menuYloc diatur dalam Baris 05. Pernyataan ini adalah contoh dari function-chaining yang powerful dari jQuery. Pertama-tama kita membaca value attribute "top" dari rules CSS element menu kami (yaitu "150px", ditetapkan pada Langkah 2). Kemudian kita melepas string "px" di bagian akhir, karena kita hanya membutuhkan bagian "150". Untuk melakukan ini, function call jQuery .css ("top") pertama-tama menemukan value atribut teratas untuk menu. (Attribute ini diatur dalam Baris 09 dari kode pada Langkah 2, di atas.) Yang menghasilkan pengambilan value "150px". Kemudian function .indexOf () menemukan di mana "px" dalam "150px" dimulai, dan function .substring() memastikan bahwa kami menyimpan semuanya sebelum "px". Function .parseInt() mengubah string "150" menjadi nilai integer numeric.

Langkah 7

Kami sekarang tiba di bagian yang menyenangkan dari tutorial ini: menganimasikan menu untuk membuatnya "mengambang". Untuk melakukan ini, kita perlu menentukan seberapa jauh halaman telah menggulir dalam dimensi pixel. Kami memiliki lokasi menu asli disimpan dalam variabele "menuYloc". Kita perlu offset dari scroll bar, yang bisa kita dapatkan dari perintah $(document).scrollTop(), yang ditentukan dalam plugin jQuery Dimensions. Setelah meraih offset-nya kita bisa menambahkan perintah animate. Baris 07 dan 08, di bawah, berikut kode barunya:

    var name = "#floatMenu";
    var menuYloc = null;
	
    $(document).ready(function(){
        menuYloc = parseInt($(name).css("top").substring(0,$(name).css("top").indexOf("px")))
        $(window).scroll(function () { 
            var offset = menuYloc+$(document).scrollTop()+"px";
            $(name).animate({top:offset},{duration:500,queue:false});
        });
    });

Variable "offset", pada Baris 07 di atas, berisi perbedaan antara lokasi asli menu (menuYloc) dan value dari scroll ($(document).scrollTop()), dalam pengukuran pixel. Untuk membuatnya berjalan sebagai rules CSS, kami menambahkan unit pengukuran yang diperlukan, "px", setelah numeric value-nya. Sekarang kita dapat menerapkan vertical offset, seperti yang telah dikalkulasikan, untuk memposisikan menu tersebut dan membuatnya bergerak.

Agar semuanya terlihat lebih bagus, mari gunakan opsi animasi jQuery. Kami telah menyimpan nama menu dalam variabel "name" dan dapat memanggilnya saat diperlukan, untuk menggunakannya bersamaan dengan function .animate(). Function animate memerlukan dua parameter: (1) properties style, dan (2) animation options. Dalam tutorial ini, kita hanya perlu menghidupkan property CSS "top", tetapi untuk menentukan parameter tambahan yang spesifik, pisahkan setiap property:value dengan koma (,).

Kami menggunakan dua parameter di sini. "Masa" adalah panjang animasi
dalam milliseconds, dan "queue" adalah daftar semua posisi yang kita inginkan objek kita dianimasikan. Karena kami hanya ingin menganimasikan objek kami ke lokasi akhirnya (lokasi scroll browser terakhir), kami menetapkan "queue" ke false.

Kita sekarang harus memiliki menu mengambang yang berfungsi.