Useful List of Responsive Navigation and Menu Patterns

知更鸟
1482
文章
6919
评论
2014年12月11日19:03:51 评论 1.1K 6935字阅读23分7秒

Having functional navigation that works on both mobile and desktop platforms is challenging.

  • Should the mobile have fewer navigation options?
  • Will the user figure out how to use it?
  • What if you are converting an existing desktop site?

Fortunately there is a growing number of stunning examples and tutorials to be found. Even with these it’s still difficult!

1. Slidebars

Useful List of Responsive Navigation and Menu Patterns

Desktop Layout

Useful List of Responsive Navigation and Menu Patterns

Mobile content slides in.

This new jQuery-based solution is under active development has been tested in a number of environments (including older Android phones). Lightweight (1.5k gzip js and css).

It uses CSS transforms where possible, and fallback to jQuery animate.

I am now using this on a production site – it seems to work well. I also added multi-level menus in my implementation.

Link: http://plugins.adchsm.me/slidebars/

2. Responsive Nav – Slidedown Menu

Useful List of Responsive Navigation and Menu Patterns

Useful List of Responsive Navigation and Menu Patterns

A very clean Javascript solution (NOT dependent on jQuery) that uses CSS3 transitions.

Link: responsive-nav.com

3. Codrops – Slide and Push Menus

Useful List of Responsive Navigation and Menu Patterns

No desktop image shown as there is no default desktop menu.

A tutorial that shows how to slide menus in from the left, right, top, or bottom. It is not a complete drop-in solution.

Uses Javascript to trigger CSS3 transitions. You would need to do some additional CSS work to make the menu appear in both desktop and mobile layouts.

Tutorial: tympanus.net/codrops/2013/04/17/slide-and-push-menus/
Demo: tympanus.net/Blueprints/SlidePushMenus/

4. Codrops – Multi-level Dropdown Menu

Useful List of Responsive Navigation and Menu Patterns

Another tutorial from the clever people at codrops.

Clicking / tapping the navigation icon brings up a menu (all kinds of different transition demos). Clicking a menu item will bring in a submenu that replaces the top-level menu. Very much experimental with some jQuery.

Tutorial: tympanus.net/codrops/2013/04/19/responsive-multi-level-menu/
Demo: tympanus.net/Development/ResponsiveMultiLevelMenu/

5. FlexNav – Dropdown Multi-level Menu

Useful List of Responsive Navigation and Menu Patterns

Useful List of Responsive Navigation and Menu Patterns

A jQuery plugin that will take an existing multi-level menu and convert it to a dropdown for mobile.

Solid browser support (includes IE 7-10), but uses jQuery animations.

Link: jasonweaver.name/lab/flexiblenavigation/

6. Codrops – Multi-Layout Menu

Useful List of Responsive Navigation and Menu Patterns

Useful List of Responsive Navigation and Menu Patterns

Useful List of Responsive Navigation and Menu Patterns

This tutorial shows a menu with 3 different layouts depending on device width. Uses retina-friendly icon fonts, and hover transitions (which obviously won’t happen on touch devices).

Uses some hefty CSS, and a small amount of Javascript (NOT dependent on jQuery) to activate the appropriate classes.

Demo: tympanus.net/Tutorials/ResponsiveRetinaReadyMenu/
Tutorial: tympanus.net/codrops/2013/05/08/responsive-retina-ready-menu/

7. Smashing Magazine – Slideout menu

Useful List of Responsive Navigation and Menu Patterns

Useful List of Responsive Navigation and Menu Patterns

This is a tutorial.

This solution uses CSS3 animation, some Javascript (uses jQuery).

Tutorial: SmashingMagazine.com
Demo: dbushell.github.io/Responsive-Off-Canvas-Menu/step4.html

8. jPanelMenu – Slideout Menu

Useful List of Responsive Navigation and Menu Patterns

This is a jQuery plugin that turns some menu markup into an off-canvas slide in menu. It has a ton of options, but seems to use jQuery animation (not great for mobile performance.

Update: There is also a “transforms” build which uses CSS3 transforms over jQuery animation.

Link: jpanelmenu.com

9. Top Drawer – Slidedown Menu

Useful List of Responsive Navigation and Menu Patterns

An experiment by Jordan Moore that uses pretty much CSS only. There is a small piece of Javascript that assigns the class when the nav icon is clicked.

It does use CSS Transforms (resulting in smooth and fast performance on mobile) BUT – it has fixed heights on the menu. Nice experiment but would need some work to get production-ready.

Note the mobile and desktop layouts are no different.

Link: www.jordanm.co.uk/lab/topdrawer

10. Twitter Bootstrap 3 – Slidedown Menu

Useful List of Responsive Navigation and Menu Patterns

Useful List of Responsive Navigation and Menu Patterns

Twitter Bootstrap has a navbar component that can be implemented on a responsive site. It will convert the horizontal menu into a slidedown with a nav icon. It handles all the different items Bootstrap allows you to place in a menu (a submenu and a search field).

Bootstrap is amazing, but it is bloated, and like most frameworks there are a million options at your disposal. However you can selectively build the CSS and Javascript required for just a navbar component, but be wary of dependencies.

Link: getbootstrap.com/components

11. jQuery Navobile Slideout Menu

Useful List of Responsive Navigation and Menu Patterns

Useful List of Responsive Navigation and Menu Patterns

Similar to jPanelMenu above. This jQuery plugin allows you to make an existing menu become a slideout menu on mobile views.

It has the additional functionality of swiping and even the ability todrag out the menu –  as long as you include the hammerjs library. Uses CSS3 transforms for the animation.

Dependent on jQuery and Modernizr.

Link: madebymade.github.io/jquery-navobile/

12. Bamboo – Slideout Menu

Useful List of Responsive Navigation and Menu Patterns

Useful List of Responsive Navigation and Menu Patterns

This jQuery plugin is slightly different as it allows an existing left sidebar navigation to be your main nav (all other solutions only seem to work with the traditional horizontal nav bar).

Demo: www.andrewgreig.com/demo/bamboo/
Link: http://www.andrewgreig.com/617/

13. Codrops – Multi-Level Slide in and out

Useful List of Responsive Navigation and Menu Patterns

Mary Lou at Codrops has designed a very clever multi-menu that handles lots of sub-menus. It uses 3D transforms for optimal speed, and is a truly clever piece of work.

Github: github.com/codrops/MultiLevelPushMenu
Tutorial: tympanus.net/codrops/2013/08/13/multi-level-push-menu/
Demo: tympanus.net/Development/MultiLevelPushMenu/

14. Webdesignerwall – Mid page responsive menu

Useful List of Responsive Navigation and Menu Patterns

Useful List of Responsive Navigation and Menu Patterns

The nice piece of CSS3 magic takes a horizontal nav bar, and turns into nice dropdown on mobiles.

No Javascript.

Tutorial: webdesignerwall.com/tutorials/css-responsive-navigation-menu
Demo: webdesignerwall.com/demo/responsive-menu

15. jQuery Pageslide

Useful List of Responsive Navigation and Menu Patterns

Useful List of Responsive Navigation and Menu Patterns

This is a clean small jQuery plugin (just 1.5kb), with minimal CSS involved. It’s a little older and doesn’t make use of CSS3 transforms.

You can slide in content from left or right, and even set the content as modal.

Tutorial: srobbin.com/jquery-plugins/pageslide/
Demo: srobbin.github.io/jquery-pageslide/

 16. Mmenu – jQuery slider

Mmenu is a powerful plugin with some great options (including slide down sub-menus). However it does have a heavier footprint (16KB minified JS + a fair stack of CSS).

Useful List of Responsive Navigation and Menu Patterns

Demo and Download: mmenu.frebsite.nl/

17. ReSmenu

Useful List of Responsive Navigation and Menu Patterns

 

Useful List of Responsive Navigation and Menu Patterns

A lightweight (~1kb) jQuery plugin that converts a multi-level navigation list into a select element when the viewport is small.

Demo and Download: codeb.it/resmenu/

18. Sidr – Left and Right Slideout

Useful List of Responsive Navigation and Menu Patterns

Useful List of Responsive Navigation and Menu Patterns

This is a powerful jQuery plugin that handles both left and right slide-in menus. It also handles touch events on mobile devices.

You can have multiple menus, or assign an existing menu as a “Sidr”.

Powerful – however it looks to me like it uses jQuery animation, rather than using hardware-accelerated transitions for the animation.

Link: www.berriart.com/sidr

19. Fixed Nav

Useful List of Responsive Navigation and Menu PatternsThis newer offering from Adtile uses vanilla JavaScript (no jQuery), and sets up a fixed navbar. It uses Fastclick (to remove the 300ms click delay on mobile browsers).

Nice clean implementation.

Link: http://blog.adtile.me/2014/03/03/responsive-fixed-one-page-navigation/
Demo: http://www.adtile.me/fixed-nav/
Github: https://github.com/adtile/fixed-nav

20. MeanMenu

Useful List of Responsive Navigation and Menu PatternsPart of MeanThemes (WordPress theme), this is a jQuery plugin that allows multi-level menus. They will slidedown.

Also available as a paid WordPress plugin.

Link: http://www.meanthemes.com/plugins/meanmenu/
Demo: http://www.meanthemes.com/demo/meanmenu/demo.html

21. Snap.js

Useful List of Responsive Navigation and Menu PatternsSnap.js is a vanilla Javascript (jQuery not required) that allows off-canvas menus to slide in from the left or right.

As well has tapping the menu icon, you can also drag in the menu (and it will snap to a certain position).

Demo: http://jakiestfu.github.io/Snap.js/demo/apps/default.html

22. Responsive Navigation

Useful List of Responsive Navigation and Menu Patterns

 

Despite the rather generic name of this script, it allows something that few others do: Multi-level menus where you can visit the top level menu OR drill down further.

Some commenters have requested this, but I do wonder if this pattern is confusing to users.

This is a paid script, reliant on jQuery. It also has a WordPress plugin implementation.

Demo: http://www.responsive-navigation.com/

继续阅读
weinxin
关于本站
分享交流WordPress经验与技巧,关注前端设计与网站制作。仅用于功能演示。
最佳 CSS 框架 Web前端

最佳 CSS 框架

在构建网站时,使用 CSS 框架是一个实时的节省,因为它为您提供了每个网页设计师和前端开发人员在制作网站时需要的工具。 CSS 框架是一个软件框架,它允许使用 HTML/CSS 进行更简单、更符合标准...
jQuery幻灯片插件:OWL Carousel Web前端

jQuery幻灯片插件:OWL Carousel

Owl Carousel 是一个强大、实用但小巧的 jQuery 幻灯片插件,它具有以下特点: 兼容所有浏览器 支持响应式 支持 CSS3 过度 支持触摸事件 支持 JSON 及自定义 JSON 格式...
js实时获取浏览器窗口大小 Web前端

js实时获取浏览器窗口大小

js实时获取浏览器窗口大小,我们可以使用addEventListener()方法来实现。该addEventListener()方法可以注册事件处理程序以侦听浏览器窗口resize事件,例如window...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: