10 Tutorial Membuat Menu Dengan CSS

Menu adalah elemen penting pada sebuah website.  Menu adalah petunjuk bagi pengunjung untuk menjelajah dan menemukan hal yang dicarinya pada sebuah website. Dengan CSS kita bisa membuat menu menjadi lebih menarik, dan lebih menyatu dengan keseluruhan desain website.

Ada beberapa cara membuat menu navigasi dengan menggunakan CSS. Kami mencoba merangkum beberapa tutorial membuat menu dengan menggunakan CSS

1. Turning List into Navigation.

CSS Menu Navigation

Tutorial ini sangat berguna. Kita akan belajar bagaimana mengubah CSS List menjadi Menu Bar. Dan yang menarik adalah dengan dasar ini kita bisa membuat menu bar pada CMS seperti wordpress, joomla, dan sebagainya, karena biasanya CMS meng-generate menu dalam bentuk list. Tutorial lengkapnya ada disini.

2. Advance Menu CSS

Tutorial membuat menu dengan CSS

Ilustrasi atau image juga bisa menjadi menu navigasi yang menarik, pada tutorial ini  kita akan belajar bagaimana tekniknya. Tutorial selengkapnya bisa dilihat disini.

3. Advanced CSS menu Trick

Tutorial Menu navigasi Blur

Tutorial ini mengajarkan bagaimana membuat menu navigasi dengan efek blur.  Selengkapnya bisa dilihat disini.

4. Javascript Dropdown menu with multilevels

Dropdown menu dengan javascript

Tutorial ini mengajarkan bagaimana membuat dropdown menu dengan CSS dan javascript. Cocok bagi yang ingin belajar kombinasi CSS dengan Javascript. Tutorial selengkapnya bisa dilihat disini.

5. Dropdown menu with jquery and CSS

Jquery dropdown menu

Implementasi Jquery dan CSS untuk membuat Dropdown menu yang cantik . Selengkapnya ada disini.

6. CSS Sprites navigation tutorial

CSS Sprite menu

Tutorial ini menggunakan CSS Sprite untuk membuat menu, ini adalah teknik yang perlu untuk dipelajari. Tutorial selengkapnya ada disini.

7. CSS dock menu

Tutorial menu CSS

Tutorial ini mengajarkan bagaimana membuat menu navigasi ala Mac. Dengan sedikit efek animasi, kita bisa mempercantik website tanpa harus menggunakan flash. Tutorial selengkapnya bisa didapat disini.

8.  TAB menu navigation

Tutorial Tab menu

Tutorial ini mengajarkan bagaimana membuat TAB menu dengan CSS dan Javascript. Teknik ini sangat berguna dan perlu dipelajari, karena banyak manfaat dari TAB menu pada website, dan mungkin suatu saat kita akan membutuhkannya. Tutorial selengkapnya bisa dilihat disini.

9. Matte CSS menu

Tutorial CSS menu Navigation

Satu lagi tutorial membuat menubar dengan CSS. Tutorial dasar ini layak untuk dipelajari, dan faktanya menu yang sederhana seperti ini cocok sekali untuk website dengan desain yang simple. Tutorial selengkapnya bisa dilihat disini.

10.  CSS menu map

Tutorial CSS menu map

Salah satu implementasi CSS yang kreatif. Alih-alih berbentuk menubar, tutorial ini membahas bagaimana membuat navigasi dalam bentuk lain. Tutorial selengkapnya ada disini.

Komentar

  1. Dhanang arfian
    on Juni 19th, 2010

    wah… ini dia yang saya cari……

  2. jay
    on September 17th, 2010

    mas thank u

  3. dika
    on Oktober 30th, 2010

    wuih, thanks berat nih om, tapi kalo di pasang di blog bisa kan?

  4. Ztro
    on Januari 2nd, 2011

    Mangstabb gan…. ijin sedott yaaaa…. :P

  5. awitara
    on Januari 16th, 2011

    wah keren nehhh

  6. milannerz
    on Pebruari 25th, 2011

    kebanyakan tutornya dalam bahasa inggris nih hohoho

  7. amrew
    on Maret 22nd, 2011

    waw…keren…thanx nih…

  8. ayahya
    on April 3rd, 2011

    baru lihat koleksi light menu yang lengkap ini~ yogya memang idenya yang keren-keren~ terimakasih banyak untuk sharingnya~

  9. resim upload
    on April 4th, 2011

    I love your writing style genuinely loving this internet site .

  10. Fikri
    on April 11th, 2011

    wah mantap, terimakasih

  11. rofiek
    on Juni 10th, 2011

    makasih bro buat tutorial nya..nice…!

  12. aditya
    on Juni 24th, 2011

    thankyou ya,dah ngasih pelajaran yang berharga

  13. Miftah
    on Juli 25th, 2011

    weeedann men.. thanks banget nich gan… sumber yang sangat bermanfaat.. :D

  14. evin
    on Juli 27th, 2011

    muantaf boss akan di coba mudah mudahan berhasilllll

  15. Niken
    on Oktober 18th, 2011

    I like it…^^

  16. AgoL
    on Oktober 19th, 2011

    Wah, Mantabs untuk menambah design WEB ku … Terima Kasih . . .

  17. Laras Mays
    on November 11th, 2011

    Makasih infonya kawan,ane lansung coba yach,mudah-mudahan berhasil.Salam kenal and Happy blogging.

  18. sekedarwawasan
    on Desember 10th, 2011

    wah…..keren2….ane coba ah…

  19. edi
    on Desember 15th, 2011

    thanks for the knowledge is helpful, silahka visit my blog too.

  20. Rahmat Hidayat
    on Desember 29th, 2011

    Thank’s :D

  21. rudy hartono
    on Januari 2nd, 2012

    thanks infonya

  22. Yoga okl3
    on Januari 17th, 2012

    Mancapppp!!!!!!!!!!!!!!!!!!!!!!!!!!<3

  23. dinasthi
    on Januari 23rd, 2012

    alhamdulillah ketemu juga. makasih buat yang punya blog ini, menyajikan dengan sebenar-benarnya menyajikan untuk yang mencari tutorial.. terus berbagi dan mencerdaskan

  24. jagooweb
    on Maret 16th, 2012

    keren gan info nya. makasih byk

  25. Ratih
    on Mei 1st, 2012

    waahhh.. keren keren cssnya..
    terimakasih..

  26. qw
    on Mei 21st, 2012

    sip

  27. simplyfresh
    on Mei 29th, 2012

    wah mantap gan ijin belajar yah,, matur nuwun

  28. jasa pembuatan website murah
    on September 2nd, 2012

    very good blog posting, i like it. waiting for new article.

Beri Komentar