Membuat Menu Navigation Diam di Tempat

By HP Yitno

Apa kabar sobat blogger?
Tampilan situs yang enak dipandang mata dan loading yang ringan merupakan dambaan setiap orang. Buat apa tampilan bagus kalau loadingnya lama. Pengunjung akan segera meninggalkan website kamu tanpa membaca artikel di dalamnya. Dan itu merupakan suatu kerugian yang besar. Sebaliknya loading ringan tapi tampilannya terlihat acak-acakan juga bisa membuat pengunjung bosan dan nggak betah bertahan lama-lama di situs kamu. Jadi keduanya harus dipertimbangkan bagi pemilik situs atau blog.

Salah satu cara agar pengunjung betah berada di homepage kamu adalah dengan menyediakan menu navigation yang memuat artikel-artikel terbaik atau populer. Sayangnya menu navigasi yang beredar di beberapa blog tutorial cukup memberatkan loading blog. Beberapa  script yang telah ane uji coba adalah kepunyaannya M. Suteja. Kecepatan buka blogku yang semula sekitar satu detik menjadi empat detik ketika ane pasangin script tersebut. Itupun menunya masih dibawah header dan belum ane buat melayang. Tapi kita patut berterima kasih pada beliau karena telah bersedia membagi ilmunya secara gratis.

Dari situ muncul gagasan untuk menyederhanakan script yang ada dengan mempelajari susunan utama dan menghilangkan hal yang tidak berguna. Memang sekarang sudah ada software atau situs online yang bisa menyingkat css, tapi ane nggak mau menggunakannya. Kalau saya melakukan hal tersebut, maka selamanya ane nggak akan pernah bisa bahasa "cascading style sheet" dan itu sama saja membunuh pikiranku.

Dan berikut script hasil adaptasi yang telah ane modifikasi dan ane sederhanakan. Jangan khawatir, nanti akan ane jelaskan bagian-bagian terpenting sehingga teman-teman bisa mendesain sesuai selera.

<style type="text/css">
#search {float:right; padding:4px; display:inline;}
#fixed {position:fixed; top:0; left:2%; width:96%; height:33px; background:blue; font-size:13px; font-family:Comic Sans Ms; color:white; font-weight:bold; border-bottom:3px solid #111; box-shadow:0 0 5px white; -moz-box-shadow:0 0 5px white; -webkit-box-shadow:0 0 5px white; -khtml-box-shadow:0 0 5px white;}
#menu {margin:opx; padding:0px;}
#menu ul, #menu li {float:left; list-style:none; margin:0px; padding:0px;}
#menu li a, #menu li a:link, #menu li a:visited {color:#fae7df; display:block; margin:0px; padding:9px 10px;}
#menu li a:hover, #menu li a:active{background:purple; color:#fff; margin:0px; padding:9px 10px; text-decoration:none;}
#menu li li a, #menu li li a:link, #menu li li a:visited {background:#ED4A05; width:150px; color:#fae7df; font-family:sans-serif; margin:0px; padding:9px 10px; border:1px solid #FF7800;}
#menu li li a:hover, #menu li li a:active {background:purple; color:#fff; padding:9px 10px;}
#menu li ul {z-index:9999; position:absolute; left:-999em; height:33px; width:170px; margin:0px; padding:0px;}
#menu li ul a {width:140px;}
#menu li ul ul {margin:-34px 0 0 170px;}
#menu li:hover ul ul, #menu li:hover ul ul ul, #menu li.sfhover ul ul, #menu li.sfhover ul ul ul {left:-999em;}
#menu li:hover ul, #menu li li:hover ul, #menu li li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul, #menu li li li.sfhover ul{left:auto;}
#menu li:hover, #menu li.sfhover{position:static;}
</style>

<div id="fixed">
 <div id="search">
  <form action="/search" method="get">
  <input name="q" placeholder="cari apa kawan...?" size="23" style="font-size: 14px;" type="text" />
  <input style="font-size:14px;" type="submit" value="search" />
  </form>
 </div>
   <div id="menu">
     <ul>
      <li><a href="http://hp-yitno.blogspot.com/">Home</a></li>
      <li><a href="alamat url kamu">Bisnis</a>
        <ul class="children">
          <li><a href="alamat url kamu">Bisnis Cloap</a></li>
          <li><a href="alamat url kamu">Panduan Cloap</a></li>
          <li><a href="alamat url kamu">Pay Per Click</a></li>
          <li><a href="alamat url kamu">Paid To Click</a></li>
        </ul>
      </li>
      <li><a href="alamat url kamu">Motivation</a></li>
      <li><a href="alamat url kamu">Tips and Trick</a></li>
      <li><a href="alamat url kamu">Corat-Coret</a></li>
      <li><a href="alamat url kamu">Download</a></li>
      <li><a href="alamat url kamu">Cerita Kehidupan</a></li>
      <li><a href="http://websitemini.blogspot.com">Web Mini</a></li>
     </ul>
   </div>
</div>

Dan ini screenshotnya:



Nah cara pasangnya sebagai berikut:
1. Login ke www.blogger.com
2. Pada dashboard Blogspot, kamu klik gambar roda gigi dan pilih tata letak
3. Scroll atau geser ke bawah dan klik add a gadget (tambahkan gadget)
4. Pilih HTML / JAVASCRIPT
5. Copy paste atau salin kode diatas ke dalamnya
6. Klik simpan atau save
7. Drag atau tarik widget HTML/JAVASCRIPT yang telah tersimpan ke posisi yang paling bawah dari tata letak tersebut
8. Simpan setelan dan lihat hasilnya

Sekarang penjelasan dan fungsi masing-masing item:
1. Perhatikan kode #fixed{...}

a. position:fixed;  berfungsi memberi efek melayang atau floating (diam di tempat)
b. position:absolute;  berfungsi membuat menu tetap berada diatas sebuah web. Dengan memakai attribute ini, kita bisa menjadikan menu sederhana ini sebagai menu pengganti navbar.
c. top:opx;  berguna untuk mengatur posisi terhadap garis atas (pixel atau %)
d. left:2%;  berguna untuk mengatur jarak menu dengan garis sebelah kiri (pixel atau %)
e. width:96%;  bertujuan untuk mengatur panjangnya menu (pixel atau %)
f. height:33px;  berfungsi mengatur tinggi menu utama (pixel atau %)
g. font-size:13px;  berfungsi untuk memperbesar atau memperkecil tulisan (pixel)
h. font-family:Comic Sans Ms;  untuk mengubah jenis tulisan (silahkan sesuaikan)
i. background:blue;  untuk merubah warna latar belakang (warna bahasa inggris)
j. background-image:url(isi dengan alamat url gambar kamu);  jika ingin menggunakan gambar sebagai background.
k. repeat-x;  untuk pengulangan gambar sesuai sumbu x
l. repeat-y;  untuk pengulangan gambar sesuai sumbu y
m. color:white;  untuk mengatur warna huruf (bahasa inggris atau kode warna)
n. border:1px solid green;  untuk memberi border di sekeliling menu
o. box-shadow: 0 0 5px white;  berguna untuk memberi efek bayangan
p. Jika ingin meletakkannya dibawah header, hilangkan perintah position:fixed; atau position:absolute; dan geser atau drag ke tempat widget yang berada tepat dibawah header.
q. display:inline; berguna untuk mengatur menu search engine berada dalam satu baris.

2. Perhatikan #menu {...}

a. margin:0px; dan padding:0px;  fungsinya hampir mirip yaitu mengatur jarak dengan garis tepi.

3. Perhatikan #menu ul, #menu li {...}

a. float:left;  bertujuan agar unordered list dan list item tidak turun ke bawah. Kalian bisa menghilangkan float:left; jika ingin membuat menu di sidebar.
b. list-style:none;  berguna untuk menghilangkan simbol yang dihasilkan list item
c. margin:0px; dan padding:0px;  bertujuan agar list item menjorok ke dalam
d. Karena menu ul dan menu li memiliki perintah yang sama, maka bisa kita gabungkan dengan memberi tanda koma (,)

4. Perhatikan #menu li a, #menu li a:link, #menu li a:visited {...}

a. Untuk mengatur perilaku link setelah dan sebelum dikunjungi (saya gabungkan saja karena saya buat sama)
b. color:#fae7df;  untuk mengatur warna tulisan link
c. display:block;  bertujuan untuk mengeblok satu item itu saja. Jadi tidak mengganggu elemen lainnya. Jadi kesannya berdiri sendiri.

5. Perhatikan #menu li a:hover, #menu li a:active {...}

a. a:hover berfungsi untuk mengatur perilaku link ketika mouse berada diatasnya
b. a:active berfungsi untuk mengatur perilaku link yang aktif
c. text-decoration:none; berfungsi untuk menghilangkan garis bawah yang biasanya muncul pada sebuah link

6. Perhatikan #menu li li a, #menu li li a:link, #menu li li a:visited {...}

a. Berfungsi untuk mengatur link yang berada dibawah link utama.
b. Jika ingin dibuat sama, gabungkan saja dengan yang nomor 4 diatas. Pisahkan dengan tanda koma (,)

7. Perhatikan #menu li li a:hover, #menu li li a:active {...}

a. Berguna untuk mengatur perilaku link dibawah link utama ketika mouse berada diatasnya.
b. Jika ingin dibuat sama, gabungkan dengan yang nomor 5 diatas. Jangan lupa pisahkan dengan tanda koma (,)

8. Perhatikan #menu li ul {...}

a. Inilah yang mengatur link children turun ke bawah secara sejajar
b. z-index:9999; dan position:absolute; left:-999em (silahkan dirubah nilainya untuk mengetahui fungsinya)

9. Untuk attribute li.sfhover dan yang lain, masih belum mengerti fungsinya secara jelas. Tapi beberapa menyebutkan kalau fungsinya adalah membentuk garis lengkung atau sudut lengkung.
10. Untuk membuat beberapa anak item, salin kode <ul class="childreen">...</ul> dan tempelkan diantara kode <li>...</li>
11. Kode <div id="search">...</div> merupakan kode menu pencarian, sobat bisa menghilangkannya jika tidak ingin memakainya.

Silahkan di edit sesuai selera anda. Semoga berhasil ya kawan \(^_^)/

SHARE :