William CraigCEO & Co-Founder
- 7 minute read
- President of WebFX. Bill has over 25 years of experience in the Internet marketing industry specializing in SEO, UX, information architecture, marketing automation and more. William’s background in scientific computing and education from Shippensburg and MIT provided the foundation for MarketingCloudFX and other key research and development projects at WebFX.
This example takes semantic ordered or unordered list of links and turns it into a dynamic drop down menu system that can be vertically or horizontally oriented. View Demo Page
2. Animated Menu using jQuery
A technique for animating menu items when a user hovers over them. Source files, including the PSD file, are available to download. View Demo Page
3. Garagedoor Effect using jQuery
4. JGlide Menu
A very unique menu that floats on the page. Users can drag it to a position they desire. View Demo Page
6. Perspective Tabs
You can have scrolling tabs with animation using this technique. View Demo Page
When you hover an item, you’ll see the CSS sliding door technique created using jQuery. An alternate version for MooTols can be here.
9. Fisheye Menu
If you’re a big fan of the Mac dock you will enjoy this menu.
A great technique for integrating accordion-style menus into your site. View Demo Page
This sliding hover effect script is an easy technique for highlighting menu items.
This technique allows you to fade in and fade out menu items. View Demo Page
A technique for creating animated menus using jQuery and CSS background-position properties. View Demo Page
15. Mootools Redux
16. HoverAccordion/Sidebar Menu
This is an accordion plugin which can be used as a vertical sidebar menu too.
18. jQuery UI Tabs
19. Proto.Menu: Right Click Menu
A customizable right-click menu written on top of the Prototype framework.
20. Accessible Expanding and Collapsing menu
This menu example allows you to have two levels of navigation. When you click on main category, the subcategory expands. View Demo Page
What are you using?
We’d like to know if you have experience with any of these techniques and examples.
Have a live web page? Share it with us in the comments.
- 40 Exceptional jQuery Interface Techniques and Tutorials
- Related categories: User Interface
About the Author
Kawsar Ali is a web designer, graphic designer, and wannabe photographer based in NY, U.S. He’s also the founder of Desizntech, a site to find tips about web design, Mac, PC and more. If you’d like to connect with him, you can follow him on Twitter or at his Personal Website.
President of WebFX. Bill has over 25 years of experience in the Internet marketing industry specializing in SEO, UX, information architecture, marketing automation and more. William’s background in scientific computing and education from Shippensburg and MIT provided the foundation for MarketingCloudFX and other key research and development projects at WebFX.
WebFX is a full-service marketing agency with 1000+ client reviews and a 4.9-star rating on Clutch! Find out how our expert team and revenue-accelerating tech can drive results for you! Learn more