There is a code in which, when you hover over the icon on the left (.leftside), a hyperlink in the center (.centerplace) and an invisible picture on the right (.rightside) should be hidden
let sidemenu = document.querySelector('#sidemenu'); // We take the block from the menu
sidemenu.addEventListener('mouseenter', function(e) { // We hang the handler on the menu to use delegation
if(e.target.classList.contains('leftside')) { // If we aim at .leftside
e.target.closest('#sidemenu').classList.add('-short'); // we take the parent of the #sidemenu and attach a handler to it
}
}, true);
sidemenu.addEventListener('mouseleave', function(e) {
if(e.target.classList.contains('leftside')) {
e.target.closest('#sidemenu').classList.remove('-short');
}
}, true);* {
list-style: none;
text-decoration: none;
margin: 0;
padding: 0;
}
#sidemenu {
background: #afafaf;
display: inline-flex;
flex-direction: column;
display: block;
width: 420px;
border-right: 1px solid #000;
}
#sidemenu li {
padding: 6px 0;
background: #fff;
display: flex;
/*display: inline-flex;
flex-direction: row;
align-items: center;
justify-content: space-between;*/
}
#sidemenu li:hover {
background: lightgreen;
}
#sidemenu li a {
color: #000;
}
#sidemenu li:hover a,
#sidemenu li:hover .fa {
color: #fff;
}
#sidemenu li .fa {
/*margin-left: 20px;
margin-right: 10px;*/
display: inline-block;
width: 30px;
height: 30px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.leftside {
margin-left: 16px;
display: inline-block;
width: 30px;
height: 30px;
display: flex;
}
.rightside {
margin-right: 16px;
/* display: none;*/
visibility: hidden;
width: 30px;
height: 30px;
display: inline-flex;
}
.centerplace {
width: 328px;
display: inline-flex;
align-items: center;
justify-content: center;
/*
transition: .6s;
overflow: hidden;
transform: translateX(-328px);
*/
}
.nestedblock{
display: inline-flex;
align-items: center;
justify-content: center;
margin:0 auto;
}
/*
#sidemenu.active .centerplace {
transform: translateX(0px);
transition-delay: .4s;
}
#sidemenu{
width: 60px;
}
#sidemenu.active{
width: 388px;
}
*/
/* Иное состояние */
/*
.leftside:hover + .centerplace,
.leftside:hover + .centerplace + .nestedblock,
.leftside:hover + .rightside{
display: none;
}
*/
#sidemenu.-short {
flex-direction: column;
}
#sidemenu.-short .centerplace,
#sidemenu.-short .centerplace .nestedblock,
#sidemenu.-short .rightside {
display: none;
}<html>
<head>
<link rel="stylesheet" href="testsite.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- <script>
document.addEventListener("DOMContentLoaded", function() {
let sidemenu = document.querySelector('#sidemenu');
sidemenu.addEventListener("mouseover", checkitem);
sidemenu.addEventListener("mouseleave", checkitem);
function checkitem(event) {
if (event.target && event.target.closest(".fa")) sidemenu.classList.add("active");
if (event.type === "mouseleave") sidemenu.classList.remove("active");
}
});
</script> -->
</head>
<!-- <link rel="stylesheet" href="testsite.js"> -->
<body>
<ul id="sidemenu">
<li>
<div class="leftside">
<i class="fa fa-home"></i>
</div>
<div class="centerplace">
<a href="" class="nestedblock">Test1</a>
</div>
<div class="rightside">
<i class="fa fa-home"></i>
</div>
</li>
<li>
<div class="leftside">
<i class="fa fa-home"></i>
</div>
<div class="centerplace">
<a href="" class="nestedblock">Test2</a>
</div>
<div class="rightside">
<i class="fa fa-home"></i>
</div>
</li>
<li>
<div class="leftside">
<i class="fa fa-home"></i>
</div>
<div class="centerplace">
<a href="" class="nestedblock">Test3</a>
</div>
<div class="rightside">
<i class="fa fa-home"></i>
</div>
</li>
<li>
<div class="leftside">
<i class="fa fa-home"></i>
</div>
<div class="centerplace">
<a href="" class="nestedblock">Test4</a>
</div>
<div class="rightside">
<i class="fa fa-home"></i>
</div>
</li>
</li>
</ul>
<script src="testsite3.js"></script>
</body>
</html>As a result of one of the movements of the mouse cursor, the inscription becomes higher than the picture from the left side. The lettering should be at the same height as the drawing with the house. The .nestedblock class must align correctly.
Help to achieve the correct display.
Aucun commentaire:
Enregistrer un commentaire