Список меню с обводкой при наведении на ссылку
Опубликовано 09.12.2017 в 00:18
Довольно интересное решение для списков меню, которое создает визуальную обводку при наведении на ссылку. Для визуальной обводки мы будем использовать 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);
}