Pada tulisan ini, saya ingin mengulas sedikit tentang menu yang berada pada bagian atas halaman MMBFest tersebut. Menu tersebut mengikuti navigasi yang kita miliki. Ketika kita scrolling ke bawah, menu tersebut akan tetap mengikuti kita. Ada beberapa istilah yang pernah saya dengar untuk menu seperti ini, yaitu floating menu dan fixed menu. Mungkin ada yang mau nambahin istilahnya?
Pada tulisan ini saya mau share hasil saya bermain-main dengan css untuk membuat fixed / floating menu dengan studi kasus pada halaman MMBFest. Berikut langkah-langkah yang saya lakukan dalam membuat floating menu tersebut
Membuat List Menu
<ul> <li>MMBFEST</li> <li>Competition</li> <li>League</li> <li>MMB Heritage</li> <li>Sponsor</li> <li>Facebook</li> <li>Twitter</li> </ul>
Apabila kode diatas ditampilkan hasilnya kurang lebih akan tampak seperti gambar di bawah ini
 |
| menu awal |
Lho kok jelek? Secara default tampilan tag ul memang seperti itu, sekarang tambahkan kode css supaya lebih bagus tampilannya. Berikut kode css yang saya sisipkan di bagian tag head file html
<html>
<head>
<title>Belajar Membuat Floating Menu</title>
<style>
#menu li {
display:inline-block;
color: #fff;
float:left;
height:100%;
padding: 15px 20px;
}
#menu{
position:fixed;
top:0;
left:0;
height: 50px;
z-index: 70;
width: 100%;
padding:0;
margin:0;
background: rgba(0,0,0, 0.8);
text-transform:uppercase;
font-family: 'Open Sans', sans serif;
box-shadow: 0px 3px #FF8540;
}
</style>
</head>
<body>
<ul id="menu">
<li>MMBFEST</li>
<li>Competition</li>
<li>League</li>
<li>MMB Heritage</li>
<li>Sponsor</li>
<li>Facebook</li>
<li>Twitter</li>
</ul>
</body>
</html>
Setelah file html tersebut jadi, maka tampilan menumu akan tampak seperti gambar di bawah ini
Bagaimana? Lebih bagus bukan dari yang sebelumnya? Isi halaman tersebut dengan konten yang banyak, sehingga muncul tanda scrolliong pada browser. Coba scroll halaman tersebut. InsyaAllah menu yang sudah kamu buat bisa tetap berada di atas. Kok bisa?
Saya akan coba jelaskan bagian-bagian yang menyebabkan menu tersebut tetap berada pada bagian atas, sehingga kamu bisa implementasikan floating menu ini di website yang kamu miliki.
Penjelasan Singkat
position:fixed
Merupakan elemen terpenting dalam floating menu, oleh karena itu sebagian orang menyebutnya sebagai fixed menu. Dengan posisi #menu yang fixed ini, posisinya akan sesuai dengan jendela browser. Sehingga apabila kamu melakukan scrolling maka posisinya akan tetap diatas.
Dengan menggunakan property fixed pada position, kamu perlu mengatur posisi id yang sudah dibuat. Untuk mengatur posisinya kamu bisa menggunakan css property top, right, left maupun bottom. Pada css yang saya gunakan, saya hanya menggunakan property top dan left. Itu sudah cukup untuk mewakili posisi diatas dan disamping.
Oh iya, jangan lupa untuk menambahkan tag z-index dan berikan nilai yang cukup tinggi. Hal ini perlu dilakukan supaya floating menu / fixed menu yang sudah kamu buat tetap berada di bagian teratas. Karena apabila berada pada bagian bawah, maka menu ini bisa saja tertutup oleh gambar, tulisan maupun div lain yang memiliki nilai index lebih tinggi.
Contoh diatas hanyalah list, belum ada menunya. Silakan tambahkan link sendiri pada masing-masing list supaya ketika di klik menuju halaman lain. Pada tulisan ini saya fokus pada pembuatan floating / fixed menunya. Bukan konten menunya.
Semoga cara membuat floating menu di website ini bisa membantu teman-teman untuk mengembangkan website jadi lebih baik dan menarik. Jangan lupa bagikan halaman ini ke teman-temanmu siapa tahu mereka membutuhkan tutorial ini. Jika ada yang ditanyakan tidak perlu sungkan untuk menayakan melalui kolom komentar.
Leave a Comment