От автора: пара идей стилизации и добавления эффектов меню для сайта при помощи линий, как креативного элемента дизайна. Коллекция дополняемая; ваш вклад только приветствуется!
Линии это удивительный дизайнерский элемент. Линии настолько универсальны, что их используют для добавления приятной анимации, а также для усиления интереса к отдельным элементам. Сегодня мы хотим поделиться с вами набором идей, как использовать линии в качестве элемента дизайна горизонтального меню. Существует множество креативных способов: некоторые незаметные и утонченные, другие же смелые и экстравагантные. Мы подготовили вдохновляющий набор, в котором мы раскрыли некоторые возможные варианты стилей меню с линиями.
Мы также будем рады сообщить вам, что вы можете внести свой вклад в эту открытую коллекцию. Более подробно смотрите на GitHub.
Давайте взглянем на разметку, которая за парочкой исключений точно такая же, как и для любого другого меню:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<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) для установки индивидуальных стилей. Взглянем на основных стили меню:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
.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, а также задаются некоторые базовые стили для ссылок. Ниже показан код-пример стилизации эффекта (вендорные префиксы опущены):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
/* 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
Источник: //tympanus.net/
Редакция: Команда webformyself.
Комментарии (2)