30 menu Horisontal dengan CSS

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:

Advanced CSS Menu

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

Bulletproof CSS Sliding Doors

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

Create a Slick Menu using CSS3

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).

How to Make a CSS Sprite Powered Menu

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

CSS Express Drop-Down Menus

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

CSS3-only horizontal drop line tab menu

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

Nicer Navigation with CSS Transitions

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)

Pure CSS Horizontal Menu

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)

DropDown CSS Menu

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

Pure CSS Menu With Infinite Sub Menus Tutorial

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)

CSS3 Dropdown Menu

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

Elegant Drop Menu with CSS Only

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

CSS dropdown menu without javascripting or hacks

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

Create Vimeo-like top navigation

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

ADxMenu

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

A Great CSS Horizontal Drop-Down Menu

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

CSS menus

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

Pure CSS Fish Eye Menu

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

A centered menu with gradient and two pointers

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

Create an Advanced CSS3 Menu

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

Solid Block Menu

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

Sleek Pointer Menu

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

Sleek Pointer Menu 2

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

How to Create a CSS Menu Using Image Sprites

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

CSS Sprite Navigation Tutorial

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

CSS Overlapping Tabs Menu

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

CSS Navigation Menus

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

CSS3 Chunky Menu

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

Creating a glassy non div navigation bar

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

Centered Tabs with CSS

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

Apple’s Navigation bar using only CSS

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)

Animated horizontal tabs

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

A Horizontal Button Menu - The Easy Way

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.