Надихаюче меню для сайту з ліній

12

Від автора: пара ідей стилізації і додавання ефектів меню для сайту за допомогою ліній, як креативного елемента дизайну. Колекція доповнюється; ваш внесок тільки вітається!

Надихаюче меню для сайту з лінійНадихаюче меню для сайту з ліній

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

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

Надихаюче меню для сайту з ліній

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

Prospero

  • Home
  • Who we are
  • What we offer
  • Our news
  • Contact us

Клас 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.05 em;
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.5 em;
padding: 0.75 em 0;
text-align: center;
color: #b5b5b5;
transition: color 0.3 s;
}
.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.1 s;
}
.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.3 s;
}

Ефект використовується псевдоклас, розширюється з середини. Позиціонування абсолютне посилання внизу, а масштаб встановлений в 0 по осі Х. При виборі пункту меню по кліку, лінія масштабується до 1. Сподіваємося, вам сподобалася ця маленька колекція, і ви знайшли в ній щось надихаюче!

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