官网：http://jasonweaver.name/lab/flexiblenavigation/
参考资料：
HTML5 respond.js 解决IE6~8的响应式布局问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>flexnav</title>
<link rel="stylesheet" href="css/flexnav.css">
<link rel="stylesheet" href="css/page.css">
<link rel="stylesheet" href="css/font-awesome.css">
<script src="js/jquery.min.js"></script>
<script src="js/jquery.hoverIntent.js"></script>
<script src="js/jquery.flexnav.js"></script>
<script type="text/javascript">
$(function () {
$(".flexnav").flexNav({
\'calcItemWidths\': true,
\'hoverIntent\': true
});
});
</script>
<!--[if lt IE 9]>
<script src="js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<header>
<nav>
<div class="menu-button">
导航菜单
<span class="touch-button"><i class="navicon icon-reorder"></i></span>
</div>
<ul data-breakpoint="800" class="flexnav">
<li><a href=\'#\'>主页</a></li>
<li><a href=\'#\'>我们的愿景</a></li>
<li><a href=\'#\'>雄狮系统</a></li>
<li>
<a href=\'#\'>雄狮学院</a>
<ul>
<li><a href=\'#\'>学院信息</a></li>
<li><a href=\'#\'>学院住宿</a></li>
<li><a href=\'#\'>学院教练</a></li>
<li><a href=\'#\'>优秀球员</a></li>
<li><a href=\'#\'>足球及教育体系</a></li>
</ul>
</li>
<li><a href=\'#\'>我们的团队</a></li>
<li>
<a href=\'#\'>课程</a>
<ul>
<li><a href=\'#\'>英国夏令营</a></li>
<li><a href=\'#\'>中国夏令营</a></li>
<li>
<a href=\'#\'>短期课程</a>
<ul>
<li><a href=\'#\'>短期课程（ 6星期）</a></li>
<li><a href=\'#\'>短期课程（8星期）</a></li>
<li><a href=\'#\'>短期课程（12星期）</a></li>
</ul>
</li>
<li>
<a href=\'#\'>长期课程</a>
<ul>
<li><a href=\'#\'>长期课程（一年）</a></li>
<li><a href=\'#\'>长期课程（两年）</a></li>
<li><a href=\'#\'>教练员培训</a></li>
</ul>
</li>
</ul>
</li>
<li><a href=\'#\'>商业机遇</a></li>
<li><a href=\'#\'>新闻</a></li>
<li><a href=\'#\'>联系方式</a></li>
</ul>
</nav>
</header>
</body>
</html>
.flexnav .touch-button {
position: absolute;
z-index: 999;
top: 0;
right: 0;
width: 50px;
height: 50px;
display: inline-block;
background: #acaca1;
background: rgba(0, 0, 0, 0.075);
text-align: center;
-webkit-border-radius: 50%;
-moz-border-radius:50%;
border-radius: 50%;
}
@media all and (min-width: 800px) {
.flexnav .touch-button {
border-radius:0;
}
}
/*
FlexNav.js 1.3.3
Created by Jason Weaver http://jasonweaver.name
Released under http://unlicense.org/
//
*/
(function () {
var $;
$ = jQuery;
$.fn.flexNav = function (options) {
var $nav, $top_nav_items, breakpoint, count, nav_percent, nav_width, resetMenu, resizer, settings, showMenu, toggle_selector, touch_selector, navicon_icon;
settings = $.extend({
\'animationSpeed\': 250, // 默认的下拉动画速度
\'transitionOpacity\': true, // 默认为不透明动画
\'buttonSelector\': \'.menu-button\', //默认的菜单按钮CSS类名
\'hoverIntent\': false, //默认的菜单按钮CSS类名
\'hoverIntentTimeout\': 150, // hoverIntent默认结束时间
\'calcItemWidths\': false, // 是否动态配置顶级导航项宽度
\'hover\': true // 是否支持鼠标悬浮功能
}, options);
$nav = $(this);
$nav.addClass(\'with-js\');
if (settings.transitionOpacity === true) {
$nav.addClass(\'opacity\');
}
$nav.find("li").each(function () {
if ($(this).has("ul").length) {
return $(this).addClass("item-with-ul").find("ul").hide();
}
});
if (settings.calcItemWidths === true) {
$top_nav_items = $nav.find(\'>li\');
count = $top_nav_items.length;
nav_width = 100 / count;
nav_percent = nav_width + "%";
}
if ($nav.data(\'breakpoint\')) {
breakpoint = $nav.data(\'breakpoint\');
}
showMenu = function () {
if ($nav.hasClass(\'lg-screen\') === true && settings.hover === true) {
if (settings.transitionOpacity === true) {
return $(this).find(\'>ul\').addClass(\'flexnav-show\').stop(true, true).animate({
height: ["toggle", "swing"],
opacity: "toggle"
}, settings.animationSpeed);
} else {
return $(this).find(\'>ul\').addClass(\'flexnav-show\').stop(true, true).animate({
height: ["toggle", "swing"]
}, settings.animationSpeed);
}
}
};
resetMenu = function () {
if ($nav.hasClass(\'lg-screen\') === true && $(this).find(\'>ul\').hasClass(\'flexnav-show\') === true && settings.hover === true) {
if (settings.transitionOpacity === true) {
return $(this).find(\'>ul\').removeClass(\'flexnav-show\').stop(true, true).animate({
height: ["toggle", "swing"],
opacity: "toggle"
}, settings.animationSpeed);
} else {
return $(this).find(\'>ul\').removeClass(\'flexnav-show\').stop(true, true).animate({
height: ["toggle", "swing"]
}, settings.animationSpeed);
}
}
};
resizer = function () {
var selector;
// console.log(breakpoint);
// console.log($(window).width());
if ($(window).width() <= breakpoint) {
$nav.removeClass("lg-screen").addClass("sm-screen");
if (settings.calcItemWidths === true) {
$top_nav_items.css(\'width\', \'100%\');
}
selector = settings[\'buttonSelector\'] + \', \' + settings[\'buttonSelector\'] + \' .touch-button\';
$(selector).removeClass(\'active\');
//重置下级菜单点击图标
$(\'.item-with-ul ul .navicon\').removeClass("icon-chevron-right").addClass("icon-chevron-down");
return $(\'.one-page li a\').on(\'click\', function () {
return $nav.removeClass(\'flexnav-show\');
});
} else if ($(window).width() > breakpoint) {
$nav.removeClass("sm-screen").addClass("lg-screen");
if (settings.calcItemWidths === true) {
$top_nav_items.css(\'width\', nav_percent);
}
$nav.removeClass(\'flexnav-show\').find(\'.item-with-ul\').on();
$(\'.item-with-ul\').find(\'ul\').removeClass(\'flexnav-show\')
.find(".navicon").removeClass("icon-chevron-down").addClass("icon-chevron-right"); //重置下级菜单点击图标
resetMenu();
if (settings.hoverIntent === true) {
return $(\'.item-with-ul\').hoverIntent({
over: showMenu,
out: resetMenu,
timeout: settings.hoverIntentTimeout
});
} else if (settings.hoverIntent === false) {
return $(\'.item-with-ul\').on(\'mouseenter\', showMenu).on(\'mouseleave\', resetMenu);
}
}
};
$(settings[\'buttonSelector\']).data(\'navEl\', $nav);
touch_selector = \'.item-with-ul\';
$(touch_selector).append(\'<span class="touch-button"><i class="navicon icon-chevron-down"></i></span>\');
toggle_selector = settings[\'buttonSelector\'] + \', \' + settings[\'buttonSelector\'] + \' .touch-button\';
$(toggle_selector).on(\'click\', function (e) {
var $btnParent, $thisNav, bs;
$(toggle_selector).toggleClass(\'active\');
e.preventDefault();
e.stopPropagation();
bs = settings[\'buttonSelector\'];
$btnParent = $(this).is(bs) ? $(this) : $(this).parent(bs);
//菜单切换，切换图标
if ($btnParent.find(".navicon").hasClass("icon-reorder")) {
$btnParent.find(".navicon").removeClass("icon-reorder").addClass(" icon-remove");
}
else {
$btnParent.find(".navicon").removeClass("icon-remove").addClass(" icon-reorder");
}
$thisNav = $btnParent.data(\'navEl\');
return $thisNav.toggleClass(\'flexnav-show\');
});
$(\'.touch-button\').on(\'click\', function (e) {
var $sub, $touchButton;
$sub = $(this).parent(\'.item-with-ul\').find(\'>ul\');
$touchButton = $(this).parent(\'.item-with-ul\').find(\'>span.touch-button\');
if ($nav.hasClass(\'lg-screen\') === true) {
$(this).parent(\'.item-with-ul\').siblings().find(\'ul.flexnav-show\').removeClass(\'flexnav-show\').hide();
}
if ($sub.hasClass(\'flexnav-show\') === true) {
$sub.removeClass(\'flexnav-show\').slideUp(settings.animationSpeed);
return $touchButton.removeClass(\'active\');
} else if ($sub.hasClass(\'flexnav-show\') === false) {
$sub.addClass(\'flexnav-show\').slideDown(settings.animationSpeed);
return $touchButton.addClass(\'active\');
}
});
$nav.find(\'.item-with-ul *\').focus(function () {
$(this).parent(\'.item-with-ul\').parent().find(".open").not(this).removeClass("open").hide();
return $(this).parent(\'.item-with-ul\').find(\'>ul\').addClass("open").show();
});
resizer();
return $(window).on(\'resize\', resizer);
};
}).call(this);