10 jQuery Mobile Menu Plugins

Sam Deering

Don’t you think your mobile’s menu is getting old already? jQuery has good news for you! Check out our list of jQuery Mobile Menu plugins and get that new design your looking for! ;)


1. jQuery Mobile Docs – Select Menus


The select menus are driven off native select elements, but the native selects are hidden from view and replaced with a custom-styled select button that matches the look and feel of the jQuery Mobile framework. The replacement selects are ARIA-enabled and are keyboard accessible on the desktop as well.
jQuery-Mobile-Docs-–-Select-Menus.jpg
Source


2. jQuery Mobile Toolbars & Navigation Menu’s


In depth look at building jQuery Mobile header and footer menu’s. We also look at building navigation menus in the header and footer and creating iPhone and android like fixed menus.
jQuery-Mobile-Toolbars-Navigation-Menus.jpg
Source


3. jQuery Mobile Alpha 4 Released


Features:
> Built on jQuery core
> Compatible with all major mobile platforms
> Lightweight size
> HTML5 Markup-driven configuration
> Progressive enhancement
> Automatic initialization
> Accessibility
> New events
> New plugins
> Powerful theming framework
jQuery-Mobile-Alpha-4-Released.jpg
Source


4. jQuery Mobile dualColumn Plugi


Plugin that adds a dual-column experience to your page.
jQuery-Mobile-dualColumn-Plugin.jpg
Source


5. Horizontal Menu Drop jQuery


Features:
> Full cross-browser compatibility
> Fully accessible even when JavaScript is turned off, as a pure CSS menu
> Search engines optimized
> Clear unordered list (LI and UL HTML tags) structure
> Easy to setup and update
> Fantastic animation and transition effects
> Multiple pre-designed color schemes
> Completely customizable styling with CSS
> Powered by jQuery
> Extremely small – 3kb uncompressed
Horizontal-Menu-Drop-jQuery.jpg
Source


6. iPhone 2 Template – Sliding Dhtml Menu (jQquery-iPhone-Horizontal-Slider)


Features:
> Inactive/Disabled items
> Several menus on one page
> Horizontal or vertical orientation
> Submenus automatically scrolls
> Sound support!
> 85% transparency for sub menus
> Image arrows
> Keyboard navigation – press Ctrl+F2 to enter the top menu
iPhone-2-Template-Sliding-Dhtml-Menu-jQquery-iPhone-Horizontal-Slider.jpg
Source


7. jQuery Drop Bar


Features:
> Full cross-browser compatibility
> Fully accessible even when JavaScript is turned off, as a pure CSS menu
> Search engines optimized
> Clear unordered list (LI and UL HTML tags) structure
> Easy to setup and update
> Fantastic animation and transition effects
> Multiple pre-designed color schemes
> Completely customizable styling with CSS
> Powered by jQuery
> Extremely small – 3kb uncompressed
jQuery-Drop-Bar.jpg
Source


8. iPhone 6 Template – Code CSS Menu – (jQuery-Vertical-Menu-iPhone)


Features:
> Status string shows item labels
> Unlimited number of sub levels
> Personal CSS styles for separate menu elements
> Top items and submenus have a shadow
> Visible over select boxes, iframes, pdf, flash, Java applets.
> Filters and Transitional effects
> Cross-frame support – menus work on frameset-based pages
> AJAX menu loading – loads web menu data from the server “on-the-fly”.
iPhone-6-Template-Code-CSS-Menu-–-jQuery-Vertical-Menu-iPhone.jpg
Source


9. jQuery Mobile: Touch-Optimized Web Framework for Smartphones & Tablets


The system will include both layouts (lists, detail panes, overlays) and a rich set of form controls and UI widgets (toggles, sliders, tabs).
Touch-Optimized-Web-Framework-for-Smartphones-Tablets.jpg
Source


10. jQuery iPad Menu jQuery Menu


Characteristics:
> Embedded browser determined by IE.
> Application switcher (calls for Aero Enabled).
jQuery-iPad-Menu-jQuery-Menu.jpg
Source

Win an Annual Membership to Learnable,

SitePoint's Learning Platform

  • http://www.watersanitationhygiene.org Jane Franklin

    I’ve looked at quite a few of the mobile menu frameworks and I think the best one is probably http://www.iphoneaccordionmenu.com

    Jane