Выпадающее меню в стиле Обамы — с сохранением ширины текста

Я пытаюсь создать отзывчивое навигационное меню, подобное тому, что находится на http://www.barackobama.com. (См. мой JSFiddle http://jsfiddle.net/andfinally/VvWWh/.) На экранах меньшей ширины когда пользователь щелкает ссылку «Меню», содержимое главной страницы перемещается вправо, за пределы области просмотра, открывая навигационное меню ниже. Я делаю это, применяя класс .show-nav к html-элементу этого события, который перемещает содержимое в #main. #main имеет 1-секундное правило CSS перехода, чтобы сделать движение более плавным.

Кажется, пока это работает нормально в Chrome, когда вы открываете навигацию. Но когда вы снова сворачиваете его, текст в области содержимого перестраивается. Кто-нибудь может объяснить, как парням из Обамы удалось предотвратить это? Я бы хотел, чтобы контент скользил вперед и назад, как один статический объект.


person And Finally    schedule 13.07.2012    source источник


Ответы (1)


Это потому, что ваш контент div не имеет фиксированной ширины.

Если вы зафиксируете ширину #main, скажем, на 90%, она будет работать так, как вы хотите.

то есть добавьте это в свой css:

#main {
    width: 90%;
}
person ryuusenshi    schedule 13.07.2012
comment
Упс! Я должен был это знать. Спасибо, рюусенши! - person And Finally; 13.07.2012
comment
Хе-хе, без проблем. Я рад, что могу помочь. Кроме того, вы можете проверить это: stephanierieger.com/a-plea-for -прогрессивное-улучшение - person ryuusenshi; 13.07.2012