帶觸發器的自適應導航菜單

Question

我正在努力完成我在馬德里此刻正在做的主人的網站項目，而且我很難完成此任務。

你可以看看本網站上的傻瓜代碼：

http://cice.digitalcore.es/febrero/majestic/

用於切換的代碼是：

//Navigation Toggle 
    function navToggle() { 
     if(open){ 
      if ($(window).width() <= 1024) { 
       $("#navigation-panel").animate({width: "toggle"}, 500) 
       $("#photos").animate({"margin-left":"310px"}, 500); 
       open= false; 
      } 
      else if ($(window).width() > 1024) { 
       $("#navigation-panel").animate({width: "toggle"}, 500) 
       $("#photos").animate({"margin-left":"410px"}, 500); 
       open= false; 
      } 
     } 
     else { 
      $("#navigation-panel").animate({width: "toggle"}, 500) 
      $("#photos").animate({"margin-left":"10px"}, 500) 
      open= true; 
     } 
    } 

我的主要問題是，一旦導航是在開放首先一切都很好，但是一旦在1024以下或其他方式調整圖像牆壁制動器的大小時，它不會考慮分辨率低於1024或1024以上的不同邊距。

我希望你能幫助我，我會很感激:)。

編輯：

我用盡這一點，但它不工作之一：

$(window).resize(autoResize); 

    //Auto Resize 
    function autoResize() { 
     if ($("#navigation-panel").is(":visible")) { 
      if ($(window).width() <= 1024) { 
       $("#photos").animate({"margin-left":"310px"}, 500); 
      } 
      else if ($("#navigation-panel").is(":visible")) { 
       if ($(window).width() > 1024) { 
        $("#photos").animate({"margin-left":"410px"}, 500); 
       } 
      } 
     } 
    } 

感謝Easwee :)必須去解決它添加此：

$(window).resize(autoResize); 

    //Auto Resize 
    function autoResize() { 
     if ($("#navigation-panel").is(":visible")) { 
      if ($(window).width() <= 1024) { 
       $("#photos").css({"margin-left":"310px"}); 
      } 
      else if ($("#navigation-panel").is(":visible")) { 
       if ($(window).width() > 1024) { 
        $("#photos").css({"margin-left":"410px"}); 
       } 
      } 
     } 
    } 

最好的問候， Joel

Answer 1

您需要觸發navToggle()函數a也在窗口調整大小。

因爲我看你使用jquery看看http://api.jquery.com/resize/