Home » CSS » Membuat Menu Navigasi Dengan CSS3

Membuat Menu Navigasi Dengan CSS3

5 May. 201152 comments
Membuat Menu Navigasi Dengan CSS3
css3 menu

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 :

Menu CSS3

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.

Mudah-mudahan artikel tentang Membuat Menu Navigasi Dengan CSS3 ini bisa bermanfaat untuk anda, terima kasih.

Artikel Yang Mungkin Berkaitan :

  1. Cara Mengganti Font Dalam Postingan
  2. CSS3, Sonic Mengejar Bola
  3. Custom CSS Per Post
  4. Membuat Text Gradient Dengan CSS
  5. Tips dan Tricks CSS (Cascading Style Sheets)
  6. Mempercantik Tampilan Code Snippets Dengan CSS
  7. Yesterday, The Beatles
  8. Modifikasi Tampilan Halaman Daftar Isi
  9. Main Remi Bersama Top Komentator
  10. Border Style, Border Width, Border Color
  1. 2-7-2012 at 10:15 | #1

    hadeh…..tutornya gak jelas…di update lagi bro

    Reply

  2. 10-10-2012 at 15:00 | #2

    ko gk ada tutornya yah??

    Reply

  3. 14-3-2014 at 17:04 | #3

    tutor yang lebih jelas,mungkin lebih bisa dimengerti gan

    Reply

  4. 19-3-2014 at 20:47 | #4

    wah, pasti menyebabkan error pada css level 3 ya mas…

    Reply

  5. 31-3-2014 at 15:10 | #5

    mantap gan, terima kasih banyak ya atas ilmunya.. :)

    Reply

  6. 17-1-2015 at 00:04 | #6

    agan alwi bikin postingan yang ngebahas “Eliminate render-blocking JavaScript and CSS in above-the-fold content” please

    Reply

Comment pages
1 3 4 52349
1+8=? (Wajib diisi)