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

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

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

Теперь нам показывается навигация, независимо от того, используем ли мы маленький, большой или средний экран. Далее нам нужно все настроить так, чтобы при работе с маленьким экраном навигация скрывалась. И первое, что мы сделаем, это поменяем способ, которым ведет себя контейнер nav. Давайте вернемся к нашему текстовому редактору. Переходим к верстке для большого экрана. Находим правило для nav. А затем после свойства top переходим к свойству overflow и устанавливаем его на hidden. Теперь, когда свойство установлено, мы устанавливаем наш элемент навигации на нулевую высоту, и мы не хотим видеть какие-то элементы тут.

Сохраняем этот файл. Возвращаемся к design.js, прокручиваем вниз до области load hero. Внутри оператора условия для большого размера окна давайте нацелимся на элемент навигации. Пишем знак доллара, круглые скобки, две одинарные кавычки для строкового литерала. Набираем nav, за круглыми скобками .css. Другой набор круглых скобок и точка с запятой, также две одинарные кавычки для строкового литерала. Мы собираемся установить высоту. Это свойство, затем мы ставим запятую.

Еще две кавычки для строкового литерала, и мы пишем слово auto. В таком случае, если размер окна большой, мы устанавливаем CSS свойства для элемента навигации на height и auto. Это означает, что высоту будет определять div и все якорные величины внутри него. Давайте зайдем сюда и скопируем это выражение. Теперь заходим в элемент для среднего размера окна. Мы должны убедиться, что действительный размер окна больше пятисот пикселей, поскольку размер окна может быть 500 пикселей, но внутренний размер, или размер контента, может быть меньше в зависимости от того, есть ли полоса прокрутки.

Итак, давайте зайдем сюда и добавим оператор условия. Добавляем круглые и фигурные скобки. Открываем их. Внутри if мы скажем, что если actualSize больше чем 500, то мы вставляем элемент nav, а свойство height устанавливаем на auto. Для маленького экрана мы сделаем что-то очень похожее. Копируем весь оператор условия из элемента для среднего экрана и вставляем в элемент для маленького экрана. И мы говорим здесь, что если действительный размер меньше или равен пятистам, то CSS свойство height изменится с auto на ноль пикселей, так что теперь высота для маленьких экранов будет равна нулю.

А поскольку для элемента навигации свойство overflow установлено на hidden, навигация просто исчезнет. Теперь, чтобы у нас была возможность видеть, что числа подсчитываются быстрее, давайте зайдем в нашу функцию document.ready и поменяем setInterval с 1000 миллисекунд на 100 миллисекунд, затем мы нажимаем Save. Теперь, когда мы меняем размер браузера, у нас будет более быстрое представление о том, как меняются числа. Возвращаемся в браузер и нажимаем Reload. Уменьшаю размер окна браузера и вижу, что числа меняются немного быстрее.

Давайте перейдем к маленькому размеру экрана. Как только мы это сделаем, наша навигация будет полностью свернута. Если я разверну окно, а также там будет полоса прокрутки, то я увижу здесь 477, а не 492. Вот случай, когда у нас окно больше 500 пикселей. Но опять же, мы не переходим к среднему экрану, потому что наш медиа-запрос смотрит на 489. Именно поэтому мы вставляем сюда определение размера, чтобы убедиться, что мы не вызываем навигацию для среднего экрана, пока медиа-запрос не обнаружит 500.

Поэтому мы считаем до 500. А когда мы перейдем к 501, то увидим, что появится экран среднего размера. Теперь навигация снова вернулась к настройке auto. И теперь свойство height будет установлено на auto. Так что навигация будет видна на больших и средних экранах. Вернемся снова к маленькому окну. Навигация свернута. Теперь, когда навигация спрятана для маленьких экранов, мы активируем кнопку для мобильного меню. Если пользователь нажмет или коснется кнопки, будет открыта навигация нужного размера.