내가 포함 된 예와 같이 드롭 다운하고 드롭해야합니다.

Question

드롭 다운 탐색 모음 (오른쪽 상단)과 드롭 다운 버튼/링크 (왼쪽 상단)를 만들어야합니다. 화면이 감소하면 드롭 다운이 표시되어 특정 픽셀 너비에 도달합니다. 드롭 다운 (NAV)을 볼 수 없다면 브라우저를 더 작게 조정하십시오.

그들은 브라우저의 크기에 반응 할 필요가있다. 이것은 모바일 사이트 (아이폰 및 안드로이드)입니다. 가능한 경우 바이올린을 포함하십시오. 또는 자세한 지침. 나는 부트 스트랩이나 다른 플랫폼을 그냥 Html5 css3 및 javascript/jquery를 사용하고 싶지 않습니다. 애니메이션도 포함시켜주십시오.

예 : 내가 이것을 어떻게해야합니까 http://treadsack.com/

?

대단히 감사합니다!

Answer 1

그럼 당신은 다른 스타일을 적용 할 CSS media queries을 사용할 수 있습니다

ul { 
    display:block; 
} 
li { 
    display:inline-block; 
    height:30px; 
    line-height:30px; 
} 
span { 
    display:none; 
    height:30px; 
    line-height:30px; 
    cursor:pointer; 
} 
@media (max-width:600px) { 
    ul { 
     display:none; 
    } 
    li { 
     display:block; 
    } 
    span { 
     display:inline; 
    } 
} 

다음으로 NAV를 클릭하면 드롭 다운 표시/숨기기 :

$('span').click(function() { 
    $(this).siblings('ul').slideToggle('slow'); 
}); 

이 부분은 jsfiddle을 참조하십시오. 당신이 <span> 다시 드롭 다운을 숨기기 위해 클릭 할 때

---

지금 당신은 뷰포트가 인라인 메뉴 목록이 표시되지 않는 이상 600 폭 크기를 조정합니다. 이는 .slideToggle(), js/jQuery으로 인하여 스타일링을 요소에 인라인 속성 <ul style="">으로 지정하고 CSS 스타일링을 덮어 씁니다. CSS에서 !important을 선언하여 jQuery 스타일링을 우회 할 수는 있지만이 경우 jQuery를 사용하여 드롭 다운 메뉴를 슬라이드하면 유용하지 않을 수 있습니다.

해결 방법은 viewport/window 크기 조정을 jQuery를 통해 처리하는 것입니다. CSS 미디어 쿼리는 window.innerWidth을 수신하지만 크로스 브라우저 (특히 이전 IE)에서는 다른 값을 반환 할 수 있습니다.그래서 우리는 viewport-width을 반환하는 함수를 만들어야합니다

function viewportWidth() { 
    var e = window, 
     a = 'inner'; 
    if (!('innerWidth' in window)) { 
     a = 'client'; 
     e = document.documentElement || document.body; 
    } 
    return e[a + 'Width']; 
} 

그런 다음 창 resize 이벤트에 사용 :

$(window).resize(function() { 
    if (viewportWidth() <= 600) { 
     $('span').show(); 
     $('ul').hide(); 
    } else { 
     $('ul').show(); 
     $('span').hide(); 
    } 
}); 

확인이 jsfiddle을.

Answer 2

이것은 당신이 올바른 방향으로 얻을 수 있도록해야합니다

나는 다음과 같은 jQuery를 코드와 더불어, jsFiddle 만든 메뉴와 실제 일을 :

var links_are_showing = false; 
$("#links").click(function() { 
    if (!links_are_showing) { // Link menu is not visible, show 
     $("#links_container").slideDown(400); 
     $("#main_container").animate({'top':'320px'},400); // Change 400 to any time in ms you want 
     links_are_showing = true; 
    } // Link menu is not visible, show 
    else { // Link menu is visible, hide 
     $("#links_container").slideUp(400); 
     $("#main_container").animate({'top':'0'},400); // Change 400 to any time in ms you want 
     links_are_showing = false; 
    } // Link menu is visible, hide 
}); 


var nav_is_showing = false; 
$("#nav").click(function(){ 
    if (!nav_is_showing) { // Nav menu is not visible, show 
     $("#nav_container").slideDown(400); // Change 400 to any time in ms you want 
     nav_is_showing = true; 
    } // Nav menu is not visible, show 
    else { // Nav menu is visible, hide 
     $("#nav_container").slideUp(400); // Change 400 to any time in ms you want 
     nav_is_showing = false; 
    } // Nav menu is visible, hide 
}); 

는 희망이 도움이! 이 마크 업 구조가있는 경우

는

@media (max-width:600px) { 
/* if the viewport is less than or equal to 600px hide the div */ 
    div { display:none; } 
} 

는 :

는

<nav> 
<span>NAV</span> 
<ul> 
    <li>Home</li> 
    <li>About</li> 
    <li>News</li> 
</ul> 
</nav> 

그런 다음 CSS는 것 다음 viewport/screen 크기가 변경 될 때