关闭画布导航默认打开/关闭

我在我正在处理的网站上有关闭画布导航。关闭画布导航的默认状态已关闭，在移动网站上运行良好，因为您可以将其切换为打开状态并选择链接，但在桌面上关闭并切换到隐藏用户的信息，我希望它成为当用户到达页面时默认打开。关闭画布导航默认打开/关闭

目前导航使用jQuery来使切换：

$("#main-menu-toggle, #main-menu-caption, .menu-mask").on("click", function() { 
    // toggle the classes in the body the css does the rest 
    $("body").toggleClass('main-menu-open'); 

    // for screen readers lets set the ARIA atributes 
    if ($("body").hasClass('main-menu-open')) { 
     $('#navbar, #main-menu-toggle').attr('aria-expanded', 'true'); 
    } else { 
     $('#navbar, #main-menu-toggle').attr('aria-expanded', 'false'); 
    } 
});

而且还有一个呼叫在那里当页面加载以及调整大小，以显示和隐藏菜单根据屏幕尺寸：

// show or hide the main navigation menu when the page is loaded 
showHideMenu(); 

$(window).resize(function() { 
    waitForDraggingStop(function(){ 
     showHideMenu(); 
    }, 500, "window resize in progress"); 
}); 

// adds or removes the classes for the menu addition or removal 
function showHideMenu() { 
    if (955 < $(window).width()) { 
     $("body").addClass('main-menu-open'); 
     $('#navbar, #main-menu-toggle').attr('aria-expanded', 'true');  
    } else { 
     $("body").removeClass('main-menu-open'); 
     $('#navbar, #main-menu-toggle').attr('aria-expanded', 'false');  
    } 
}

问题是菜单中有一个与之关联的动画，所以当你到达桌面时会出现延迟，然后菜单就会弹出。这很快就会让用户恼火，因为他们必须等待页面完成动画才能使用屏幕。

问题： 有没有更好的方式来做到这一点使用的CSS/JS当用户在相同的标志下面谈到上述955px的页面，默认情况下崩溃，将有默认展开的菜单，并允许在稍后的点击切换时避免与使用JS添加公开课的动画相关的延迟？

来源

2015-06-11 dpegasusm

我在这里有一个想法，如果我对待jQuery添加类像一个状态切换，而不是一个状态，我可能能够重新创建CSS以获得我想要的状态。 955以上的CSS会默认打开没有切换，但它的存在会关闭它，并在955以下的缺席将保持关闭，但它的存在会打开它。这将完全删除加载类的jQuery以及调整大小函数。可能会更好地将主体类重命名为“主菜单打开关闭” – dpegasusm

这很容易...您应该使用媒体查询...这不是js。所以...移动第一...菜单是使用定位或translateX ....在955px宽的非画布，然后您更改定位或translateX。很简单。 –

@SeanStopnik改正它是如何工作的，但它需要能够通过具有不同默认状态的切换打开和关闭，具体取决于屏幕大小。 955或>默认打开，并且切换关闭它<955默认关闭，切换打开它。我最终使用上面评论中的方法解决了这个问题。 – dpegasusm

我最终解决这一使用方法来自我的意见：

我处理了jQuery添加类像一个状态切换，而不是像打开或关闭的状态。

955以上的CSS将默认打开没有切换，但它的存在会关闭它，并在955以下的缺席将保持关闭，但它的存在会打开它。

这将完全删除加载类的jQuery以及调整大小函数。

此外，我将主体类重命名为“main-menu-open-close”以反映切换。

来源

2015-06-11 17:16:24 dpegasusm

关闭画布导航默认打开/关闭

回答

相关问题