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

Видео урок: Открытие и закрытие панели навигации

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

Чтобы открыть навигацию, когда кто-то нажимает на кнопку на мобильном устройстве, нам нужно будет добавить к этой кнопке событие click. Давайте вернемся к файлу design.js в нашем текстовом редакторе. Внутри области document.ready нажимаем несколько return. Теперь нам нужно найти эту кнопку для мобильного меню. Итак, мы начинаем со знака доллара, круглые скобки. Одинарные кавычки для строкового литерала. Ищем a.mobile_menu. За круглыми скобками мы пишем .on еще один набор круглых скобок, точка с запятой.

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

Пишем var, пробел, и наша переменная называется navHeight. Пишем здесь равно 2, знак доллара, круглые скобки. Кавычки для строкового литерала. Мы будем использовать JQuery, чтобы искать элемент навигации, а также мы выясним его высоту. Пишем .height, круглые скобки, а затем точку с запятой. Далее нам нужно выяснить, какой ширины элементы внутри элемента nav. Так что мы создадим новую переменную, которая называется newNavHeight. Затем мы пишем равно, берем div, находящийся внутри nav. Итак, знак доллара, круглые скобки, строковый литерал, nav, пробел, div. Таким образом будет найден div, находящийся внутри элемента nav, который оборачивает все якорные ссылки. Вне круглых скобок .height, набор круглых скобок и точка с запятой. Нажимаем несколько раз return. Теперь давайте добавим оператор условия. Пишем if, добавляем наши круглые и фигурные скобки, фигурные открыты, а внутри круглых мы тестируем равенство navHeight.

Итак, navHeight, пробел, два знака равно, 0, то есть navHeight на данный момент равно 0, а это значит, что высота навигации равна нулю, тогда мы знаем, что находимся на маленьком экране. Начинаем со знака доллара, круглые скобки, внутри круглых скобок - одинарные кавычки для строкового литерала. Ищем элемент nav. За круглыми скобками мы пишем .animate, открывающая и закрывающая круглые скобки, точка с запятой. Внутри круглых скобок вставляем фигурные.

Внутри фигурных скобок две кавычки для строкового литерала. Пишем слово height, а затем двоеточие. Теперь мы создадим анимацию высоты по navHeight. Давайте зайдем сюда. После двоеточия скопируйте имя переменной. Вставляем newNavHeight, затем знак плюса, потом две кавычки для строкового литерала и пишем px. Когда мы создаем анимацию высоты, мы на самом деле создаем анимацию CSS свойства height, значение будет установлено на высоту плюс px.

Итак, это значение указывается в пикселях. Затем за фигурными скобками запятая и 500 миллисекунд. Итак, сейчас мы знаем, что если кто-то нажмет на мобильное меню навигации, а текущая высота навигации равна 0, мы определим, какой высоты должна быть навигация для всех якорных ссылок внутри элемента div, находящегося в навигации, и мы будем создавать навигацию по этой новой высоте. Мы также будем использовать этот созданный класс в нашей CSS, чтобы показать пользователям, что сейчас меню открыто. На следующей строке, где navHeight все еще равно 0, пишем знак доллара, круглые скобки, и мы пишем this, который относится к элементу, на который нажали, то есть this, точка и addClass.

Открывающая и закрывающая круглая скобка, точка с запятой. Внутри кавычки для строкового литерала. Пишем selected. Теперь давайте зайдем сюда и добавим else к нашему оператору условия. Пишем else. Фигурные скобки, они открыты. Итак, для navHeight не равного 0 давайте скопируем это выражение для анимации. Мы собираемся создать анимацию высоты, так что давайте зайдем сюда и установим высоту на 0 пикселей. Также мы идем сюда и выбираем этот класс. Вставляем это сюда, и вместо того, чтобы добавить класс, мы говорим удалить класс.

Теперь, когда все на месте, возвращаемся в браузер. Нажимаем reload. Здесь у меня маленький экран. Если я перейду сюда и нажму на это, тогда создастся анимация для открытия навигации. Обратите внимание, что кнопка навигации здесь вверху находится в состоянии selected. Иконка у нас серого цвета, и на нее указывает стрелочка. А если я на нее кликну, тогда будет определено, что высота не равна 0, и произойдет анимация, и теперь мы можем увидеть, что иконка составляет 100%, а также имеется более светлая стрелка. Каждый раз, когда кто-то на нее кликает, мы определяем, установлена высота на 0 или нет, и это будет работать наподобие переключателя.

Вы можете продолжать кликать на нее, и она будет постоянно менять свое состояние, основываясь на том, каково текущее состояние. Но тут нужно еще кое-что добавить. Если я оставляю меню открытым, возвращаюсь и изменяю размер браузера, тогда CSS перестает работать, и у нас больше нет сложенного меню, а также мы не можем видеть кнопку для мобильного меню. Но когда я снова вернусь к маленькому экрану, навигация будет спрятана, потому что мы определяем, что размер экрана изменился. Но обратите внимание, что кнопка все равно находится в состоянии selected. Чтобы это исправить, нам нужно зайти в функцию loadHero. А когда мы удаляем весь HTML в области hero, мы сбрасываем также эту кнопку.

Давайте вернемся в файл JavaScript. Спускаемся вниз и находим loadHero, смотрим, где размер окна является маленьким. Теперь мы собираемся найти наше мобильное меню для маленького экрана. Знак доллара, круглые скобки. Одинарные кавычки, строковый литерал, a.mobile_menu. За скобками точка, пишем removeClass, круглые скобки, точка с запятой. Внутри мы набираем selected. Мы собираемся не только удалить класс selected, если меню навигации не равно 0, чтобы его закрыть,

мы также собираемся удалить его, когда запускаем функцию loadHero, а размер окна установлен на маленький. Возвращаемся в браузер, нажимаем reload. Открываем меню. Оставляем его открытым и меняем размер экрана. Средний, большой, снова средний. А когда я возвращаюсь к маленькому экрану, я вижу не только то, что навигация закрыта, я также вижу, что кнопка уже не находится в выбранном состоянии. Теперь у нас есть этот функционал, и мы можем добавить некоторую анимацию на панель hero для больших и средних экранов.