Предыдущий ролик Следующий ролик  

Видео урок: Настройка кнопки навигации для мобильных устройств

Создание отзывчивого веб-дизайна

Теперь мы поработаем над тем, чтобы поменять навигацию для маленьких экранов. Так что давайте вернемся в текстовый редактор. Сначала заходим в наш файл index.html. Прокручиваем вниз. Находим div с id равным hero. Теперь нажимаем Return. Заходим сюда и добавляем якорную ссылку для мобильного меню. Итак, a, пробел. Устанавливаем класс mobile_menu, закрываем тег и закрываем элемент. Также мы хотим, чтобы навигация была открыта, если она является меню. Чтобы сделать это, нам надо свернуть здесь элемент навигации. Нам нужно, чтобы здесь внутри был контейнер, чтобы мы могли получить измерение.

И вот что мы сделаем внутри навигации - мы нажмем Return и добавим сюда элемент div. Итак, перед самой первой якорной ссылкой добавляем открывающий div. После последней якорной ссылки добавляем закрывающий div. Я захожу сюда и делаю для них табуляцию. Позже в этом курсе, когда мы будем определять высоту навигации, мы будем проверять высоту этого элемента, который будет спрятан внутри данного конкретного элемента. И мы будем знать, насколько маленькой должна быть навигация для людей, использующих маленькие экраны. С этим изменением, сделанным в HTML, давайте перейдем к файлу large.css.

Давайте перейдем в низ документа. Добавляем правило a.mobile_menu. Фигурные скобки. Устанавливаем display на none. Таким образом будет спрятано меню для мобильных устройств для всех размеров экрана. В предыдущем курсе мы использовали верстку для большого экрана по умолчанию для всех трех состояний, а теперь мы поработаем над маленьким экраном. Теперь, с изменениями, сделанными для большого экрана, давайте перейдем к small.css. Спускаемся в низ документа. Заходим сюда и определяем, как будет выглядеть меню для маленьких экранов.

Пишем a.mobile, подчеркивание, menu, фигурные скобки, и первым свойством будет display. Мы устанавливаем его на block. Далее мы устанавливаем ширину. Допустим, 30 пикселей. Теперь устанавливаем высоту на 34 пикселя, а потом border-top, мы используем сокращенный стиль, два пикселя для solid #fff, затем мы устанавливаем border-left, те же свойства, что и раньше.

Два пикселя, solid и white. Затем border-right. И те же самые настройки, два пикселя, solid и white. Далее мы устанавливаем радиус border-top-left-dash. И мы укажем здесь шесть пикселей. Потом мы устанавливаем радиус top right. Также указываем шесть пикселей. Затем мы устанавливаем задний фон. Цвет будет #a6430a. Url, ../, чтобы перейти к корневой папке, /images, /mobile_link_menu.png.

Затем мы устанавливаем no repeat, 4 пикселя для позиции x и 4 пикселя для позиции y. Далее мы устанавливаем position на absolute. Свойство top устанавливаем на 64 пикселя. Свойство left - на 10 пикселей. И наконец, поскольку у нас нет href, мы устанавливаем курсор на указатель, и потом мы определяем выбранное состояние для мобильного меню, когда оно открыто, так что a.mobile_menu.selected, а также мы установим позицию заднего фона на 4 пикселя для X и минус 26 пикселей для Y. Теперь, когда все на месте, нажимаем Save.

Переходим в браузер и нажимаем Reload. Сворачиваю браузер до маленького размера экрана. И как только у нас есть маленький экран, мы видим кнопку для мобильного меню прямо над навигацией. Теперь, когда кнопка для навигации показана должным образом, мы поработаем над состоянием навигации, чтобы при работе с маленьким экраном она пряталась, а на среднем и большом экране - показывалась.