Membuat Menu Navigasi Dengan CSS3

sumber gambar : http://css3menu.com

Membuat Menu Navigasi Dengan CSS3. Salah satu kelebihan WordPress adalah banyaknya para pengembang atau developer pihak ke 3 yang menyediakan theme-theme pilihan yang sangat menawan, free download, SEO friendly dan seterusnya. Jika masih tidak puas dengan tampilan yang ada, kita masih tetap leluasa untuk mencustom atau mendesign ulang sesuai selera penggunanya.

Salah satu bagian atau elemen yang cukup penting, baik untuk pembaca (manusia) maupun untuk mesin pencari yaitu adanya menu navigasi. Dengan adanya menu navigasi yang baik akan memudahkan pengunjung dan mesin pencari untuk menelusuri blog anda dengan leluasa.

Membuat menu navigasi sebenarnya sangat mudah, namun demikian dalam pembuatannya tidak boleh asal-asalan, harus diperhatikan juga validasi dari struktur kode HTML yang digunakan agar lebih search engine friendly, dan pengaturan (CSS) dari sisi tampilan atau design agar lebih human friendly.

Untuk yang sudah mahir CSS khususnya CSS3, membuat menu navigasi dengan tampilan yang menawan adalah sesuatu hal yang mudah. Namun bagi yang belum mahir,  membuat menu navigasi dengan CSS3 mungkin akan bikin pusing tujuh keliling heeee .. Tapi jangan khawatir, web berikut ini akan membimbing anda supaya mahir dan bisa membuat menu navigasi dengan CSS3. Silahkan berkunjung ke website ini http://css3menu.com. Di sana banyak sekali berbagai menu navigasi yang bisa anda gunakan.

Beberapa fitur yang ditawarkan antara lain :

• No Javascript, tanpa menggunakan javascript sehingga loadingnya lebih ringan.
• Cool CSS3 properties, multi-level dropdown menu menggunakan CSS3 rounded corners, CSS3 shadow (box-shadow dan text-shadow). Opacity, background dan font colors, linear gradient, radial CSS3 dll.
• Multicolumn submenus.
• SEO friendly.
• 100% CSS designs.
• Small size, ukurannya sangat kecil.
• Browser support, bisa tampil dengan baik di browser terkini kecuali IE6.
• GUI interface, anda bebas bereksperiment dengan menu-menu yang ada dan bisa anda custom sesuai selera.

Setelah melakukan eksperimen beberapa kali akhirnya saya berhasil membuat custom menu navigasi di blog ini (halaman home) menggunakan CSS3 yakni dengan memasukkan gradient CSS dan transition-property. Namun sayangnya efek gradient-nya tidak bisa ditampilkan di IE8 ke bawah dan Opera.

Menu navigasi yang saya buat sengaja tanpa menggunakan gambar, tujuannya untuk memangkas jumlah http request dan untuk meminimalkan ukuran halaman sehingga loadinganya akan ringan. Teknik ini merupakan salah satu cara yang saya gunakan untuk mempercepat loading blog ini.

Di bawah ini contoh kode CSS3 yang saya gunakan untuk membuat menu navigasi di blog ini (halaman home) :

#navigation
{ background:#aaa7a7;
  border-bottom:2px solid #909098;
  background:-webkit-gradient(linear,left top,left bottom,from(rgb(168,168,168)),to(rgb(69,69,69)));
  background:-moz-linear-gradient(top,rgb(168,168,168),rgb(79,79,79)); }

#menus li
{ margin-top:0;
  border-right:1px solid rgba(79,77,78,1);
  list-style:none;
  cursor:pointer;
  float:left;
  text-align:center;
  background:-webkit-gradient(radial,50% 100%,10,50% 50%,90,from(rgba(31,169,244,1)),to(rgba(0,28,78,1)));
  background:-moz-radial-gradient(center 80px 45deg,circle cover,rgba(31,169,244,1) 50%,rgba(0,28,78,1) 110%); }

#menus li > a
{ float:center;
  text-decoration:none;
  color:#000;
  display:block;
  padding:0 20px;
  border-left:1px solid rgba(255,255,255,0.1);
  border-right:1px solid #79797d;
  text-align:center;
  text-shadow:0 1px 1px rgba(255,255,255,0.4);
  line-height:33px;
  font-size:12px;
  font-weight:700;
  background:-webkit-gradient(linear,left center,right center,from(rgb(168,168,168)),to(rgb(69,69,69)));
  background:-moz-linear-gradient(left,rgba(168,168,168,1),rgba(69,69,69,1)); }

#menus li >a:hover,#menus li a.current
{ background-color:rgb(113,113,113);
  background:-webkit-gradient(linear,left center,right center,from(rgba(16,151,225,1)),to(rgba(10,25,55,1)));
  background:-moz-linear-gradient(left,rgba(31,169,244,1),rgba(17,42,91,1));
  padding:0 20px;
  -webkit-transition-property:background;
  -webkit-transition-duration:800ms;
  -moz-transition-property:background;
  -moz-transition-duration:800ms;
  -o-transition-property:background;
  -o-transition-duration:800ms; }

Hasilnya kurang lebih seperti gambar di bawah ini :

Di samping menu navigasi untuk halaman, saya juga memodifikasi tampilan Search Box dengan CSS3, yang tadinya menggunakan gambar sekarang murni hanya menggunakan CSS3. Dengan cara ini pula penggunaan gambar di halaman depan (home) berhasil saya kurangi (mengurangi jumlah http request) sehingga untuk halaman home total hanya menggunakan 3 buah http (1 file html, 1 file gambar dan 1 file CSS). Berikut ini kode CSS yang saya gunakan :

#searchbox
{ background:#bdbbbb;
  display:block;
  float:right;
  height:17px;
  margin-right:10px!important;
  margin-top:4px;
  margin-bottom:4px;
  padding:2px 2px;
  width:205px;
  border:2px solid #666;
  border-radius:4px;
  -moz-border-radius:4px;
  -webkit-border-radius:4px; }

#searchbox .textfield
{ background:none;
  border:0;
  float:left;
  margin-right:2px;
  padding-left:2px;
  width:143px; }

#searchbox .button
{ color:#070707;
  font-weight:bold;
  background:#666;
  border:0;
  cursor:pointer;
  float:right;
  width:58px;
  height:19px;
  margin:-1px -1px -1px 0;
  border-radius:0 4px 4px 0;
  -moz-border-radius:0 4px 4px 0;
  -webkit-border-radius:0 4px 4px 0;
  padding-bottom:4px;
  text-shadow:0 1px 1px rgba(255,255,255,0.4);
  box-shadow:-2px -2px 2px rgba(0,0,0,.25) inset,1px 1px 2px #979393 inset;
  -moz-box-shadow:-2px -2px 2px rgba(0,0,0,.25) inset,1px 1px 2px #979393 inset;
  -webkit-box-shadow:-2px -2px 2px rgba(0,0,0,.25) inset,1px 1px 2px #979393 inset; }

Catatan :
Dampak dari pembuatan menu navigasi dengan CSS3 mungkin akan mengakibatkan blog menjadi tidak valid CSS, tapi sepanjang penulisan kodenya sesuai dengan kaidah-kaidah dalam penulisan kode CSS3 barangkali tidak terlalu menjadi problem dalam hal SEO (CMIIW), apalagi CSS3 sebenarnya belum menjadi standar baku untuk semua browser. Tiap browser masih berbeda-beda dalam penulisan kodenya. Tapi akan lebih baik jika blog bisa valid CSS.

Dulu saya termasuk penganut blog harus valid CSS sehingga saat itu saya tidak berani menerapkan CSS3 di blog ini, kalaupun kemudian berani mengambil keputusan menerapkan CSS3 di blog ini karena saat itu saya punya cara atau trick khusus sehingga meskipun saya memakai semua fitur yang ada di CSS3, blog ini tetap valid CSS.

Namun sayangnya The W3C CSS Validation Service yang biasa dipakai untuk menvalidasi CSS, nampaknya saat ini menggunakan standar baru dalam melakukan validasi sebuah website/blog, walhasil blog ini saat ini menjadi tidak valid CSS walapun saya sudah memakai trick khusus tersebut. Tapi itu tidak menjadi persoalan bagi saya setidaknya untuk saat ini (*), karena SEO-nya bisa tetap melaju dengan kencang, sekencang loading blog ini.

(*) sambil menunggu cara lain untuk membuat blog menjadi valid CSS3.