Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Foundation for Apps

Как построить сокращающуюся фиксированную верхнюю панель с помощью Foundation

by
Difficulty:IntermediateLength:LongLanguages:

Russian (Pусский) translation by Liliya (you can also view the original English article)

В наши дни очень распространенной тенденцией является использование фиксированной навигации, которая сжимается, становясь менее навязчивой, поскольку пользователь прокручивает страницу вниз. В этом уроке я покажу вам, как вы можете добиться этого, используя верхнюю панель ZURBs Foundation, некоторые пользовательские sass и jQuery.  В завершении, мы добавим несколько медиа-запросов, чтобы сделать наше меню отзывчивым. Давайте начнем!

Требования

Вам понадобится несколько вещей, чтобы получить хорошее представление об этом уроке:

  • Основное понимание Foundation Topbar
  • Базовое понимание Foundation и Grid системы
  • Знание работы с Sass и Compass
  • Небольшой опыт использования jQuery для обработки некоторых событий

Начинаем

Сначала мы создадим рабочую среду. Если вы не знаете, как это сделать, используя Compass и Sass, ознакомьтесь с разделом Начало работы (Getting Started) в разделе Build a Top Bar Off-Canvas Navigation With Foundation 5.

Создайте свой новый проект Foundation и используйте  compass watch для компиляции вашего проекта. Мы создадим наш собственный style.scss в папке scss для наших настроек и некоторого общего стиля. С этой настройкой мы погрузимся в общую структуру HTML, поехали!

Настройка структуры HTML

Шаг 1. Общая разметка

Запустив новый проект Foundation, перейдите в файл index.html и начните с удаления всего содержимого между тегами тела, за исключением скриптов непосредственно перед закрывающим тегом body. Then add the following line to your <head> чтобы импортировать наш style.css.


Затем мы добавим некоторую разметку, такую ​​как заголовок, основной раздел и нижний колонтитул, а также добавим фиктивный контент, чтобы дать нашей странице некоторое заполнение.


Здесь мы создали раздел заголовка, включая раздел <nav>, раздел содержимого и нижний колонтитул. Есть несколько вещей, которые нужно отметить:

  • Наш <nav>  имеет класс .important-class, которые мы будем использовать, чтобы сообщить jQuery, какой элемент нужно настроить, когда мы собираемся прокручивать вниз.
  • Мы включили div с классом .header-fill. Мы будем использовать это, чтобы разместить некоторое пространство между верхней частью браузера и секцией содержимого, поскольку наш заголовок будет исправлен и имеет более высокий индекс z, а затем остальные элементы на странице.

Шаг 2. Верхняя панель.

Затем, мы собираемся написать HTML для нашей верхней панели. Нам нужна зона заголовка для нашего логотипа и раздел с <ul>  для хранения наших пунктов меню. Взгляните на следующий HTML:



Мы добавили <ul>   title-area класса, в которой мы сохраняем наш логотип. Затем у нас есть <section> класс класса top-bar и <ul> с классом .right, содержащий все наши элементы списка. Наш образ имеет идентификатор logo-image, который нам также понадобится в нашем jQuery позже в этом уроке.

Шаг 3: Теперешние результаты

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

Настройка Sass

Чтобы получить желаемые результаты, нам понадобится базовый стиль для наших разделов, особенно заголовок и раздел Top Bar. Мы собираемся использовать Sass , чтобы это получилось.

Шаг 1: Общий стиль

Для начала, мы собираемся дать всем нашим разделам некоторый базовый стиль. Взгляните на Sass ниже:


Здесь мы используем переменную основного цвета, которую мы собираемся использовать для некоторых стилей Top Bar. Наш заголовок имеет приятную тонкую тень, поэтому на самом деле выглядит так, будто он плавает над остальной частью контента. Установив свое положение на фиксированное и сделав z-index: 999, мы следим за тем, чтобы навигационная панель попадала в верхнюю часть браузера, когда мы прокручиваем вниз и он остается выше всех остальных элементов на странице.

Наш .contain-to-grid класс имеет тонкий прозрачный белый цвет, так что, когда мы прокручиваем, кажется, что заголовок плавает поверх всех остальных элементов. Нам все равно нужно исправить это меню, поэтому давайте позаботимся об этом.

Шаг 2: Стиль верхней панели

Теперь мы добавим стиль, чтобы придать нашей верхней панели приятный, гладкий вид. Вы также можете настроить некоторые параметры верхней панели в файле _settings.scss, но я покажу вам, как это сделать, используя наши собственные переопределения. Sass ниже объясняет, что и где происходит:

Примечание: Мы собираемся переместить заголовок .padding-on-my-header класс ниже правил верхней панели. Это необходимо, чтобы отступы перекрывали верхнюю панель.

Мы добавили некоторые дополнения в нашу верхнюю панель, и установили переход 0,5 с, легкость 0.1s. Это обеспечит плавный эффект перехода, когда начнется наш jQuery. Фон установлен на none, так что наш заголовок имеет слегка прозрачный цвет, который мы предоставили нашему .contain-to-grid класс. Остальное - это некоторый базовый стиль для пунктов меню верхней панели, выпадающих меню, зависаний и активных состояний. Ничего не преувеличено, но оно дало нам чистый результат, добавив пропуски и пробелы.

Шаг 3: Теперешний результат

Давайте посмотрим, что у нас есть. Безусловно, начинает как-то выглядеть! Тем не менее, наше меню по-прежнему немного велико, когда мы прокручиваем страницу вниз. Вот где наш .padding-on-my-header шаги класса.

jQuery для эффекта

Давайте используем немного магии jQuery, чтобы добавить заголовок .padding-on-my-header класса на прокрутке и изменим логотип на меньший размер.

Шаг 1. Создание нашего init.js

Мы собираемся создать файл init.js для размещения нашего кода jQuery. Поместите его в папку / js и включите следующую строку внизу индексационного файла, перед тегом закрывающего тега, чтобы включить скрипт:

Наш init.js будет содержать следующее:

Давайте посмотрим, что на самом деле происходит здесь. Когда пользователь прокручивается вниз, мы выполняем следующую функцию: если пользователь прокручивает более 50 пикселей, мы делаем верхнюю панель меньшей и вставляем логотип меньшего размера:

  • Мы находим наш логотип и заменяем источник изображения нашим меньшим логотипом.
  • Затем мы ищем наш .important-class и добавляем к нему еще один класс: .padding-on-my-header

Когда мы вернемся назад и прокрутимся ниже 50 пикселей, мы сделаем обратное и удалим класс заполнения, вернув логотип большого ol'.

Шаг 2: Проверка результатов

Перейдите и вернитесь в браузер. Обновите страницу и попробуйте прокрутить вниз. Если все пойдет так, как планировалось, вы должны увидеть, как верхняя панель сокращается с плавным переходом, а большой логотип заменяется меньшим. Все идет очень хорошо. Но когда мы изменим размер нашего браузера, вы увидите, что он не совсем такой как нам нужно. Давайте позаботимся об этом!

Медиа-запросы для оптимизации мобильных устройств

Мы будем создавать медиа-запрос для устройств с разрешением 1024 пикселя и меньше. Чтобы это было правильно, нам нужно изменить небольшую точку остановки Foundation. Как вы говорите? Ну, это просто! Мы просто собираемся нырнуть в наш _settings.scss и искать следующую настройку:

Как вы можете видеть, мы переместили малый диапазон от 0em-40em до 0em-64em, который вычисляет до 1024px; Наш средний диапазон теперь начинается с 64em. Сохраните настройки, чтобы изменения вступили в силу, и давайте перейдем к нашему медиа-запросу!

Шаг 1. Добавление медиа-запросов

Наша верхняя панель на более мелком устройстве не должна быть такой большой. Мы немного уменьшим ее и изменим наше меню. Мы также будем использовать гораздо меньшую заливку заголовка. Давайте посмотрим, что мы здесь сделали:

Давайте посмотрим, что мы здесь сделали:

  • Мы удалили все дополнения и поля на верхней панели.
  • Мы указали текст меню, а значок гамбургера - серый цвет, вместо белого цвета по умолчанию, поэтому он отображается на нашем белом верхнем баре.
  • Мы установили наш логотип большего размера, чтобы поместиться в верхней панели.
  • В top-bar-section мы разрабатываем наши ответные пункты меню, гибкость и активные состояния.
  • Мы также изменяем размер и размещаем логотип меньшего размера.
  • Мы удалили некоторые дополнения и поля в нашем расширенном гибком меню.
  • Наконец, мы сделали наш .header-fill меньше, так что он равен высоте нашей верхней панели.

Шаг 2: Наслаждайтесь итоговыми результатами!

Когда мы вернемся к нашему браузеру и изменим его размер, мы можем теперь увидеть, что наша гибкая навигация в полном объеме. Прокрутите вниз и посмотрите, как изображение логотипа все еще меняется. Нажмите на значок меню, чтобы увидеть расширенную версию нашей гибкой навигации.

Заключение

С некоторыми масками Sass и jQuery нам удалось превратить мощную базовую верхнюю панель из ZURB's Foundation в потрясающий, модный притягательный заголовок с некоторыми плавными эффектами. Готовы к вашему пользованию или для ваших клиентских проектов. Счастливо!

Ресурсы




В наши дни очень распространенной тенденцией является использование фиксированной навигации, которая сжимается, становясь менее навязчивой, поскольку пользователь прокручивает страницу вниз. В этом уроке я покажу вам, как вы можете добиться этого, используя верхнюю панель ZURBs Foundation, некоторые пользовательские sass и jQuery.  В завершении, мы добавим несколько медиа-запросов, чтобы сделать наше меню отзывчивым. Давайте начнем!

Требования

Вам понадобится несколько вещей, чтобы получить хорошее представление об этом уроке:

  • Основное понимание Foundation Topbar
  • Базовое понимание Foundation и Grid системы
  • Знание работы с Sass и Compass
  • Небольшой опыт использования jQuery для обработки некоторых событий

Начинаем

Сначала мы создадим рабочую среду. Если вы не знаете, как это сделать, используя Compass и Sass, ознакомьтесь с разделом Начало работы (Getting Started) в разделе Build a Top Bar Off-Canvas Navigation With Foundation 5.

Создайте свой новый проект Foundation и используйте  compass watch для компиляции вашего проекта. Мы создадим наш собственный style.scss в папке scss для наших настроек и некоторого общего стиля. С этой настройкой мы погрузимся в общую структуру HTML, поехали!

Настройка структуры HTML

Шаг 1. Общая разметка

Запустив новый проект Foundation, перейдите в файл index.html и начните с удаления всего содержимого между тегами тела, за исключением скриптов непосредственно перед закрывающим тегом body. Then add the following line to your <head> чтобы импортировать наш style.css.


Затем мы добавим некоторую разметку, такую ​​как заголовок, основной раздел и нижний колонтитул, а также добавим фиктивный контент, чтобы дать нашей странице некоторое заполнение.


Здесь мы создали раздел заголовка, включая раздел <nav>, раздел содержимого и нижний колонтитул. Есть несколько вещей, которые нужно отметить:

  • Наш <nav>  имеет класс .important-class, которые мы будем использовать, чтобы сообщить jQuery, какой элемент нужно настроить, когда мы собираемся прокручивать вниз.
  • Мы включили div с классом .header-fill. Мы будем использовать это, чтобы разместить некоторое пространство между верхней частью браузера и секцией содержимого, поскольку наш заголовок будет исправлен и имеет более высокий индекс z, а затем остальные элементы на странице.

Шаг 2. Верхняя панель.

Затем, мы собираемся написать HTML для нашей верхней панели. Нам нужна зона заголовка для нашего логотипа и раздел с <ul>  для хранения наших пунктов меню. Взгляните на следующий HTML:



Мы добавили <ul>   title-area класса, в которой мы сохраняем наш логотип. Затем у нас есть <section> класс класса top-bar и <ul> с классом .right, содержащий все наши элементы списка. Наш образ имеет идентификатор logo-image, который нам также понадобится в нашем jQuery позже в этом уроке.

Шаг 3: Теперешние результаты

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

Настройка Sass

Чтобы получить желаемые результаты, нам понадобится базовый стиль для наших разделов, особенно заголовок и раздел Top Bar. Мы собираемся использовать Sass , чтобы это получилось.

Шаг 1: Общий стиль

Для начала, мы собираемся дать всем нашим разделам некоторый базовый стиль. Взгляните на Sass ниже:


Здесь мы используем переменную основного цвета, которую мы собираемся использовать для некоторых стилей Top Bar. Наш заголовок имеет приятную тонкую тень, поэтому на самом деле выглядит так, будто он плавает над остальной частью контента. Установив свое положение на фиксированное и сделав z-index: 999, мы следим за тем, чтобы навигационная панель попадала в верхнюю часть браузера, когда мы прокручиваем вниз и он остается выше всех остальных элементов на странице.

Наш .contain-to-grid класс имеет тонкий прозрачный белый цвет, так что, когда мы прокручиваем, кажется, что заголовок плавает поверх всех остальных элементов. Нам все равно нужно исправить это меню, поэтому давайте позаботимся об этом.

Шаг 2: Стиль верхней панели

Теперь мы добавим стиль, чтобы придать нашей верхней панели приятный, гладкий вид. Вы также можете настроить некоторые параметры верхней панели в файле _settings.scss, но я покажу вам, как это сделать, используя наши собственные переопределения. Sass ниже объясняет, что и где происходит:

Примечание: Мы собираемся переместить заголовок .padding-on-my-header класс ниже правил верхней панели. Это необходимо, чтобы отступы перекрывали верхнюю панель.

Мы добавили некоторые дополнения в нашу верхнюю панель, и установили переход 0,5 с, легкость 0.1s. Это обеспечит плавный эффект перехода, когда начнется наш jQuery. Фон установлен на none, так что наш заголовок имеет слегка прозрачный цвет, который мы предоставили нашему .contain-to-grid класс. Остальное - это некоторый базовый стиль для пунктов меню верхней панели, выпадающих меню, зависаний и активных состояний. Ничего не преувеличено, но оно дало нам чистый результат, добавив пропуски и пробелы.

Шаг 3: Теперешний результат

Давайте посмотрим, что у нас есть. Безусловно, начинает как-то выглядеть! Тем не менее, наше меню по-прежнему немного велико, когда мы прокручиваем страницу вниз. Вот где наш .padding-on-my-header шаги класса.

jQuery для эффекта

Давайте используем немного магии jQuery, чтобы добавить заголовок .padding-on-my-header класса на прокрутке и изменим логотип на меньший размер.

Шаг 1. Создание нашего init.js

Мы собираемся создать файл init.js для размещения нашего кода jQuery. Поместите его в папку / js и включите следующую строку внизу индексационного файла, перед тегом закрывающего тега, чтобы включить скрипт:

Наш init.js будет содержать следующее:

Давайте посмотрим, что на самом деле происходит здесь. Когда пользователь прокручивается вниз, мы выполняем следующую функцию: если пользователь прокручивает более 50 пикселей, мы делаем верхнюю панель меньшей и вставляем логотип меньшего размера:

  • Мы находим наш логотип и заменяем источник изображения нашим меньшим логотипом.
  • Затем мы ищем наш .important-class и добавляем к нему еще один класс: .padding-on-my-header

Когда мы вернемся назад и прокрутимся ниже 50 пикселей, мы сделаем обратное и удалим класс заполнения, вернув логотип большого ol'.

Шаг 2: Проверка результатов

Перейдите и вернитесь в браузер. Обновите страницу и попробуйте прокрутить вниз. Если все пойдет так, как планировалось, вы должны увидеть, как верхняя панель сокращается с плавным переходом, а большой логотип заменяется меньшим. Все идет очень хорошо. Но когда мы изменим размер нашего браузера, вы увидите, что он не совсем такой как нам нужно. Давайте позаботимся об этом!

Медиа-запросы для оптимизации мобильных устройств

Мы будем создавать медиа-запрос для устройств с разрешением 1024 пикселя и меньше. Чтобы это было правильно, нам нужно изменить небольшую точку остановки Foundation. Как вы говорите? Ну, это просто! Мы просто собираемся нырнуть в наш _settings.scss и искать следующую настройку:

Как вы можете видеть, мы переместили малый диапазон от 0em-40em до 0em-64em, который вычисляет до 1024px; Наш средний диапазон теперь начинается с 64em. Сохраните настройки, чтобы изменения вступили в силу, и давайте перейдем к нашему медиа-запросу!

Шаг 1. Добавление медиа-запросов

Наша верхняя панель на более мелком устройстве не должна быть такой большой. Мы немного уменьшим ее и изменим наше меню. Мы также будем использовать гораздо меньшую заливку заголовка. Давайте посмотрим, что мы здесь сделали:

Давайте посмотрим, что мы здесь сделали:

  • Мы удалили все дополнения и поля на верхней панели.
  • Мы указали текст меню, а значок гамбургера - серый цвет, вместо белого цвета по умолчанию, поэтому он отображается на нашем белом верхнем баре.
  • Мы установили наш логотип большего размера, чтобы поместиться в верхней панели.
  • В top-bar-section мы разрабатываем наши ответные пункты меню, гибкость и активные состояния.
  • Мы также изменяем размер и размещаем логотип меньшего размера.
  • Мы удалили некоторые дополнения и поля в нашем расширенном гибком меню.
  • Наконец, мы сделали наш .header-fill меньше, так что он равен высоте нашей верхней панели.

Шаг 2: Наслаждайтесь итоговыми результатами!

Когда мы вернемся к нашему браузеру и изменим его размер, мы можем теперь увидеть, что наша гибкая навигация в полном объеме. Прокрутите вниз и посмотрите, как изображение логотипа все еще меняется. Нажмите на значок меню, чтобы увидеть расширенную версию нашей гибкой навигации.

Заключение

С некоторыми масками Sass и jQuery нам удалось превратить мощную базовую верхнюю панель из ZURB's Foundation в потрясающий, модный притягательный заголовок с некоторыми плавными эффектами. Готовы к вашему пользованию или для ваших клиентских проектов. Счастливо!

Ресурсы


Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.