Cara Membuat Floating Menu di Website

Selasa, Februari 18, 2014

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.

You Might Also Like

6 comments

  1. nggak paham maksud 'nilai index' mas :-?

    BalasHapus
    Balasan
    1. nilai index seperti layer wek, semakin tinggi / besar nilainya berarti dia berada di layer teratas. sedangkan jika nilainya semakin kecil dia berada pada layer bawah

      Hapus
    2. seperti layer gitu ya om?

      Hapus
    3. ya, kurang lebih seperti layer gitu. hehe

      Hapus
  2. buat active + hovernya gmn mas?
    kok gak ada?

    BalasHapus
    Balasan
    1. pada tulisan ini fokus pada pembuatan floating menunya. Untuk active + hover mungkin lain kali saya tuliskan :D

      Hapus

Komentar spam enggak bakal aku approve lho. Gunakan nama asli bukan keyword :p

Facebook

Subscribe