panduaji

Kategori: Uncategorized

Cara Membuat Floating Menu di Website

Diperbarui:

Sebagai bagian dari komitmen kami terhadap transparansi, beberapa link di situs kami adalah link afiliasi. Artinya, tanpa biaya tambahan untuk Anda, kami mungkin mendapatkan komisi jika Anda memutuskan untuk melakukan pembelian melalui link tersebut. Komisi ini membantu kami membiayai keberlangsungan blog ini.

Beberapa waktu lalu saya mencoba membuat sebuah website yang terdiri dari sebuah file html, kalau tidak salah istilah kerennya one page website. Saya menggunakan beberapa campuran jquery untuk menghasilkan sebuah website yang bisa dilihat pada halaman MMBFest.

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

Pertama-tama saya membuat list menu dengan tag html ul yang berarti unordered list. Sebuah tag html yang digunakan untuk menampilkan list tanpa nomor yang secara default berupa bulatan. Sedangkan di dalamnya ditambahkan tag li untuk masing-masing listnya. Berikut penampakan kode htmlnya
<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
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

Floating Menu Tutorial

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.

Shopee Lovember

9 thoughts on “Cara Membuat Floating Menu di Website”

    • pada tulisan ini fokus pada pembuatan floating menunya. Untuk active + hover mungkin lain kali saya tuliskan 😀

      Reply
  1. Makasih Masbroh…. saya lg belajar kembali css hehehehe…. lg cari2 floating menu… ehhh dapet di blognya mas pandu.
    sukses mas, God Blessssssssss

    Reply

Leave a Comment