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

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

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

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

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

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

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

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

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

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

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

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

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

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

Автор: Mary Lou

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

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

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

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

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

PSD to HTML

Практика верстки сайта на HTML5 и CSS3 с нуля

Получить

Метки: ,

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

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

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

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

  1. ЕГор

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree