Lecaw

Учимся создавать Web-сайты

Foundation для начинающих: CSS Навигация

June 17, 2013
CSS
436hits

Одним из наиболее важных аспектов фронт-енд фреймворка является обработка css навигации. В этой части серии статей Foundation для начинающих, мы рассмотрим несколько вариантов форм css навигации, вместе с некоторыми инструментами JavaScript, которые добавляют дополнительные функции. Я также покажу вам еще один полезный инструмент, который поможет вам стать лучшим Foundation разработчиком.

 

Серия статей Foundation для начинающих:

Section Plugin

Section - один из лучших Foundation JavaScript инструментов, он служит для создания различных форм css навигации, таких как аккордеон, вкладки, вертикальная и горизонтальная css навигация.

Начнем с HTML разметки нашей демонстрационной страницы:

<div class="section-container auto" data-section>
  <section>
    <p class="title" data-section-title><a href="#">Section 1</a></p>
    <div class="content" data-section-content>
      <p>Content of section 1.</p>
    </div>
  </section>
  <section>
    <p class="title" data-section-title><a href="#">Section 2</a></p>
    <div class="content" data-section-content>
      <p>Content of section 2.</p>
    </div>
  </section>
</div>

Давайте подробно разберем все детали разметки, так как она немного сложнее, чем все предыдущие элементы которые мы создавали при помощи Foundation.

Вы в любом случае должны создать контейнер с определенным классом section, независимо от того, будет это аккордеон или выпадающее меню, вы должны использовать класс section-container, с дополнительным классом auto. Также к основному контейнеру вы должны добавить атрибут, который определяет тип устанавливаемого раздела, по умолчанию - аккордеон. Чтобы использовать другой тип раздела, просто измените класс auto на tabs, accordion, vertical-nav или horizontal-nav.

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

<section>
    <p class="title" data-section-title><a href="#">Section 1</a></p>
    <div class="content" data-section-content>
      <p>Content of section 1.</p>
    </div>
</section>

Обратите внимание, что каждый раздел находится в теге section. Внутри каждого раздела находится тег p с названием класса, который содержит ссылку на соответствующий раздел. После абзаца еще один контейнер, который содержит весь контент раздела, он имеет класс content.

Deep Linking

Допустим, вы хотите перейти по ссылке ко второй части основного раздела, но при открытии страницы он показывает первый раздел, назначенный по умолчанию. Не беспокойтесь! Foundation имеет встроенное решение - Deep Linking. Для этого нам нужно добавить новый атрибут к нашей оболочке: data-options=”deep_linking:true”. Когда пользователь переходит по URL с идентификатором фрагмента, таким как “http://www.website.com/#section3”, он загрузит данную страницу в текущем разделе, точно также как на сайте цен на услуги colocation в Москве.

<div class="section-container auto" data-section data-options="deep_linking: true">
  <section>
    <p class="title" data-section-title><a href="#section1">Section 1</a></p>
    <div class="content" data-slug="section1" data-section-content>
      <p>Content of section 1.</p>
    </div>
  </section>
  <section>
    <p class="title" data-section-title><a href="#">Section 2</a></p>
    <div class="content" data-slug="section2" data-section-content>
      <p>Content of section 2.</p>
    </div>
  </section>
</div>

Мы добавили опции Deep Linking, а также добавили атрибут data-slug к контейнеру с содержанием.

Side Nav

Foundation Side Nav (простой способ создания вертикального меню) идет рука об руку с разделами. Давайте посмотрим на разметку.

<ul class="side-nav">
  <li class="active"><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li class="divider"></li>
  <li><a href="#">Link 3</a></li>
  <li><a href="#">Link 4</a></li>
</ul>

Это обычный неупорядоченный список, состоящий из элементов списка, содержащие ссылки. Для создания такого меню мы просто добавили класс side-nav для элемента ul. Если вам нужно разделить ваши элементы списка, добавьте пустой элемент списка с классом divider. Все просто.

Sub Nav

Foundation Sub Nav как правило используется в качестве фильтрации содержания. Разметка точно такая же как и в Side Nav, но отличается тем, что она использует список определений, а не неупорядоченный список. Здесь нет разделителей как в Sub Nav, но вы может использовать для этого класс active:

<dl class="sub-nav">
  <dt>Filter:</dt>
  <dd class="active"><a href="#">All</a></dd>
  <dd><a href="#">Photos</a></dd>
  <dd><a href="#">Videos</a></dd>
  <dd><a href="#">Music</a></dd>
</dl>

Pagination

Пагинация страниц - это тоже форма css навигации, количество страниц должно содержаться внутри элемента nav. Давайте взглянем на разметку пагинации в Foundation:

<ul class="pagination">
  <li class="arrow unavailable"><a href="#">«</a></li>
  <li class="current"><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li class="unavailable"><a href="#">…</a></li>
  <li><a href="#">12</a></li>
  <li><a href="#">13</a></li>
  <li class="arrow"><a href="#">»</a></li>
</ul>

Для боковых стрелок мы использовали класс arrow. В качестве стрелок Вы можете использовать либо « или ‹ возможно даже ←.

Поскольку разметка очень простая, вы можете легко внедрить её в любую систему управления контентом, например WordPress.

Мобильные устройства

Система Foundation является быстрым способом адаптации вашего проекта на всех мобильных устройствах, но тестирование, вручную очень отягощенное занятие. Чтобы облегчить вам работу, воспользуйтесь онлайн сервисом под названием Respondr, он позволяет просматривать URL на смартфонах, планшетах и десктопах.

 

Дополнительная информация

Влерий Аликин - веб-разработчик & дизайнер. Соучредитель и член команды Lecaw.

Эл. почта
RATTING:
(0 голосов)

Оставить комментарий