JQuery is one of the most interesting things that you can find on a site. Starting from simple examples like the ones below you can create impressive menus, that people will admire when looking at your site. I will add in the following weeks other JQuery plugins that are referring to other functions of the site.
This is a powerful jQuery component to build easily a multilevel tree menu or a contextual menu (right click) in an intuitive way!
You can add as many submenus as you want; if your submenu or menu is not declared in the page, the component’ll get it via ajax calling the template page with the id of the menu you need (the value of “menu” attribute) the ajax page should return a well formatted code as the example below for the menu voices code.
The interest in extraordinary menus seems to be high nowadays, so today I will teach you how this is done.
Since the Apple-flavored Leopard-text-indent style is currently one of my favorite menu styles, we will start from scratch and build such a menu in Photoshop, then create the needed HTML and CSS and last but not least improve it via jQuery.
This is a simple Accordion menu done in JQuery. Links with subitems under them will expand the submenu when clicked. Items that don’t have subitems are normal links. (example link to Marco’s blog). The menu initialises with the first submenu expanded.
This plugin creates an accordion menu. It works with nested lists, definition lists, or just nested divs. Options are available to specify the structure, if necessary, the active element (to display at first) and to customize animations. The navigation-option automatically activates a part of the accordion based on the current location (URL) of the page.
Urban Gray Accordion Menu is a clean, vertical menu with headers that are activated “mouseover” (200 millisec delay). Each header is hyperlinked itself, feasible since the headers are toggled “mouseover” instead of “onclick”. This is an easy to customize, attractive vertical list menu.
BySlideMenu is a plugin for Mootools which allow you to easily create a beautiful accordion menu (sliding menu) on any element you want (ul/li, div, p …) using images and/or text.
In this example, the menu headers are A tags, with each sub menu being DIV tags that expand/ contract. The use of DIV tags for the sub menus is to facilitate content other than UL lists. An absolutely positioned icon image gets dynamically added to each header that changes depending on the header state. The headers are toggled via “click” of the mouse, and all headers can be collapsed. The previous expanded header (if any) is closed before expanding the current.
In this menu example, the menu headers are H3 tags, with each sub menu being UL tags that expand/ contract. A CSS class gets dynamically added to a header when it’s expanded to style the expanded header. The headers are toggled via “click” of the mouse, and all headers can be collapsed. The previous expanded header (if any) is closed before expanding the current.
Arrow Side Menu is a vertical list based menu that uses a single background image to create 3 distinct state. Headers that contain sub contents are activated via “clickgo” of the mouse. What this means is that each header is hyperlinked, with the link not disabled. When you click on such a header, first, the sub content expands, then, the user is taken to the URL specified in the header.
This versatile 1kb horizontal accordion script can be used for menus, images, presentation content and more. I had seen a similar looking feature on the mootools homepage and set out the replicate the functionality as a standalone script and as lightweight as possible. The script will automatically adjust to the number of elements in the accordion and the dimensions of the accordion.
Give your customers an easy way to view their cart with less page load time. This module was first released under our popular eTensity template and is back and even better! We’ve added ajax functionality and several other features that will allow you to adapt this module to any Virtuemart site.
We’ve gone back to our popular S5 Virtuemart Accordion menu module and made a custom version specifically for the Shopper Frenzy template. This module will display categories up to 3 levels deep. It is fully powered by S5 Effects and no mootools, this means no script conflictions with your other modules!
Please note that the version shown on this demo was built specifically for this template and will not work on any other template. We do however, have our original version available that will work with any template with many features to allow you to customize it to your specific needs.
Lightweight and flexible transformation of an unordered list into an expandable and collapsable tree, great for unobtrusive navigation enhancements. Supports both location and cookie based persistence.
I’ve put a lot of info (features, bugs, etc.) into the demo itself, so I won’t repeat it all here. Feel free to use Coda-Slider in your own projects, and let me know how it works out. All the code is well commented or self-explanatory so you shouldn’t have much difficulty adapting it to fit your needs. if you do run into problems, let me know in the comments here.