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

Как настроить Foundation 4 Top Bar

by
Read Time:10 minsLanguages:
This post is part of a series called Foundation for Beginners.
Foundation for Beginners: The Top Bar
Foundation for Beginners: Buttons and Dropdowns

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

Zurb's Foundation 4 имеет блестящую верхнюю панель, которая стала почти символом построения сайта Foundation. Сегодня мы рассмотрим, как вы можете реализовать его по-другому, разместив его в другом месте на странице, предоставив вам настраиваемое и адаптивное горизонтальное меню навигации.


Начиная

Для начала нам понадобится последняя версия фонда. Разархивируйте и поместите все файлы в вашу рабочую или тестовую директорию.  Мы будем использовать только index.html, создав собственный стиль style.css, в котором мы переопределим различные классы верхней панели, чтобы сделать нашу собственную навигацию.

foundation-downloadfoundation-downloadfoundation-download

Также загрузите фоновое изображение, представленное выше. Мы будем использовать это для меню, поэтому поместите его в папку «img». Есть все? Тогда запустите ваш любимый редактор и начнем!


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

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

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

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

Хорошо, давайте настроим верхний колонтитул, навигацию, область контента и нижнего колонтитула и добавим некоторый фиктивный контент для наполнения.  Мы дадим каждой области класс "полной ширины", затем в каждой области мы разместим div с class = "row", div с class = "large-12" и class = "columns". Это устанавливает базовую структуру сетки.

Примечание: для получения дополнительной информации о том, как работает сетка, взгляните на Foundation for Beginners: Grid System

Шаг 2: Разметка верхней панели

Перед тем, как приступить к стилизации, мы выложим необходимую HTML-структуру, чтобы заставить работать верхнюю панель Foundation. Нам нужно пять основных элементов, чтобы запустить двигатель:

  • nav с class = "top-bar"
  • ul с class = "title-area"
  • li c class = "toggle-topbar" = развернуть меню в мобильном макете
  • раздел с классом = "top-bar-section"
  • ul с class="left" и ul с class="right"

Теперь давайте настроим эти основы и реализуем пять элементов.

Примечание: В этом учебном примере мы хотим создать собственное меню навигации, удалив в нем заголовок (который обычно содержит логотип в текстовой или графической форме). Чтобы сделать это, мы просто оставляем li с class = "name" в ul с class = "title-area" пустым.

Кроме того, давайте добавим некоторые элементы меню и выпадающее меню, пока мы на нем. Чтобы включить раскрывающийся список, добавьте класс «has-dropdown» к элементу li, в котором вы хотите разместить раскрывающийся список, а затем введите новый ul с классом «dropdown».  Чтобы указать текущую активную страницу, мы можем присвоить нашему текущему пункту меню класс «active» для элемента li. Мы можем оставить ul class = "right" пустым.  Обычно вы используете эту область, чтобы добавить кнопку или форму ввода для поиска. Для получения дополнительной информации об особенностях разметки верхней панели, взгляните на Foundation for Beginners: The Top Bar.

Посмотрите на следующий HTML, комментарии объясняют, как он создается.

Шаг 3: Результаты пока что

Посмотрите на результаты в вашем браузере. Теперь мы настроили базовую основу Foundation, используя Top Bar для создания горизонтального меню.  Чтобы разместить его где-то кроме верхней части браузера, просто поместите nav class = "top-bar" в строку и столбцы div.

Когда вы измените размер браузера, вы увидите, что меню изменяется в предопределенной точке останова.

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

foundation-4-custom-top-bar-html-layoutfoundation-4-custom-top-bar-html-layoutfoundation-4-custom-top-bar-html-layout

Настройка CSS

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

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

Если вы не поместите его в файл foundation.css, он не заменит классы Top Bar.

Хорошо, давайте сначала разберемся со стилем заголовка, навигации, содержимого и области нижнего колонтитула. Для области навигации мы будем использовать фоновое изображение, которое вы предварительно загрузили.  Общий дизайн не так уж и сложен, взгляните на CSS ниже. Мы добавляем класс полной ширины в каждую область, чтобы убедиться, что он заполняет всю ширину браузера.

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

Если вы посмотрите на результаты сейчас, меню все еще выглядит немного неуместным. Это потому, что он все еще использует CSS по умолчанию. Давайте исправим это!

Есть пара CSS-классов, к которым мы должны обратиться, чтобы получить желаемые результаты.  Сначала мы удалим часть черного фона в классе .top-bar и списках разделов и изменим высоту и высоту строки на 58px (высота области навигации). Проверьте комментарии для дальнейшего объяснения.

Мы удалили черный фон по умолчанию из nav class = "top-bar", списков разделов и привязок меню. Мы корректируем высоту, высоту строки и отступы и преобразуем текст в верхний регистр, чтобы все это соответствовало нашему индивидуальному дизайну.

Если вы обновите свой браузер, вы увидите, что он начинает обретать форму. Давайте продолжим с выпадающими меню, пунктами меню, активным и парящим состояниями. Посмотрите на CSS ниже и снова прочитайте закомментированный текст для объяснения:

Мы внесли несколько изменений в наше меню здесь. Во-первых, мы изменили черный фон по умолчанию активного элемента меню на CSS-градиент. Затем мы дали неактивным пунктам меню состояние, напоминающее зависание.  Чтобы сделать неактивные пункты меню более четкими, мы изменили цвет текста на темно-серый. Изменения, внесенные в .top-bar-section li: hover a будет держать состояние раскрывающегося меню на наведенной, когда ваша мышь перемещается над выпадающими элементами.  Для завершения CSS мы дали выпадающему контейнеру ul фоновую заливку и изменили положение по умолчанию для стрелки раскрывающегося списка из-за наших корректировок отступа для верхней панели.

Шаг 3: Результаты пока что

Обновите ваш браузер и посмотрите на результаты. Мы еще не совсем закончили; нам все еще нужно убедиться, что все это выглядит хорошо, когда мы изменяем размер экрана нашего браузера (или, если на то пошло, когда мы смотрим на это на меньшем устройстве).  Чтобы это произошло, мы добавим несколько медиазапросов в наш CSS-файл.


Настройка медиазапросов

Шаг 1: Медиа-запросы

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

Шаг 2: наслаждайтесь результатами

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

foundation-4-custom-top-bar-final-product-responsivefoundation-4-custom-top-bar-final-product-responsivefoundation-4-custom-top-bar-final-product-responsive

Заключение

Итак, мы завершим наше руководство о том, как мы можем создать настраиваемое адаптивное меню, используя верхнюю панель из платформы Foundation 4.  И помните, меню не должно быть в верхней части страницы. Просто оберните его в свою строку и столбцы div, и вы сможете разместить его практически где угодно!

Foundation - отличный инструмент для быстрой разработки адаптивных дизайнов, и когда вы знаете, как это сделать, вы можете в значительной степени изменить его по своему усмотрению. Повеселись!

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.