Question

윈도우가로드 될 때 드롭 다운 메뉴로 바꾸고 싶거나 800 픽셀 이하로 크기를 조정할 수있는 수퍼 에프 지원 가로 메뉴가 있습니다. 창 크기를 800 픽셀 이상으로 조정하면이 드롭 다운을 수평 목록으로 되돌리려합니다.

수평 메뉴는 다음과 같습니다, PHP를 통해 출력 (여기 간체) :

$("#menu-primary").wrap("<ul id='menu-dropdown' class='sf-menu sf-vertical'><li id='li_drop' class='menu-item'></li></ul>"); 
$("#menu-primary").before("<span id='nav-dropdown' class='sf-with-ul'>MENU</span>"); 

그리고 랩퍼에 superfish 전화 :

<ul id="menu-primary"> 
     <li id="menu-item-683">...</li> 
     <li id="menu-item-10"> 
     <a class="sf-with-ul" href="about-us">About Us</a> 
     <ul class="sub-menu"> </ul> 
     </li> 
     ... 
</ul> 

그래서 나는이 같은 메뉴를 포장하려 더 작은 창 크기를 지정하고 다음과 같이 큰 창 크기의 래퍼에서 superfish 클래스를 제거하면됩니다.

function menudrop(){ 
if ($(window).innerWidth() < 800) { 
    $("#menu-dropdown").addClass("menu menu-dropdown superfish sf-js-enabled"); 
    $('#menu-dropdown').superfish({delay:100,animation:{height:'show'},dropShadows: false, speed: 1}); 
} 

else { 
    $("#menu-dropdown").removeClass("menu menu-dropdown superfish sf-js-enabled"); 
} 
} 

대부분 작동하지만, < 800 픽셀에 페이지를로드하고> 800으로 크기를 조정하면 #menu-primary이 표시되지 않습니다. 래퍼를 추가하지 않은 것처럼 CSS를 똑같이 만들려고했으나 작동하지 않습니다. 어쨌든 $('#menu-dropdown').superfish();을 실행 취소해야 할 필요가있는 것처럼 보이지만 그 방법을 모릅니다.

가능하거나 메뉴를 <select><option>... 메뉴로 변환하지 않고도이 아이디어를 달성 할 수있는 더 좋은 방법이 있습니까?

Answer 1

Superfish는 메뉴에 바인딩 된 jquery 이벤트가 있어야합니다. 따라서 html을 정확하게 이전 것으로 변경하더라도 드롭 다운 효과가 변경 될 수 있지만 여전히 버그가 있습니다. Superfish 효과는 되돌릴 수 없다 (나는 생각한다.) 그러나 당신은 드롭 다운 메뉴에서 같은 CSS에 대해 2 개의 스타일을 정의 할 수있다. 이미 가지고있는 것은 # menu-primary이고 다른 하나는 # menu-primary2 (또는 다른 것)이다. 이 두 스타일은 정확히 같아야합니다.

이

var oldmenu = $('#menu-primary').html(); 
$('#menu-primary').superfish(.... 

그런 다음 브라우저의 크기에> (800)는 기존의 HTML 다시 붙여 넣습니다 다음 superfish 효과를 적용하기 전에, 기존의 메뉴 html로 저장

$('#menu-primary').html(oldmenu); 

을 그리고 같은 (동일한 스타일로) 다른 클래스를 적용 :

$('#menu-primary').attr("id", "menu-primary2"); 

이제 슈퍼 캐어 효과는이 메뉴에서 작동하지 않으며 스타일은 여전히 ​​동일합니다.