今天介绍一款响应式的导航菜单！支持手机.平板.还有PC访问

浏览器兼容性

  • IE7-10
  • Latest Safari
  • Latest Chrome
  • Latest FireFox
  • Android 2.2 to Latest
  • Mobile Safari
-爱程序网

演示

下载：

百度下载 链接:http://pan.baidu.com/share/link?shareid=2907366852&uk=3070429748

百度盘下载密码:598w

云诺网盘下载 ：http://s.yunio.com/nkwuka

兼容

浏览器兼容性

  • IE7-10
  • Latest Safari
  • Latest Chrome
  • Latest FireFox
  • Android 2.2 to Latest
  • Mobile Safari

用法

开始用一个简单的无序列表，添加类和数据属性：

<ul class="flexnav" data-breakpoint="800"> <li>...</li> </ul>

 

添加小屏幕菜单按钮.导航标记：

<div class="menu-button">Menu</div>

 

添加到您的文档头flexnav.css：

<link href="css/flexnav.css" rel="stylesheet" type="text/css" />

 

添加jquery.flexnav.min.js到头标记：

<script type="text/javascript" src="js/jquery.flexnav.min.js"></script>

 

初始化：

$(".flexnav").flexNav();

 

您可以更改默认的速度：

$(".flexnav").flexNav({ 'animationSpeed' : 'fast' });

 

Changelog

v.0.9 : July 4th, 2013

  • Added support for multiple flexnavs on one page
  • Fixed IE8 hover reveal bug

v.0.8 : June 4th, 2013

v.0.7 : April 28th, 2013

  • Reverting back to jQuery animations
  • No longer supporting em units due to miscalculations during testing

v.0.6.1 : April 22th, 2013

  • Fixed tabbed accessibility bug

v.0.6 : April 20th, 2013

  • Better animation support using css transitions
  • touch events added to get rid of 300ms delay on touch screens

v.0.5.2 : March 19th, 2013

  • IE 7/8 large screen bug fixes

v.0.5.1 : March 14th, 2013

  • Reverted back to no full responsive support for old IE

v.0.5 : March 13th, 2013

  • Added full responsive support for IE 7/8 (not tested)

v.0.4.9 : March 7th, 2013

  • Added support for em units

v.0.4.8 : March 6th, 2013

  • Updated the way FlexNav hides and shows menu. Using a class .show and css transitions instead of js
  • Update fixes bug where menu closed when user users scroll on small screens

v.0.4.7 : March 5th, 2013

  • Added the ability to have FlexNav on a one page site. Nav links are anchors to single page content. Need to add .one-page class to body, .menu-button, and FlexNav ul.
  • Updated js to close mobile menu when one-page FlexNav anchor links are clicked/tapped.

v.0.4.6 : February 27th, 2013

  • Fixed bug where keyboard accessibility didn't purchase viagra online work after mousenter/mouseleave
  • Use data attribute on element to set breakpoint instead of plugin option (more flexible if wanting a single column flexnav or two flexnavs on one page)

v.0.4.5 : February 26th, 2013

  • Adding support for js mousenter/mouseleave
  • Falls back to :hover with no js

v.0.4.4 : February 25th, 2013

  • Moved adding .sm/.lg-screen from body to .flexnav element
  • Moved adding flexNav-touch/-no-touch from html to .flexnav element
  • Removed superfluous classes from markup (.first-level, .second-level, .sub-menu)
  • Cleaned up sass/css
  • Using class name instead of id for example (#nav changed to .flexnav)

v.0.4.3 : February 24th, 2013

v.0.4.2 : February 23rd, 2013

v.0.4.1 : February 22nd, 2013

  • Added CSS support and markup conditionals for IE7/8

v.0.4 : February 22nd, 2013

  • Added in span elements via js for touch targets on touch screens
  • Aded unicode navicon instead of image
  • Fixed recursive sub-menu bug that didn't allow users to open/close 3rd/4th level sub-menus on small screens
  • Using Sass, Jade and CoffeeScript for preprocessing and compiling

v.0.3.2 : January 17th, 2013

  • Started adding class names via js

v.0.3.1 : January 16th, 2013

  • Got rid of js that closes menu after click/touch of menu links (caused more trouble than it was worth leaving it in)
  • Started support for multi-level sub menus

v.0.3 : July 8th, 2012

  • Close menu after click/touch of menu links (makes sense for single page navigation with anchors)

v.0.2 : July 4th, 2012

  • Changed to jQuery Plugin
  • No more Modernizr - Uses a simple function to detect touch screens