Menu navigasi sebuah website atau Blog memang sangat penting. Apalagi kalau kita bisa membuat navigasi menu kita menjadi lebih menarik. Karena ini akan menjadi daya tarik tersendiri buat Blog atau website kita. Inilah salah satu alasan mengapa setiap web master harus memberikan perhatian khusus untuk menu navigasi atas pada WebSite atau Blog mereka.
Di sini saya berikan koleksi terbaik CSS menu horisontal dengan tutorial konfigurasi penuh untuk kita gunakan. Anda dapat memilih menu dari daftar di bawah dan langsung ke link artikel untuk Instruksi pengguaannya. Menu ini bekerja dengan sempurna hanya pada menu Horisontal dengan menggunakan gambar CSS dan kadang-kadang dengan CSS (JavaScript tidak digunakan untuk menu yang diberikan di sini) jadi anda tidak perlu khawatir tentang JavaScript kalau-kalau dinonaktifkan.
Berikut adalah daftar menu-menu Horisontal cantik tersebut:


Demo: http://www.webdesignerwall.com/demo/advanced-css-menu/
Artikel: http://www.webdesignerwall.com/tutorials/advanced-css-menu/
Download: http://www.webdesignerwall.com/file/advanced-css-menu.zip


Demo : http://azadcreative.com/files/Bulletproof.zip
Artikel : http://azadcreative.com/2009/03/bulletproof-css-sliding-doors/
Download : http://azadcreative.com/files/BulletproofSlidingDoors.psd.zip


Demo : http://insicdesigns.com/demo/css3/exp2/index.html
Artikel : http://blog.insicdesigns.com/2010/02/create-a-slick-menu-using-css3/
Download : (Tidak ada).


Demo : http://s3.amazonaws.com/buildinternet/live-tutorials/css-sprite-menu/css-sprites-nav.html
Artikel : http://buildinternet.com/2010/01/how-to-make-a-css-sprite-powered-menu/
Download : http://s3.amazonaws.com/buildinternet/live-tutorials/css-sprite-menu/css-sprites-nav.zip


Demo : http://www.projectseven.com/tutorials/navigation/auto_hide/workpage.htm
Artikel : http://www.projectseven.com/tutorials/navigation/auto_hide/
Download : http://www.projectseven.com/tutorials/navigation/auto_hide/p7exp.zip


Demo : http://www.skyrocketlabs.com/categories/tutorials/css3-only-horizontal-dropline-tab-menu/demo/index.html
Artikel : http://www.skyrocketlabs.com/articles/css3-only-horizontal-dropline-tab-menu.php
Download : http://www.skyrocketlabs.com/categories/tutorials/css3-only-horizontal-dropline-tab-menu/css3-only-horizontal-dropline-tab-menu.zip


Demo : http://www.gethifi.com/blog/nicer-navigation-with-css-transitions
Artikel : http://www.gethifi.com/blog/nicer-navigation-with-css-transitions
Download : (Tidak ada)


Demo : http://devinrolsen.com/wp-content/themes/typebased/demos/css/css-horizontal-menu/WORKS.php
Artikel : http://www.devinrolsen.com/pure-css-horizontal-menu/
Download : (Tidak ada)


Demo : http://divitodesign.com/dd-articles/horizontal-css-menu/index.html
Artikel : http://divitodesign.com/css/how-to-dropdown-css-menu/
Download : http://www.divitodesign.com/dd-articles/horizontal-css-menu/horizontal-css-menu.rar


Demo : http://www.devinrolsen.com/wp-content/themes/typebased/demos/css/infinite-sub-menu/
Artikel : http://www.devinrolsen.com/pure-css-menu-with-infinite-sub-menus-tutorial/
Download : (Tidak ada)


Demo : http://www.webdesignerwall.com/demo/css3-dropdown-menu/
Artikel : http://www.webdesignerwall.com/tutorials/css3-dropdown-menu/
Download : (Tidak ada)


Demo : http://aext.net/example/elegant-menu-with-css-only/
Artikel : http://aext.net/2009/09/elegant-drop-menu-with-css-only/
Download : http://www.box.net/shared/paoqo8y1lt


Demo : http://www.texaswebdevelopers.com/blog/examples/ddmenu2.asp
Artikel : http://www.texaswebdevelopers.com/blog/template_permalink.asp?id=129
Download : (Tidak ada)


Demo : http://www.jankoatwarpspeed.com/examples/vimeo_navigation/
Artikel : http://www.jankoatwarpspeed.com/post/2009/01/19/Create-Vimeo-like-top-navigation.aspx
Download : http://www.jankoatwarpspeed.com/file.axd?file=2009%2f1%2fvimeo_navigation.zip


Demo : http://aplus.rs/adxmenu/examples/htb/
Artikel : http://aplus.rs/adxmenu/
Download : http://aplus.rs/adxmenu/adxmenu-v4.zip


Demo : http://sperling.com/examples/menuh/
Artikel : http://sperling.com/examples/menuh/
Download : http://sperling.com/examples/menuh/menuh.css


Demo : http://www.howtocreate.co.uk/tutorials/testMenu.html
Artikel : http://www.howtocreate.co.uk/tutorials/testMenu.html
Download : (Tidak ada)


Demo : http://www.jampmark.com/html+css-techniques-demos/pure-css-fish-eye-menu-demo.html#expandDown
Artikel : http://www.jampmark.com/html+css-techniques/pure-css-fish-eye-menu.html
Download : http://www.jampmark.com/downloads/javascript-html-css-codes/pure-css-fish-eye-menu.html


Demo : http://www.cssplay.co.uk/menus/two_points.html
Artikel : http://www.cssplay.co.uk/menus/two_points.html
Download : (Tidak ada)


Demo : http://blog.cameronbaney.com/tutorials/cbdb-menu/demo.html
Artikel : http://blog.cameronbaney.com/tutorials/advanced-css3-menu/
Download : http://blog.cameronbaney.com/tutorials/cbdb-menu/cbdb-menu.zip


Demo : http://www.dynamicdrive.com/style/csslibrary/item/solid_block_menu/
Artikel : http://www.dynamicdrive.com/style/csslibrary/item/solid_block_menu/
Download : http://www.dynamicdrive.com/cssexamples/media/blockdefault.gif
http://www.dynamicdrive.com/cssexamples/media/blockactive.gif


Demo : http://www.dynamicdrive.com/style/csslibrary/item/sleek-pointer-menu/
Artikel : http://www.dynamicdrive.com/style/csslibrary/item/sleek-pointer-menu/
Download : http://www.dynamicdrive.com/cssexamples/media/rightround.gif
http://www.dynamicdrive.com/cssexamples/media/pointer.gif


Demo : http://www.dynamicdrive.com/style/csslibrary/item/sleek-pointer-menu-2/
Artikel : http://www.dynamicdrive.com/style/csslibrary/item/sleek-pointer-menu-2/
Download : http://www.dynamicdrive.com/cssexamples/media/rightround2.gif
http://www.dynamicdrive.com/cssexamples/media/pointer.gif


Demo : http://line25.com/wp-content/uploads/2009/css-menu/demo/demo.html
Artikel : http://line25.com/tutorials/how-to-create-a-css-menu-using-image-sprites
Download : http://line25.com/wp-content/uploads/2009/css-menu/demo/awesome-menu.zip


Demo : http://www.ehousestudio.com/assets/downloads/sprite/
Artikel : http://www.ehousestudio.com/blog/view/css_sprite_navigation_tutorial
Download : http://www.ehousestudio.com/assets/downloads/sprite.zip


Demo : http://www.tutorialsphere.com/homemade/uploads/2009/02/css-overlapping-tabs-menu.html
Artikel : http://www.tutorialsphere.com/homemade/2009/02/18/css-overlapping-tabs-menu
Download : http://www.tutorialsphere.com/homemade/uploads/2009/02/tabs.gif


Demo : (Tidak ada)
Artikel : http://www.jacorre.com/design/cssnavmenus.htm
Download : (Tidak ada)


Demo : http://zubeta.com/demo-menu.html
Artikel : http://zubeta.com/css3-menu-demo.html
Download : (Tidak ada)


Demo : http://www.james-blogs.com/wp-content/tutorials/glassy-nav-tabs/
Artikel : http://www.james-blogs.com/2009/01/07/creating-a-glassy-non-div-navigation-bar/
Download : http://www.james-blogs.com/wp-content/tutorials/glassy-nav-tabs/nav-tab-bg.png


Demo : http://24ways.org/examples/centered-tabs-with-css/final.html
Artikel : http://24ways.org/2005/centered-tabs-with-css
Download :(Tidak ada)


Demo : http://westciv.com/style_master/blog/apples-navigation-bar-using-only-css
Artikel : http://westciv.com/style_master/blog/apples-navigation-bar-using-only-css
Download : (Tidak ada)


Demo : http://www.dynamicdrive.com/style/csslibrary/item/animated_horizontal_tabs/
Artikel : http://www.dynamicdrive.com/style/csslibrary/item/animated_horizontal_tabs/
Download : http://www.dynamicdrive.com/cssexamples/media/tab-blue-right.gif
http://www.dynamicdrive.com/cssexamples/media/tab-blue-left.gif


Demo : http://www.cssplay.co.uk/menus/listnine.html
Artikel : http://www.cssplay.co.uk/menus/tutorial.html
Download : (Tidak ada)

Itu tadi daftar menu-menu navigasi Horisontal yang cukup bagus untuk kita terapkan di Blog atau Website kita.
Selamat berkarya semoga berhasil dan bermanfaat.