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.
makasih infonya membantu sekali :-)
BalasHapus