Ваша корзина пуста
Форма входа

Бесплатный раздел

Вы здесь: Главная страница » Файлы » Переключатели / Навигация
Уважаемые пользователи!
Доводим до вашего сведения, что мы не занимаемся обучениями по системе uCoz и настройками Ваших сайтов.
Подобные просьбы и вопросы - будут игнорироваться!

Список меню с обводкой при наведении на ссылку

Дата добавления: 10.05.2017 - 18:08
Добавил: Buger
Количество просмотров: 1.3k
Количество комментариев: 0
Размер файла: 4.1 Kb
Рейтинг материала: 0.0 / 0
Список меню с обводкой при наведении на ссылку
БЕСПЛАТНО
Демонстрация
рейтинг 0.0
/
голосов 0
Довольно интересное решение для списков меню, которое создает визуальную обводку при наведении на ссылку. Для визуальной обводки мы будем использовать SVG.
Считаю, что данная реализация такого меню отлично подойдет для сайтов или проектов школьной и детской тематики.

HTML разметка
Код
<div class="menu">
  <a href="#" class="menu__link menu__link--active">
  Home
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 152.9 43.4" style="enable-background:new 0 0 152.9 43.4;" xml:space="preserve">
  <path d="M151.9,13.6c0,0,3.3-9.5-85-8.3c-97,1.3-58.3,29-58.3,29s9.7,8.1,69.7,8.1c68.3,0,69.3-23.1,69.3-23.1 s1.7-10.5-14.7-18.4"/>
  </svg>
  </a><br>

  <a href="#" class="menu__link">
  About
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 152.9 43.4" style="enable-background:new 0 0 152.9 43.4;" xml:space="preserve">
  <path d="M151.9,13.6c0,0,3.3-9.5-85-8.3c-97,1.3-58.3,29-58.3,29s9.7,8.1,69.7,8.1c68.3,0,69.3-23.1,69.3-23.1 s1.7-10.5-14.7-18.4"/>
  </svg>
  </a><br>

  <a href="#" class="menu__link">
  Projects
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 152.9 43.4" style="enable-background:new 0 0 152.9 43.4;" xml:space="preserve">
  <path d="M151.9,13.6c0,0,3.3-9.5-85-8.3c-97,1.3-58.3,29-58.3,29s9.7,8.1,69.7,8.1c68.3,0,69.3-23.1,69.3-23.1 s1.7-10.5-14.7-18.4"/>
  </svg>
  </a><br>

  <a href="#" class="menu__link">
  Contact
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 152.9 43.4" style="enable-background:new 0 0 152.9 43.4;" xml:space="preserve">
  <path d="M151.9,13.6c0,0,3.3-9.5-85-8.3c-97,1.3-58.3,29-58.3,29s9.7,8.1,69.7,8.1c68.3,0,69.3-23.1,69.3-23.1 s1.7-10.5-14.7-18.4"/>
  </svg>
  </a>
</div>


CSS
Код
.menu {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

.menu__link {
  display: inline-block;
  color: #2d6c90;
  text-decoration: none;
  position: relative;
  padding: 14px 0;
  font-family: 'Muli', sans-serif;
  font-weight: 300;
  font-size: 22px;
  line-height: 1;
  letter-spacing: 0.040em;
}

.menu__link svg {
  fill: none;
  stroke: #70aec9;
  stroke-width: 2;
  stroke-miterlimit: 10;
  stroke-dasharray: 338;
  stroke-dashoffset: 338;
  stroke-linecap: round;
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(100% + 60px);
  opacity: 0;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-transition: stroke-dashoffset 0s 0.2s, opacity 0.2s;
  transition: stroke-dashoffset 0s 0.2s, opacity 0.2s;
  z-index: -1;
}

.menu__link--active svg {
  stroke: #ff4c4c;
}

.menu__link--active svg,
.menu__link:hover svg {
  stroke-dashoffset: 0;
  opacity: 1;
  -webkit-transition: opacity 0s, stroke-dashoffset 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: opacity 0s, stroke-dashoffset 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}


Источник: http://art-ucoz.ru/
Добавлять комментарии могут только зарегистрированные пользователи.


Поделись с друзьями: