Стили линий для горизонтального меню на HTML CSS

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

Сложность

Разметка для всех примеров практически идентична:

<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 указывает на выбранный элемент. Обратите внимание, что мы используем соглашение по именованию БЭМ, это позволит использовать для элемента nav специальный класс, для которого зададим индивидуальные стили в файле component.css.

Общие стили для каждого горизонтмального меню html 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 для расположения горизонтального меню html css и определения общих стилей для ссылок.

Ниже приведен пример эффекта (без префиксов):

/* 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.

ДЕМО СКАЧАТЬ

 

Перевод статьи Inspiration for Line Menu Styles

Тэги: menuanimateflexbox

Вход

Уважаемый пользователь! Мы обнаружили, что вы используете AdBlock и вынуждены скрыть часть материалов на нашем сайте. Siteacademy существует и развивается за счет доходов от рекламы. Просим внести наш сайт в список исключений или отключить Блокировщик рекламы на нашем сайте.