Cara buat Menu navigasi Drop-Down Horisontal
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. Create a Slick Menu using CSS3
Demo : http://insicdesigns.com/demo/css3/exp2/index.html
Article : http://blog.insicdesigns.com/2010/02/create-a-slick-menu-using-css3/
4. 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
5. 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
6. 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
7. 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
8. 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/
9. 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
10. 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/
11. CSS3 Dropdown Menu
Demo : http://www.webdesignerwall.com/demo/css3-dropdown-menu/
Article : http://www.webdesignerwall.com/tutorials/css3-dropdown-menu/
12. 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
13. 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
14. 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
15. ADxMenu
Demo : http://aplus.rs/adxmenu/examples/htb/
Article : http://aplus.rs/adxmenu/
Download : http://aplus.rs/adxmenu/adxmenu-v4.zip
16. 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
17. CSS menus
Demo : http://www.howtocreate.co.uk/tutorials/testMenu.html
Article : http://www.howtocreate.co.uk/tutorials/testMenu.html
18. 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
19. 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
20. 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
21. 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
22. 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
23. 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
24. 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
25. 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
26. 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
27. CSS Navigation Menus
Article : http://www.jacorre.com/design/cssnavmenus.htm
28.
CSS3 Chunky Menu
Demo : http://zubeta.com/demo-menu.html
Article : http://zubeta.com/css3-menu-demo.html
29. 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
30. Centered Tabs with CSS
Demo : http://24ways.org/examples/centered-tabs-with-css/final.html
Article : http://24ways.org/2005/centered-tabs-with-css
31. 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
32. 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
33. 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.
0 komentar:
Posting Komentar