웹 탐색 모음에 표시 할 요소 수를 프로그래밍 방식으로 결정

Question

가로 탐색 모음에 임의의 수의 항목을 포함 할 수 있습니다. 이제이 페이지의 너비가 1000px이고 표시되는 모든 항목이 1300px라고 가정 해 보겠습니다. 이제 내가 원하는 것은 요소가 1000px 이상으로 확장되어 드롭 다운 메뉴에 넣는 것입니다. 내가 겪고있는 문제는 창 너비를 변경할 수있을 때 모든 요소가 창에 맞는지 확인하기 위해 필요한 요소 수를 파악하는 가장 좋은 방법입니다 (사용자가 창 너비를 변경하면 요소 수 드롭 다운에서 증가 또는 감소 할 것입니다) 탐색 요소 너비가 임의입니까?

구글 플러스의 사이드 탐색과 비슷한, 수직 대신 가로 방향.

Answer 1

오버플로가 숨김으로 설정된 상위 div에 탐색 요소를 추가하여 추가 nav 요소가 숨겨집니다.
그런 다음 jquery를 사용하여 숨겨진 항목을 찾아서 드롭 다운 메뉴에 추가하십시오. 이 질문에 대한 답변을보십시오 : jQuery: How to get content not visible with overflow: hidden?

제 작업 예제를 참조하십시오 : http://jsfiddle.net/zSXTb. 기본 사항 :

var h = $("#container").height(); 
$("#container").find("div").each(function() { 
    if ($(this).position().top > h) { 
     $(this).clone().appendTo($("#extrasContent")); 
    } 
}); 

이 온로드를 실행하고 창 크기를 조정할 때.

Answer 2

@media 쿼리를 CSS와 함께 사용해보세요. 화면 크기와 관련하여 많은 제어 권한을 얻습니다. 예를 들어 :

@media all and (max-width: 1000px){ 
    /*insert normal css. e.g.:*/ 
    body{ 
     width: 700px; 
    } 
} 

당신은 분 폭 대신 최대 폭로 사용할 수 있습니다.