我的问题在下面的笔上给出
http://codepen.io/dingo_d/pen/oXBYjW
我有一个工作菜单。在移动宽度(<700px)和普通浏览器(&gt; 1170px)中。
如果您刷新这些尺寸的笔,并单击菜单项,一切正常。在任何尺寸。
然而,在调整大小时,控制动画的切换功能部分不能正常工作。此代码位于header_toggle()
函数
$menu_toggle.on('click', function (e) {
if ($(window).width()<960) {
$(this).toggleClass('mobile_open');
if ($(this).hasClass('mobile_open')) {
$navigation.fadeIn().animate({width: '70%'},250);
} else{
$navigation.animate({width: '0' },250).fadeOut();
}
} else{
$(this).toggleClass('open');
if ($(this).hasClass('open')) {
$breadcrumbs_bar.toggle('slide', {direction: 'up'}, 250, function () {
$navigation.toggle('slide', {direction: 'down'}, 250).css('display', 'inline-block');
});
} else {
$navigation.toggle('slide', {direction: 'down'}, 250, function () {
$breadcrumbs_bar.toggle('slide', {direction: 'up'}, 250).css('display', 'inline-block');
});
}
}
e.preventDefault();
});
就像调整大小一样,当你在函数内部时,if语句不能一直运行?任何解决方法?
我最关心的问题是,如果有人在平板电脑上,并将其翻转,并且正好在决议之间,那么这个问题就会发生。
在大小超过960像素的情况下,动画会上下滑动,切换的类别为open
,低于您的淡入淡出和宽度动画以及类切换mobile_open
。
使用css完成所有操作是不可能的,因为使用css(使用transform
属性)的向上和向下滑动动作只有在我为容器隐藏溢出时才有效,但是如果我有一个drop向下菜单,溢出应该是可见的。
调整大小代码:
$(window).on('resize',function(){
toggle_menu();
header_toggle();
if ($(window).width()>767) {
if ($main_header.has($navigation)) {
$navigation.detach().appendTo('.menu_wrapper');
}
} else{
$navigation.detach().prependTo('body');
}
});
小提琴具有所有jquery代码。
答案 0 :(得分:0)
我刚刚完成了一个类似于你想要做的菜单。
看看这个codepen:http://codepen.io/anon/pen/YXZgYR
<强> isMobile()强>
检查窗口是否处于Mobile分辨率的功能。
setMenuType()
在页面加载时和窗口调整大小时向导航栏添加/删除类的功能。
<强> windowResize()强>
我包含了setTimeout,因此只有在窗口调整大小时才会运行该函数。
希望这可以帮助您了解如何进行移动/桌面导航栏/菜单。
$(document).ready(function() {
function isMobile() {
if (window.innerWidth < 767) {
return true;
}
}
setMenuType();
function setMenuType() {
if (isMobile()) {
$('nav').removeClass('desktop');
$('nav').addClass('mobile');
} else {
$('nav').removeClass('mobile');
$('nav').addClass('desktop');
}
}
var resizeId;
$(window).resize(function() {
clearTimeout(resizeId);
resizeId = setTimeout(setMenuType(), 500);
});
});