Есть левое боковое меню. При наведении курсором мыши на пункт меню (гиперссылку <а href="" class="nestedblock">...</а>
) или по клику на ней переменной valuemenuitem
присваивается текст этой гиперссылки, а также в консоль выводится значение valuemenuitem
.
let valuemenuitem = '';
let clicklink = document.querySelectorAll('.nestedblock');
for (let j = 0; j < clicklink.length; j++) {
clicklink[j].addEventListener('hover', function(e) {
valuemenuitem = this.innerText;
console.log(valuemenuitem);
}, true);
clicklink[j].addEventListener('click', function(e) {
valuemenuitem = this.innerText;
console.log(valuemenuitem);
}, true);
}
* {
list-style: none;
text-decoration: none;
margin: 0;
padding: 0;
}
#sidemenu {
background: #afafaf;
display: inline-flex;
grid-area: leftsidemenu;
flex-direction: column;
display: block;
width: 420px;
border-right: 1px solid #000;
position: fixed;
}
#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;
}
.contentpart {
display: grid;
grid-template-areas: "leftsidemenu centercolumn rightsidemenu";
grid-template-columns: 420px 1fr 245.8px;
/*height: 100vh;*/
margin: 0;
grid-area: centerpart;
}
.leftmenu {
grid-area: leftsidemenu;
}
.centerarea {
grid-area: centercolumn;
}
.rightmenu {
grid-area: rightsidemenu;
}
#pageHeader {
grid-area: header;
width: 100%;
}
#pageFooter {
grid-area: footer;
width: 100%;
}
.bodyclass {
display: grid;
grid-template-areas: "header" "centerpart" "footer";
grid-template-rows: 60px 1fr 150px;
/*height: 100vh;*/
margin: 0;
}
.b-footer__container {
background-color: #000;
}
<div class="leftmenu">
<ul id="sidemenu">
<li>
<div class="leftside">
<i class="fa fa-home"></i>
</div>
<div class="centerplace">
<a href="" class="nestedblock">Техника для кухни</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">Бытовая техника для дома</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">Ноутбуки и компьютеры</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">Комплектующие</a>
</div>
<div class="rightside">
<i class="fa fa-home"></i>
</div>
</li>
</li>
</ul>
</div>
Но в результате в консоль ничего не выводится.