меню справа на jquery
jurvrn,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.main-block {
z-index: 1;
position: fixed;
width: 36px;
height: 175px;
top: 0;
bottom: 0;
margin: auto 0;
left: calc(100% - 36px);
}
.each-block {
position: relative;
z-index: 2;
display: flex;
margin-bottom: 10px;
}
.iconka-block,
.textLine-Out {
height: 36px;
border: black 2px solid;
border-radius: 5px 0 0 5px;
}
.textLine-Out {
z-index: 3;
position: static;
display: flex;
background-color: rgb(213, 231, 248);
}
.textLine-Iner {
margin: auto;
font-size: 16px;
white-space: nowrap;
}
.iconka-block {
position: absolute;
display: flex;
z-index: 4;
background-color: rgb(226, 226, 226);
width: 36px;
right: 0;
cursor: pointer;
border-right: none;
}
.textLine-Out {
transform: translateX(calc(-100% + 36px));
}
.textLine-Iner {
width: 0px;
padding: 0 10px;
}
.iconka-block .icon_all {
font-size: 22px;
text-align: center;
margin: auto;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function() {
$(".each-block").each((i, el) => {
let textLine = el.querySelector(".textLine-Iner");
let width = el.scrollWidth + 10;
$(el).mouseenter(function() {
let options = {
width: `${width}px`,
};
$(textLine).stop().animate(
options, {
duration: 600
})
})
$(el).mouseleave(function() {
let options = {
width: `0px`
};
$(textLine).stop().animate(
options, {
duration: 300
});
})
})
});
</script>
</head>
<body>
<div class="main-block">
<div class="each-block">
<div class="iconka-block"><i class="fa fa-envelope-o icon_all icon_mail" aria-hidden="true"></i></div>
<div class="textLine-Out">
<div class="textLine-Iner">Напишите нам</div>
</div>
</div>
<div class="each-block">
<div class="iconka-block"><i class="fa fa-podcast icon_all icon_111_enter" aria-hidden="true"></i></div>
<div class="textLine-Out">
<div class="textLine-Iner">fa2-podcast 2icon</div>
</div>
</div>
<div class="each-block">
<div class="iconka-block"><i class="fa fa-bookmark-o icon_all icon_111_enter" aria-hidden="true"></i></div>
<div class="textLine-Out">
<div class="textLine-Iner">33icon_fa-bookmark-o</div>
</div>
</div>
<div class="each-block">
<div class="iconka-block"><i class="fa fa-user-circle icon_all icon_enter" aria-hidden="true"></i></div>
<div class="textLine-Out">
<div class="textLine-Iner">Вход на сайт</div>
</div>
</div>
</div>
</body>
</html>
|