Раскрывающаяся навигация

demosourse

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

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

Данный пример родился после знакомства с сайтом Squarespace: вторичная навигация спрятана за основным контентом страницы; клик по иконке и перед пользователем раскрываются все пункты меню!

Создание структуры

Первичную навигацию поместим в элемент <header>, а в <main> будем хранить контент. Вторичную навигацию вынесем за элемент <main>.

<header>
    <!-- logo here -->

    <nav id="cd-top-nav"><!-- your primary navigation here --></nav>

    <a id="cd-menu-trigger" href="#0"><span class="cd-menu-text">Menu</span><span class="cd-menu-icon"></span></a>
</header>
<main class="cd-main-content">

    <!-- put your content here -->

</main>

<nav id="cd-lateral-nav"><!-- your secondary navigation here --></nav>

Внутри блока для вторичной навигации создадим ненумерованный список. Добавим контейнер .socials для кнопок социальных сетей.

<nav id="cd-lateral-nav">
    <ul class="cd-navigation">
        <li class="item-has-children">
            <a href="#0">Products</a>
            <ul class="sub-menu">
                <!-- all its children here -->
            </ul>
        </li>
        <!-- other .item-has-children here -->
    </ul>
    <ul class="cd-navigation cd-single-item-wrapper">
        <li><a href="#0">Info</a></li>
        <!-- other simple items here -->
    </ul>
    <div class="cd-navigation socials">
        <a class="cd-twitter cd-img-replace" href="#0">Twitter</a>
        <a class="cd-github cd-img-replace" href="#0">Git Hub</a>
        <a class="cd-facebook cd-img-replace" href="#0">Facebook</a>
        <a class="cd-google cd-img-replace" href="#0">Google Plus</a>
    </div>
</nav>

Стили

Для анимации элемента <main> воспользуемся CSS3:

.cd-main-content {
  /* set a min-height and a z-index to be sure that the main element completely covers the lateral menu */
  min-height: 100%;
  z-index: 2;
  transition-property: transform;
  transition-duration: 0.4s;
}
.cd-main-content.lateral-menu-is-open {
  transform: translateX(-260px);
}

Такую же технику применяем и к <header>.

Для установки min-height элементу <main>, зададим height: 100%; тегам <body> и <html>.

По умолчанию, первичная навигация будет прокручиваться вместе с контентом. Для того чтобы зафиксировать навигацию достаточно будет добавить класс .is-fixed элементу <header>.

Обработка событий

В этой секции ничего не обычного: добавление/удаление перечисленных классов, согласно действиям пользователя!

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: https://codyhouse.co/gem/secondary-expandable-navigation/
Перевел: Станислав Протасевич
Урок создан: 16 Февраля 2016
Просмотров: 7135
Правила перепечатки


5 последних уроков рубрики "CSS"

^ Наверх ^