响应式菜单 flexnav
官网：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);
