Вдохновляющее меню для сайта из линий

Вдохновляющее меню для сайта из линий

От автора: пара идей стилизации и добавления эффектов меню для сайта при помощи линий, как креативного элемента дизайна. Коллекция дополняемая; ваш вклад только приветствуется!

скачать исходникидемо

Линии это удивительный дизайнерский элемент. Линии настолько универсальны, что их используют для добавления приятной анимации, а также для усиления интереса к отдельным элементам. Сегодня мы хотим поделиться с вами набором идей, как использовать линии в качестве элемента дизайна горизонтального меню. Существует множество креативных способов: некоторые незаметные и утонченные, другие же смелые и экстравагантные. Мы подготовили вдохновляющий набор, в котором мы раскрыли некоторые возможные варианты стилей меню с линиями.

Мы также будем рады сообщить вам, что вы можете внести свой вклад в эту открытую коллекцию. Более подробно смотрите на GitHub.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Давайте взглянем на разметку, которая за парочкой исключений точно такая же, как и для любого другого меню:

<section class="section section--menu" id="Prospero">

 <h2 class="section__title">Prospero</h2>

 <nav class="menu menu--prospero">

  <ul class="menu__list">
 <li class="menu__item menu__item--current">
 <a class="menu__link">Home</a>
 </li>
 <li class="menu__item">
 <a class="menu__link">Who we are</a>
 </li>
 <li class="menu__item">
 <a class="menu__link">What we offer</a>
 </li>
 <li class="menu__item">
 <a class="menu__link">Our news</a>
 </li>
 <li class="menu__item">
 <a class="menu__link">Contact us</a>
 </li>
  </ul>
 
 </nav>

</section>

Класс menu__item—current указывает на выбранный пункт меню. Обратите внимание, что мы используем BEM объявление классов, однако у основного блока nav есть свой уникальный класс, к которому потом мы будем обращаться в стилях (component.css) для установки индивидуальных стилей. Взглянем на основных стили меню:

.menu {
 line-height: 1;
 margin: 0 auto 3em;
}

.menu__list {
 position: relative;
 display: -webkit-flex;
 display: flex;
 -webkit-flex-wrap: wrap;
 flex-wrap: wrap;
 margin: 0;
 padding: 0;
 list-style: none;
}

.menu__item {
 display: block;
 margin: 1em 0;
}

.menu__link {
 font-size: 1.05em;
 font-weight: bold;
 display: block;
 padding: 1em;
 cursor: pointer;
 -webkit-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
 -webkit-touch-callout: none;
 -khtml-user-select: none;
 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.menu__link:hover,
.menu__link:focus {
 outline: none;
}

Для макета меню используется flexbox, а также задаются некоторые базовые стили для ссылок. Ниже показан код-пример стилизации эффекта (вендорные префиксы опущены):

/* Prospero */

.menu--prospero .menu__link {
 position: relative;
 display: block;
 margin: 0 1.5em;
 padding: 0.75em 0;
 text-align: center;
 color: #b5b5b5;
 transition: color 0.3s;
}

.menu--prospero .menu__link:hover,
.menu--prospero .menu__link:focus {
 color: #929292;
}

.menu--prospero .menu__item--current .menu__link {
 color: #d94f5c;
}

.menu--prospero .menu__link::before {
 content: '';
 position: absolute;
 left: 0;
 bottom: 0;
 width: 100%;
 height: 4px;
 background: #d94f5c;
 transform: scale3d(0, 1, 1);
 transition: transform 0.1s;
}

.menu--prospero .menu__item--current .menu__link::before {
 transform: scale3d(1, 1, 1);
 transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 transition-duration: 0.3s;
}

В эффекте используется псевдокласс, расширяющийся с середины. Позиционирование абсолютное внизу ссылки, а масштаб установлен в 0 по оси Х. При выборе пункта меню по клику, линия масштабируется до 1. Надеемся, вам понравилась эта маленькая коллекция, и вы нашли в ней что-то вдохновляющее!

Не забудьте посмотреть репозиторий и добавить свои стили, если есть желание. Более подробно о проекте можно прочитать на его странице GitHub.

Автор: Mary Lou

Источник: http://tympanus.net/

Редакция: Команда webformyself.

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки: ,

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (2)

  1. ЕГор

    А тут точно, никаких файлов JS подключать не надо

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree