10个响应式的jQuery导航菜单资源

jopen 8年前

1. Responsive Multi-Level Menu

The main idea is to save space for menus that have a lot of content and sub-levels. Each sub-level in this menu will be shown in its own context, making the “parent” level disappear. This is done with subtle animations that are defined in separate animation classes. The menu is fluid so that it can be used easily in a responsive layout.

10个响应式的jQuery导航菜单资源

2. Drop-Down Navigation: Responsive and Touch-Friendly

Here comes the promised super lightweight jQuery plugin which I called DoubleTapToGo.js and it is only 550 ridiculous bytes in size when minified.
This jQuery plugin helps you create usable multi-level dropdowns which are touch-friendly and responsive.

10个响应式的jQuery导航菜单资源

3. MeanMenu – A free jQuery Responsive Menu plugin

MeanMenu is a free jQuery Responsive Menu plugin to create better navigation for your mobile visitors without media queries. And yes, it works with jQuery 2.0 – obviously IE 7 & 8 will not work.

10个响应式的jQuery导航菜单资源

4. Flaunt.js for stylish responsive navigations with nested click-to-reveal

Flaunt.js is a jQuery script that allows you to create a responsive, nested navigation out the box. Flaunt was built to overcome responsive design challenges which faced a huge percentage of websites. This challenge was to show nested navigation items on click-demand, without the event taking you through to the page you’ve pressed…

10个响应式的jQuery导航菜单资源

5. FlexNav – Flexible, Device Agnostic Navigation

The mock navigation you see above is a mobile-first example of using media queries and javascript to make a decent site menu with drop downs. Special attention is paid to touch screens using touch events with tap targets (the key feature of FlexNav).

10个响应式的jQuery导航菜单资源

6. Responsive Mobile Menu

The easiest way to implement user-friendly responsive navigation optimized for mobile devices using HTML5, CSS3 and jQuery.
Features: Light-weight code; Multiple menus on the same page supported; 100% functionality in all actual mobile and desktop web browsers supporting HTML5 and CSS3; + more

10个响应式的jQuery导航菜单资源

7. jQuery Navobile

jQuery Navobile – a jQuery plugin that makes mobile navigation easy. Navobile uses CSS to apply CSS3 translations, Mobile device detection and fixing the position of nav. In the CSS file we used for this demo and the one that is included in the src folder the mobile break point is at 765px using a media query, you can of course change this to suit your needs.

10个响应式的jQuery导航菜单资源

8. Sidr – A jQuery plugin for creating side menus

This jQuery plugin is an easy method for creating side menus and the easiest way for doing your existing menu responsive. You will be able to create multiple sidrs on both sides of your web to make responsives menus (or not, it works perfectly on desktop too)

10个响应式的jQuery导航菜单资源

9. Responsive Side Menu with jQuery

This is a tutorial written in french on how to design a sidebar jquery animated menu following the rules of responsive webdesign. Demo and source files are also available

10个响应式的jQuery导航菜单资源

10. Horizontal Drop-Down Menu

This large horizontal drop-down menu simply shows the sub-menu when an item gets clicked. It’s inspired by the Microsoft.com drop-down menu. Some example media queries show how to adjust the menu for smaller screens.

10个响应式的jQuery导航菜单资源