토글이있는 응답 내비게이션 메뉴

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").css({"margin-left":"310px"}); 
      } 
      else if ($("#navigation-panel").is(":visible")) { 
       if ($(window).width() > 1024) { 
        $("#photos").css({"margin-left":"410px"}); 
       } 
      } 
     } 
    } 

안부 :

필자는 이것을 시도하지만 중 하나가 작동하지 않습니다 :

편집

$(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 : 그것은이 추가 수정있어 조엘

Answer 1

navToggle() 함수를 트리거해야합니다. 창에서 lso가 크기를 조정합니다.

난 당신이