오바마 식 플라이 아웃 메뉴 - 텍스트 폭 유지

Question

http://www.barackobama.com과 같은 반응 형 탐색 메뉴를 만들려고합니다. 작은 화면 너비에서 사용자가 "메뉴"링크를 클릭하면 기본 페이지 내용이 뷰포트 밖으로 오른쪽으로 밀려 내려 가서 아래의 nav 메뉴를 표시합니다. (내 JSFiddle http://jsfiddle.net/andfinally/VvWWh /.) #main의 내용을 재배치하는이 이벤트의 html 요소에 .show-nav 클래스를 적용하여이 작업을 수행합니다. #main에는 1 초 장면 전환 CSS 규칙이있어 움직임을 부드럽게합니다.

네비게이션을 열 때 Chrome에서 지금까지 정상적으로 작동하는 것 같습니다. 그러나 다시 축소하면 콘텐츠 영역의 텍스트가 다시 정렬됩니다. 오바마 사람들이 어떻게 이런 일을 막을 수 있었는지 설명 할 수 있습니까? 내용이 하나의 정적 인 객체처럼 슬라이드하고 싶습니다.

Answer 1

콘텐츠 div의 너비가 고정되어 있지 않기 때문입니다.

#main의 너비를 90 %로 고정하면 원하는대로 작동합니다.

즉 당신의 CSS를이 추가 :

#main { 
    width: 90%; 
}