2013-04-11 2 views
0

(데이비드에 따라 캔버스 응답 메뉴를 bushell) 브라우저의 너비를 줄이면 세 개의 수평선 아이콘이 보입니다. 클릭하면 메뉴가 열리고 모든 링크가 보이지 않기 때문에 문제가있는 부분입니다.고정 위치는 내가 다음 페이지가

먼저 메뉴 항목이 페이지 아래쪽에 나열되고 기본 콘텐츠의 높이에 제한되지 않도록하고 싶습니다. 둘째로 주 콘텐츠를 고정시키고 메뉴를 스크롤 할 수있게하고 싶습니다. (http://disney.com/?intoverride=true을 참조하면 메뉴를 클릭하면 메인 콘텐츠가 고정되지만 메뉴는 여전히 스크롤 할 수 있습니다.

작동하지 않는 주요 콘텐츠에 고정 위치를 설정하려고했습니다. 이것에 대한 도움을 주시면 감사하겠습니다.

미리 감사드립니다.

답변

0

#nav의 '오버플로'값을 '스크롤'로 변경해야합니다. 오버 플로우를 가짐으로써

#nav { 
    position: absolute; 
    top: 0; 
    padding-top: 5.25em; 
    overflow: scroll; 
    etc...... 
} 

을 : 그래서 CSS 읽을 것이다 스크롤, 적어도 사용자에게 메뉴 목록을 스크롤 할 수있는 기능을 제공합니다.

0

CSS에 많은 변경을해야합니다. 여기에 효과적으로 목록을 작성하려면 너무 많은 항목이 필요하며 충분히 테스트하기가 쉽습니다.

여기서 중요한 목표는 목록에서 절대 높이를 갖는 것입니다. 절대 위치는 요소가 레이아웃에서 무시됩니다.

#nav#main 요소에있는 translate3d 속성을 제거하고 대신 #nav 플로트를 남겨 둡니다. 그런 다음 원하는대로 표시되도록 #main 요소에서 오버플로, 너비 및 기타 여러 속성을 가지고 놀아야합니다.

일부 메뉴는 #nav { width: 0; } html.js-nav #nav { width: 70%; }과 같은 새 규칙을 필요로하므로 메뉴를 표시 할 때 전환 할 수 있습니다.

이것은 시작점이며, 지금보다 더 나은 위치에 있어야합니다. 아래로 더 내려와 있으면 도움을 청하십시오.

관련 문제