Верстка \ Адаптивная верстка

CSS: Адаптивное навигационное меню

В этом уроке мы научимся создавать адаптивное меню с помощью CSS.

От автора: я уже писал учебник о том, как сделать мобильную навигацию для адаптивного дизайна, теперь я открыл новую методику создания адаптивного меню без применения Javascript’а. В нем используется чистая семантическая разметка HTML5. Меню можно выравнивать по левой стороне, по центру или справа. В отличие от предыдущего учебника, где его нужно переключать, это меню переключается при проведении мышью, что более удобно для пользователя. В нем также имеется индикатор, показывающий активный/текущий элемент меню. Оно работает во всех мобильных и настольных браузерах, включая Internet Explorer!

Продолжить чтение

Верстка \ Адаптивная верстка

Большие меню, маленькие экраны: адаптивная многоуровневая навигация

От автора: если вы когда-либо работали над адаптивным вебсайтом, вам, несомненно, приходилось биться над одной из самых коварных проблем этой развивающейся области: навигацией. Решение ее для простой навигации может быть прямолинейным. Однако если вы работаете над чем-то более сложным – возможно, с множественными вложенными списками и выпадающими меню – может оказаться уместной более кардинальная реконструкция.

Продолжить чтение