Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / Blogger Tutorial

Cara buat Menu navigasi Drop-Down Horisontal

Oleh AFTER3030 Posting Komentar
Menu navigasi berfungsi sangat penting untuk website atau blog. Selain memberikan daya tarik lebih  pada website atau blog. Tapi sangat berguna untuk menavigasi atau memberi petunjuk pada pengunjung untuk memudahkan menelusuri dan melihat seluruh isi yang ada pada website atau blog anda. Ada beberapa bentuk menu navigasi, diantaranya vertikal dan horisontal. Dan keduanya mempunyai fungsi yang sama.

Kali ini saya menampilkan bermacam-macam koleksi menu navigasi Horisontal  yang saya dapat dari Blogger Tips And Tricks. Dan anda bisa membuat dan memiliki menu-menu ini sesuai selera anda. Anda tinggal lihat demonya, baca artikel panduannya, dan coba untuk membuat.



Langsung saja berikut koleksi menu navigasi Drop-Down Horisontal :



1. Advanced CSS Menu



Demo : http://www.webdesignerwall.com/demo/advanced-css-menu/

Article : http://www.webdesignerwall.com/tutorials/advanced-css-menu/

Download : http://www.webdesignerwall.com/file/advanced-css-menu.zip





2.  Bulletproof CSS Sliding Doors



Demo : http://azadcreative.com/files/Bulletproof.zip

Article : http://azadcreative.com/2009/03/bulletproof-css-sliding-doors/

Download : http://azadcreative.com/files/BulletproofSlidingDoors.psd.zip





3.  How to Make a CSS Sprite Powered Menu



Demo : http://s3.amazonaws.com/buildinternet/live-tutorials/css-sprite-menu/css-sprites-nav.html

Article : 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





4.  CSS Express Drop-Down Menus



Demo : http://www.projectseven.com/tutorials/navigation/auto_hide/workpage.htm

Article : http://www.projectseven.com/tutorials/navigation/auto_hide/

Download : http://www.projectseven.com/tutorials/navigation/auto_hide/p7exp.zip





5.  CSS3-only horizontal drop line tab menu



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

Article : 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





6.  Nicer Navigation with CSS Transitions



Demo : http://www.gethifi.com/blog/nicer-navigation-with-css-transitions

Article : http://www.gethifi.com/blog/nicer-navigation-with-css-transitions







7.  Pure CSS Horizontal Menu



Demo : http://devinrolsen.com/wp-content/themes/typebased/demos/css/css-horizontal-menu/WORKS.php

Article : http://www.devinrolsen.com/pure-css-horizontal-menu/





8.  DropDown CSS Menu



Demo : http://divitodesign.com/dd-articles/horizontal-css-menu/index.html

Article : http://divitodesign.com/css/how-to-dropdown-css-menu/

Download : http://www.divitodesign.com/dd-articles/horizontal-css-menu/horizontal-css-menu.rar





9.  Pure CSS Menu With Infinite Sub Menus Tutorial



Demo : http://www.devinrolsen.com/wp-content/themes/typebased/demos/css/infinite-sub-menu/

Article : http://www.devinrolsen.com/pure-css-menu-with-infinite-sub-menus-tutorial/





10. CSS3 Dropdown Menu



Demo : http://www.webdesignerwall.com/demo/css3-dropdown-menu/

Article : http://www.webdesignerwall.com/tutorials/css3-dropdown-menu/





11. Elegant Drop Menu with CSS Only



Demo : http://aext.net/example/elegant-menu-with-css-only/

Article : http://aext.net/2009/09/elegant-drop-menu-with-css-only/

Download : http://www.box.net/shared/paoqo8y1lt





12. CSS dropdown menu without javascripting or hacks



Demo : http://www.texaswebdevelopers.com/blog/examples/ddmenu2.asp

Article : http://www.texaswebdevelopers.com/blog/template_permalink.asp?id=129





13. Create Vimeo-like top navigation



Demo : http://www.jankoatwarpspeed.com/examples/vimeo_navigation/

Article : 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





 14. ADxMenu





Demo : http://aplus.rs/adxmenu/examples/htb/

Article : http://aplus.rs/adxmenu/

Download : http://aplus.rs/adxmenu/adxmenu-v4.zip





15.  A Great CSS Horizontal Drop-Down Menu



Demo : http://sperling.com/examples/menuh/

Article : http://sperling.com/examples/menuh/

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





16. CSS menus



 Demo : http://www.howtocreate.co.uk/tutorials/testMenu.html

Article : http://www.howtocreate.co.uk/tutorials/testMenu.html





17. Pure CSS Fish Eye Menu



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

Article : 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





18. A centered menu with gradient and two pointers



Demo : http://www.cssplay.co.uk/menus/two_points.html

Article : http://www.cssplay.co.uk/menus/two_points.html





19. Create an Advanced CSS3 Menu



Demo : http://blog.cameronbaney.com/tutorials/cbdb-menu/demo.html

Article : http://blog.cameronbaney.com/tutorials/advanced-css3-menu/

Download : http://blog.cameronbaney.com/tutorials/cbdb-menu/cbdb-menu.zip





20. Solid Block Menu





Demo : http://www.dynamicdrive.com/style/csslibrary/item/solid_block_menu/

Article : 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





21. Sleek Pointer Menu



Demo : http://www.dynamicdrive.com/style/csslibrary/item/sleek-pointer-menu/

Article : 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





22. Sleek Pointer Menu 2



Demo : http://www.dynamicdrive.com/style/csslibrary/item/sleek-pointer-menu-2/

Article : 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





23. How to Create a CSS Menu Using Image Sprites





Demo : http://line25.com/wp-content/uploads/2009/css-menu/demo/demo.html

Article : 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





24. CSS Sprite Navigation Tutorial



Demo : http://www.ehousestudio.com/assets/downloads/sprite/

Article : http://www.ehousestudio.com/blog/view/css_sprite_navigation_tutorial

Download : http://www.ehousestudio.com/assets/downloads/sprite.zip



25. CSS Overlapping Tabs Menu



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

Article : http://www.tutorialsphere.com/homemade/2009/02/18/css-overlapping-tabs-menu

Download : http://www.tutorialsphere.com/homemade/uploads/2009/02/tabs.gif





26. CSS Navigation Menus



Article : http://www.jacorre.com/design/cssnavmenus.htm



27.

CSS3 Chunky Menu



Demo : http://zubeta.com/demo-menu.html

Article : http://zubeta.com/css3-menu-demo.html





28. Creating a glassy non div navigation bar



Demo : http://www.james-blogs.com/wp-content/tutorials/glassy-nav-tabs/

Article : 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





29. Centered Tabs with CSS



Demo : http://24ways.org/examples/centered-tabs-with-css/final.html

Article : http://24ways.org/2005/centered-tabs-with-css





30. Apple’s Navigation bar using only CSS



Demo : http://westciv.com/style_master/blog/apples-navigation-bar-using-only-css

Article : http://westciv.com/style_master/blog/apples-navigation-bar-using-only-css





31. Animated horizontal tabs



Demo : http://www.dynamicdrive.com/style/csslibrary/item/animated_horizontal_tabs/

Article : 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





32. A Horizontal Button Menu - The Easy Way



Demo : http://www.cssplay.co.uk/menus/listnine.html

Article : http://www.cssplay.co.uk/menus/tutorial.html





Naah.... banyak kan...?

sekarang Selamat Mencoba...

Semoga bermanfaat.



Mohon luangkan waktu anda untuk meninggalkan komentar anda ya..... Terima kasih.



sumber : http://www.tutorialblognoer.co.cc/2011/01/cara-buat-menu-navigasi-drop-down.html

Posting Komentar untuk "Cara buat Menu navigasi Drop-Down Horisontal"