babulya,
<!DOCTYPE html><html class=''>
<head>
<meta charset='UTF-8'>
<style class="cp-pen-styles">
.user-block {
position: relative;
margin: 0 auto;
width: 300px;
}
.user-block-menu {
display: flex;
margin: 0;
padding: 0;
list-style: none;
}
.user-block-menu__item {
margin-right: 40px;
}
.user-block-menu__item span {
display: block;
position: relative;
}
.user-block-menu__item span.icon-login::before, .user-block-menu__item span.icon-reg::before {
position: absolute;
top: 50%;
left: -19px;
width: 15px;
height: 15px;
transform: translateY(-50%);
}
.user-block-menu__item span.icon-login::before {
content: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1536 1896.0833" version="1.0" fit="" preserveAspectRatio="xMidYMid meet" style="pointer-events: none; display: inline-block;"><path d="M1184 896q0 26-19 45l-544 544q-19 19-45 19t-45-19-19-45v-288H64q-26 0-45-19t-19-45V704q0-26 19-45t45-19h448V352q0-26 19-45t45-19 45 19l544 544q19 19 19 45zm352-352v704q0 119-84.5 203.5T1248 1536H928q-13 0-22.5-9.5T896 1504q0-4-1-20t-.5-26.5 3-23.5 10-19.5 20.5-6.5h320q66 0 113-47t47-113V544q0-66-47-113t-113-47H936l-11.5-1-11.5-3-8-5.5-7-9-2-13.5q0-4-1-20t-.5-26.5 3-23.5 10-19.5T928 256h320q119 0 203.5 84.5T1536 544z"></path></svg>');
}
.user-block-menu__item span.icon-reg::before {
content: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1792 1896.0833" version="1.0" fit="" height="100%" width="100%" preserveAspectRatio="xMidYMid meet" style="pointer-events: none; display: inline-block;"><path d="M888 1184l116-116-152-152-116 116v56h96v96h56zm440-720q-16-16-33 1L945 815q-17 17-1 33t33-1l350-350q17-17 1-33zm80 594v190q0 119-84.5 203.5T1120 1536H288q-119 0-203.5-84.5T0 1248V416q0-119 84.5-203.5T288 128h832q63 0 117 25 15 7 18 23 3 17-9 29l-49 49q-14 14-32 8-23-6-45-6H288q-66 0-113 47t-47 113v832q0 66 47 113t113 47h832q66 0 113-47t47-113v-126q0-13 9-22l64-64q15-15 35-7t20 29zm-96-738l288 288-672 672H640V992zm444 132l-92 92-288-288 92-92q28-28 68-28t68 28l152 152q28 28 28 68t-28 68z"></path></svg>');
}
.user-block-menu__link {
font-size: 16px;
color: #000;
text-decoration: none;
position: relative;
}
.user-block-menu__link::before {
position: absolute;
left: 0;
top: 1px;
content: "[";
opacity: 0;
transform: translateX(-20px);
transition: transform 0.3s, opacity 0.2s;
}
.user-block-menu__link::after {
position: absolute;
top: 1px;
right: 10px;
content: "]";
opacity: 0;
transform: translateX(12px);
transition: transform 0.3s, opacity 0.2s;
}
.user-block-menu__link:hover::after {
opacity: 1;
transform: translateX(22px);
}
.user-block-menu__link:hover::before {
opacity: 1;
transform: translateX(-30px);
}
@keyframes animate-user-modal {
0% {
-webkit-transform: translate(45%, -300px);
transform: translate(45%, -300px);
}
100% {
-webkit-transform: translate(45%, 0);
transform: translate(45%, 0);
}
}
.animate-user-modal {
-webkit-animation: animate-user-modal 0.6s;
animation: animate-user-modal 0.6s;
}
.user-modal {
position: absolute;
left: -100%;
top: 30px;
z-index: 1;
width: 300px;
margin: 0 auto;
padding: 10px 0;
border: 1px solid #d9ecfb;
box-shadow: 0 0 6px 3px #ccc;
background: #fff;
display: none;
transform: translate(45%, 0);
}
.user-modal::before {
position: absolute;
top: -20px;
left: 50%;
z-index: 1;
content: "";
width: 0;
height: 0;
border: 10px solid;
border-color: transparent;
border-bottom-color: #fff;
transform: translateX(-50%);
}
.user-modal::after {
position: absolute;
top: -22px;
left: 50%;
content: "";
width: 0;
height: 0;
border: 11px solid;
border-color: transparent;
border-bottom-color: #d9ecfb;
transform: translateX(-50%);
}
.user-modal__menu {
position: relative;
width: 100%;
margin: 10px auto 20px;
padding: 0;
list-style: none;
}
.user-modal__menu::before {
position: absolute;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
content: "";
height: 1px;
background: #ccc;
}
.user-modal__menu::after {
content: "";
display: table;
clear: both;
}
.user-modal__item {
border: 1px solid #ccc;
border-bottom: 0;
}
.user-modal__item:first-child {
margin-left: 20px;
float: left;
}
.user-modal__item:last-child {
margin-right: 20px;
float: right;
}
.user-modal__link {
position: relative;
z-index: 2;
display: block;
padding: 5px 10px;
font: 18px sans-serif;
background: #fff;
border-bottom: 1px solid #ccc;
box-sizing: border-box;
color: #000;
text-decoration: none;
}
.user-modal__link.user-modal__link_active {
border-bottom: 1px solid transparent;
}
.user-modal__entry, .user-modal__reg {
width: 90%;
margin: 0 auto;
display: none;
}
.user-modal__form {
display: flex;
flex-direction: column;
}
.user-modal__form input {
display: block;
padding: 5px;
margin-bottom: 15px;
border: 1px solid #ccc;
outline: 0;
}
.show {
display: block;
}
</style></head><body>
<nav class="user-block">
<ul class="user-block-menu">
<li class="user-block-menu__item">
<span class="icon-login">
<a href="#" data-user="entry" class="user-block-menu__link">Вход</a>
</span>
</li>
<li class="user-block-menu__item">
<span class="icon-reg">
<a href="#" data-user="reg" class="user-block-menu__link">Регистрация</a>
</span>
</li>
</ul>
<div class="user-modal">
<ul class="user-modal__menu">
<li class="user-modal__item">
<a class="user-modal__link" id="entry" href="#" data-link="entry">Вход</a>
</li>
<li class="user-modal__item">
<a class="user-modal__link" id="reg" href="#" data-link="reg">Регистрация</a>
</li>
</ul>
<div class="user-modal__entry">
<form action="" class="user-modal__form" method="post">
<input class="user-modal__email-entry" type="email" name="email-entry" placeholder="Email">
<input class="user-modal__password-entry" type="password" name="password-entry" placeholder="Пароль">
<input class="user-modal__submit-entry" type="submit" name="submit-entry" value="Войти">
</form>
</div>
<div class="user-modal__reg">
<form action="" class="user-modal__form" method="post">
<input class="user-modal__name-reg" type="text" name="name" placeholder="Имя">
<input class="user-modal__email-reg" type="email" name="email" placeholder="Email">
<input class="user-modal__password-reg" type="password" name="password" placeholder="Пароль">
<input class="user-modal__password-reg" type="password" name="password-confirm" placeholder="Пароль">
<input class="user-modal__submit-reg" type="submit" name="submit-reg" value="Войти">
</form>
</div>
</div>
</nav>
<script>
var userModal = document.querySelector(".user-modal");
[].forEach.call(document.querySelectorAll(".user-block-menu__link"), function(item, i) {
item.addEventListener("click", function(event) {
event.preventDefault();
userModal.classList.toggle("animate-user-modal");
userModal.classList.toggle("show");
link[i].click()
})
});
var divForm = userModal.querySelectorAll("div"),
link = userModal.querySelectorAll(".user-modal__link");
[].forEach.call(link, function(item, i) {
var k = +!i;
item.addEventListener("click", function(event) {
event.preventDefault();
link[i].classList.add("user-modal__link_active");
divForm[i].classList.add("show");
link[k].classList.remove("user-modal__link_active");
divForm[k].classList.remove("show")
})
});
</script>
</body></html>