關閉畫布導航默認打開/關閉

我在我正在處理的網站上有關閉畫布導航。關閉畫布導航的默認狀態已關閉，在移動網站上運行良好，因爲您可以將其切換爲打開狀態並選擇鏈接，但在桌面上關閉並切換到隱藏用戶的信息，我希望它成爲當用戶到達頁面時默認打開。關閉畫布導航默認打開/關閉

目前導航使用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

關閉畫布導航默認打開/關閉

回答

相關問題