Lecaw

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

Foundation для начинающих: Top Bar

June 25, 2013
CSS
361hits

Верхняя панель Foundation - очень полезный компонент, но это не значит что вы должны обязательно использовать её в своих проектах. Я посчитал, что 40% своих проектов я построил на Foundation. Дайте внимательно рассмотрим соответствует ли он всем нашим потребностям, Top Bar столь же легко установить как и другие компоненты.

 

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

Основная структура

Для того чтобы создать Top Bar, необходимо установить элемент nav с классом “top-bar”.

В нем будет находиться два элемента ul, в которых по два li, один из них содержит заголовок/логотип, другой "мобильное" меню.

<nav class="top-bar">
    <ul class="title-area">
        <li class="name">
             <h1><a href="#">Top Bar Title </a></h1>
        </li>
        <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a>
        </li>
    </ul>
</nav>

Добавление родительских ссылок

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

В Foundation есть полезный класс “divider”, который можно установить для пустых элементов списка, позволяя Вам разделить каждую ссылку меню красивой линией. Этот класс используется в следующем примере, для разделения наших ссылок меню.

Вы также наверно заметили что мы использовали класс “left”, для того чтобы разместить элементы меню с левого края.

<section class="top-bar-section">
    <ul class="left">
        <li class="divider"></li>
        <li class="active"><a href="#">Main Item 1</a></li>
        <li class="divider"></li>
        <li><a href="#">Main Item 2</a></li>
        <li class="divider"></li>
    </ul>
</section>

Все добавленные ссылки, будут выводиться на экран вдоль панели. На небольших экранах они станут выпадающими, от кнопки Menu, которую мы добавили ранее.

Добавление подменю

Каждый элемент списка может содержать вложенный неупорядоченный список для подменю. Для того чтобы такие элементы списка отображались на экране корректным способом, необходимо добавить к ним класс “dropdown”, а к родительской ссылке класс "has-dropdown":

<li class="has-dropdown"><a href="#">Main Item 3</a>
    <ul class="dropdown">
        <li><label>Dropdown Level 3 Label</label></li>
        <li><a href="#">Dropdown Level 3a</a></li>
        <li><a href="#">Dropdown Level 3b</a></li>
        <li class="divider"></li>
        <li><a href="#">Dropdown Level 3c</a></li>
    </ul>
</li>
<li class="divider"></li>

Добавление настроек

Несмотря на упоминание как "Top" Bar, Вы можете поместить этот компонент куда угодно на свое усмотрение. Если вам необходима панель, которая будет закреплена на странице при прокрутке, вы можете установить Top Bar в контейнер с классом “fixed”, точно также как на сайте - 1С битрикс Интернет магазин. Если вы хотите сохранить главную панель в своем основном контейнере, Вы можете установить ширину главной панели к ширине сетки при помощи класса “contain-to-grid”.

<div class="contain-to-grid sticky">
    <nav class="top-bar">
        <!--nav content-->
    </nav>
</div>

Поле поиска

Если вам не хватает всех функций, то вы можете добавить форму, которую можно использовать для поиска, или список, для регистрации рассылки. При добавлении элементов формы в меню, мы должны использовать класс “has-form”. Вы можете увидеть из кода ниже, что мы на самом деле используем сетку в Top Bar. Это делает размещение элементов простым – и конечно адаптивным, поскольку колонки смещаются на маленьких экранах.

<li class="has-form">
    <form>
        <div class="row collapse">
            <div class="small-8 columns">
                <input type="text">
            </div>
            <div class="small-4 columns">
                <a href="#" class="alert button">Search</a>
            </div>
        </div>
    </form>
</li>

Breadcrumbs

Breadcrumbs является стандартным компонентом любой CMS, например в WordPress, где многоуровневая иерархия страниц может быть немного сложной. Вы можете использовать данный элемент в любом проекте, просто добавив класс “breadcrumbs” в тег ul или nav. При использовании неупорядоченного списка все ссылки должны быть в элементах списка, тогда как ссылки в элементе nav должны быть тегами привязки.

Также есть дополнительные классы “unavailable” и “current”.

<ul class="breadcrumbs">
    <li><a href="#">Home</a></li>
    <li><a href="#">Features</a></li>
    <li class="unavailable"><a href="#">Gene Splicing</a></li>
    <li class="current"><a href="#">Cloning</a></li>
</ul>

 

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

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

Эл. почта
RATTING:
(1 Голосовать)

2 Responses

  • Комментировать
    Александр Понедельник, 12 Август 2013 13:32

    Подскажите. Я подключил foundation.min.css, custom.modernizr.js, foundation.min.js, причем с сборке когда скачивал указал все галочки. Скачал пример top-bar верстки, но почему-то не раскрываются пункты меню. Надо что-то еще на js инициализировать?

    Пожаловаться
  • Комментировать
    Александр Вторник, 13 Август 2013 05:19

    Все разобрался на самом деле надо еще после загрузки всего DOM вызвать инициализацию js-скриптов для foundation, скорее всего можно вызвать как-то только ту часть, которая относится только к topbar и передать в нее какие-то параметры. Ну в общем надо еще вызвать $(document).foundation(), после загрузки всего DOM, т.е. либо после body это поместить, либо использовать $( document ).ready(), если в head

    Пожаловаться

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