38动感菜单 38 jQuery And CSS Drop Down Multi Level Menu Solutions
参看：http://www.1stwebdesigner.com/freebies/38-jquery-and-css-drop-down-multi-level-menu-solutions/38 jQuery And CSS Drop Down Multi Level Menu Solutions
Hello again, it’s time for comprehensive programming article. Here you’ll find 38 mainly jquery and CSS based drop-down or just multi level menu tutorials with down loadable files and explanations as well. My favorite here is the first pick – Outside the box with very unique navigation menu. It’s always good to have such reference articles in your bookmarks and when you have to create some really big website with a lot of content and menu sections – just return here. Shorten your developing process with already premade menus, which can be easily modified with little touch of CSS.
http://www.1stwebdesigner.com/wp-content/uploads/bigthumbs/100-200/preview-jquery-css-multi-level-drop-down-menu-solutions.jpg
1. “Outside the Box” Navigation with jQuery
This tutorial will cover a few ways to do just that with OS X style docks and stacks navigation.
http://www.1stwebdesigner.com/wp-content/uploads/2009/09/drop-down-multi-level-menus/outside-box-drop-down-multi-level-menu-navigation.jpg
Preview Demo
2.Sexy Drop Down Menu w/ jQuery & CSS
In this tutorial you will learn how to create a sexy drop down menu that can also degrade gracefully.
http://www.1stwebdesigner.com/wp-content/uploads/2009/09/drop-down-multi-level-menus/sexy-jquery-drop-down-multi-level-menu-navigation.jpg
Preview Demo
3.Designing the Digg Header: How To & Download
Navigation is compacted with the use of simple drop-down menus.
http://www.1stwebdesigner.com/wp-content/uploads/2009/09/drop-down-multi-level-menus/digg-header-drop-down-multi-level-menu-navigation.jpg
Preview Demo
4. Create The Fanciest Dropdown Menu You Ever Saw
http://www.1stwebdesigner.com/wp-content/uploads/2009/09/drop-down-multi-level-menus/fanciest-drop-down-multi-level-menu-navigation.jpg
Preview Demo
5.A circular menu with sub menus
A follow on from the simple single level circular menu, this one adds a sub menu level of smaller icons in a circular pattern within the top level circle. There is also the facility to add a simple description of each icon.
http://www.1stwebdesigner.com/wp-content/uploads/2009/09/drop-down-multi-level-menus/circular-drop-down-multi-level-menu-navigation.jpg
Preview Demo
6. A Different Top Navigation
In this tutorial you will use jQuery to create a different multi-layered horizontal navigation system that is still intuitive enough for anyone to use for the first time.
http://www.1stwebdesigner.com/wp-content/uploads/2009/09/drop-down-multi-level-menus/different-jquery-drop-down-multi-level-menu-navigation.jpg
Preview Demo
7. Perfect signin dropdown box likes Twitter with jQuery
Nice tutorial showing you how to create a login drop down with Twitter style using jQuery.
http://www.1stwebdesigner.com/wp-content/uploads/2009/09/drop-down-multi-level-menus/twitter-drop-down-multi-level-menu-navigation.jpg
Preview Demo
8.Sliding Jquery Menu Tutorial
This tutorial will show you how to create a sliding menu button using jquery. You can see the effect in action over on the PSDtuts webpage in the top right hand corner.
http://www.1stwebdesigner.com/wp-content/uploads/2009/09/drop-down-multi-level-menus/sliding-jquery-drop-down-multi-level-menu-navigation.jpg
Preview Demo
9.Fancy Sliding Menu for Mootools
http://www.1stwebdesigner.com/wp-content/uploads/2009/09/drop-down-multi-level-menus/fancy-sliding-drop-down-multi-level-menu-navigation.jpg
Preview Demo
10.Create Vimeo-like top navigation
I’ve featured this Janko’s tutorial some time ago, but sometimes I will repeat myself, since this article is completely dedicated to showcase advanced drop down menus. Very detailed and well written tutorial, with drop-down search options narrowing and targeting search by checking options. Menu is done completely using just CSS, structure is visually describet in the image below:
http://www.1stwebdesigner.com/wp-content/uploads/2009/09/drop-down-multi-level-menus/vimeo-drop-down-multi-level-menu-navigation.jpg
Preview Demo
11. Dynamic PHP/CSS menu
http://www.1stwebdesigner.com/wp-content/uploads/2009/09/drop-down-multi-level-menus/php-css-drop-down-multi-level-menu-navigation.jpg
Preview Demo
12. Creating an Outlook Navigation Bar using the ListView and Accordion Controls
http://www.1stwebdesigner.com/wp-content/uploads/2009/09/drop-down-multi-level-menus/outlook-drop-down-multi-level-menu-navigation.jpg
Preview Demo
13. Animated Drop Down Menu with jQuery
http://www.1stwebdesigner.com/wp-content/uploads/2009/09/drop-down-multi-level-menus/animated-drop-down-multi-level-menu-navigation.jpg
Preview Demo
14. jQuery UI Potato Menu
http://www.1stwebdesigner.com/wp-content/uploads/2009/09/drop-down-multi-level-menus/potato-ui-drop-down-multi-level-menu-navigation.jpg
Preview Demo
15. Make a Mega Drop-Down Menu with jQuery
http://www.1stwebdesigner.com/wp-content/uploads/2009/09/drop-down-multi-level-menus/mega-drop-down-multi-level-menu-navigation.jpg
Preview Demo
16. A cross-browser drop-down cascading validating menu
Just simple CSS menu.
http://www.1stwebdesigner.com/wp-content/uploads/2009/09/drop-down-multi-level-menus/cross-browser-drop-down-multi-level-menu-navigation.jpg
Preview Demo
17. Drop-Down Menus, Horizontal Style
Very old drop-down tutorial from year 2004, but if you are starting out – very useful tutorial and example.
http://www.1stwebdesigner.com/wp-content/uploads/2009/09/drop-down-multi-level-menus/horizontal-style-drop-down-multi-level-menu-navigation.jpg
Preview Demo
18. Superfish v1.4.8 – jQuery menu plugin by Joel Birch
Superfish is an enhanced Suckerfish-style menu jQuery plugin that takes an existing pure CSS drop-down menu (so it degrades gracefully without JavaScript) and more features.
http://www.1stwebdesigner.com/wp-content/uploads/2009/09/drop-down-multi-level-menus/superfish-jquery-drop-down-multi-level-menu-navigation.jpg
Preview Demo
19. JavaScript Dropdown Menu with Multi Levels
This multi-level drop down menu script weighs in at only 1.2 KB. It features animation, active header persistence, easy implementation and multiple instance support.
http://www.1stwebdesigner.com/wp-content/uploads/2009/09/drop-down-multi-level-menus/javascript-drop-down-multi-level-menu-navigation-1.jpg
Preview Demo
20. jQuery (mb)Menu 2.7
This is a powerful jQuery component to build easily a multilevel tree menu or a contextual menu (right click) in an intuitive way!
http://www.1stwebdesigner.com/wp-content/uploads/2009/09/drop-down-multi-level-menus/jquery-drop-down-multi-level-menu-navigation.jpg
Preview Demo
21. Menumatic
MenuMatic is a MooTools 1.2 class that takes a sematic ordered or unordered list of links and turns it into a dynamic drop down menu system. For users without javascript, it falls back on a CSS menu
http://www.1stwebdesigner.com/wp-content/uploads/2009/09/drop-down-multi-level-menus/menumatic-drop-down-multi-level-menu-navigation.jpg
Preview Demo
22. Smooth Navigational Menu (v1.31)
Smooth Navigation Menu is a multi level, CSS list based menu powered using jQuery that makes website navigation a smooth affair.
http://www.1stwebdesigner.com/wp-content/uploads/2009/09/drop-down-multi-level-menus/smooth-drop-down-multi-level-menu-navigation.jpg
Preview Demo
23. jQuery File Tree
jQuery File Tree is a configurable, AJAX file browser plugin for jQuery. You can create a customized, fully-interactive file tree with as little as one line of JavaScript code.
http://www.1stwebdesigner.com/wp-content/uploads/2009/09/drop-down-multi-level-menus/jquery-tree-drop-down-multi-level-menu-navigation.jpg
Preview Demo
24. Longed-For Multi-Level Drop-Down Menu Script
http://www.1stwebdesigner.com/wp-content/uploads/2009/09/drop-down-multi-level-menus/longed-jquery-drop-down-multi-level-menu-navigation.jpg
Preview Demo
25. jQuery & CSS Example – Dropdown Menu
This article is intended to describe an extremely basic, yet extremely powerful, technique for adding dropdown menus in your application user interface or website design.
http://www.1stwebdesigner.com/wp-content/uploads/2009/09/drop-down-multi-level-menus/designreviver-jquery-drop-down-multi-level-menu-navigation.jpg
Preview Demo
26. Reinventing a Drop Down with CSS and jQuery
http://www.1stwebdesigner.com/wp-content/uploads/2009/09/drop-down-multi-level-menus/reinventing-drop-down-multi-level-menu-navigation.jpg
Preview Demo
27. Simple jQuery Dropdowns
Very stripped down code and minimal styling, yet still dropdown menu has all the functionality typically needed.
http://www.1stwebdesigner.com/wp-content/uploads/2009/09/drop-down-multi-level-menus/simple-jquery-drop-down-multi-level-menu-navigation.jpg
Preview Demo
28. Styling Drop Down Boxes with jQuery
One problem with HTML forms is it is hard to style the elements to fit into your design.The tutorial will show you how to style the hardest of them all, the select box.
http://www.1stwebdesigner.com/wp-content/uploads/2009/09/drop-down-multi-level-menus/styling-jquery-drop-down-multi-level-menu-navigation.jpg
Preview Demo
29. jQuery iPod-style Drilldown Menu
http://www.1stwebdesigner.com/wp-content/uploads/2009/09/drop-down-multi-level-menus/ipod-drop-down-multi-level-menu-navigation.jpg
Preview Demo
30. jQuery Menu: Dropdown, iPod Drilldown, and Flyout styles with ARIA Support and ThemeRoller Ready
Newer version of previous iPod style menu.
http://www.1stwebdesigner.com/wp-content/uploads/2009/09/drop-down-multi-level-menus/recreated-drop-down-multi-level-menu-navigation.jpg
Preview Demo
31. mcDropdown jQuery Plug-in v1.2.07
http://www.1stwebdesigner.com/wp-content/uploads/2009/09/drop-down-multi-level-menus/mc-plugin-drop-down-multi-level-menu-navigation.jpg
Preview Demo
32. jQuery Drop Line Tabs
This menu turns a nested UL list into a horizontal drop line tabs menu. The top level tabs are rounded on each side thanks to the use of two transparent background images, while the sub ULs each appear as a single row of links that drop down when the mouse rolls over its parent LI.
http://www.1stwebdesigner.com/wp-content/uploads/2009/09/drop-down-multi-level-menus/jquery-tabs-drop-down-multi-level-menu-navigation.jpg
Preview Demo
33. Cut & Paste jQuery Mega Menu
Mega Menus refer to drop down menus that contain multiple columns of links. This jQuery script lets you add a mega menu to any anchor link on your page, with each menu revealed using a sleek expanding animation. Customize the animation duration plus delay before menu disappears when the mouse rolls out of the anchor. Mega cool!
http://www.1stwebdesigner.com/wp-content/uploads/2009/09/drop-down-multi-level-menus/cut-paste-drop-down-multi-level-menu-navigation-1.jpg
Preview Demo
34. Professional dropdown #2
http://www.1stwebdesigner.com/wp-content/uploads/2009/09/drop-down-multi-level-menus/professional-drop-down-multi-level-menu-navigation.jpg
Preview Demo
35. Drop down menu with nested submenus
Create your own drop down menu with nested submenus using CSS and a little JavaScript.
http://www.1stwebdesigner.com/wp-content/uploads/2009/09/drop-down-multi-level-menus/nested-drop-down-multi-level-menu-navigation-1.jpg
Preview Demo
36. jdMenu Hierarchical Menu Plugin
The jdMenu plugin for jQuery provides a clean, simple and elegant solution for creating hierarchical drop down menus for websites to web applications.
http://www.1stwebdesigner.com/wp-content/uploads/2009/09/drop-down-multi-level-menus/jdmenu-drop-down-multi-level-menu-navigation.jpg
Preview Demo
37. Dynamic Drive – Multiple Level Menus
A lot of free advanced CSS and Javascript drop down menus are available here. There are also instructions and advices how do use and modify them.
http://www.1stwebdesigner.com/wp-content/uploads/2009/09/drop-down-multi-level-menus/dynamic-drive-drop-down-multi-level-menu-navigation-1.jpg
38. IzzyMenu – Menu Builder – Build your pro CSS/DHTML Menu
Choose from dozens ready styles or create your own menu style. They are low in file size, so won’t consume a lot of bandwidth from your hosting. IzzyMenu, online menu generator is the best solution for amateurs and professionals!
http://www.1stwebdesigner.com/wp-content/uploads/2009/09/drop-down-multi-level-menus/izzymenu-drop-down-multi-level-menu-navigation-1.jpg
页:
[1]