0

Есть левое боковое меню. При наведении курсором мыши на пункт меню (гиперссылку <а 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>

Но в результате в консоль ничего не выводится.

1 ответ 1

1

Вот так все будет работать. Добавил строчку в "click" и заменил "hover" на "mouseenter".

let valuemenuitem = '';
let clicklink = document.querySelectorAll('.nestedblock');
for (let j = 0; j < clicklink.length; j++) {
  clicklink[j].addEventListener('mouseenter', function(e) {
    valuemenuitem = this.innerText;
    console.log(valuemenuitem);
  }, true);
  clicklink[j].addEventListener('click', function(e) {
    valuemenuitem = this.innerText;
    console.log(valuemenuitem);
    event.preventDefault();
  }, 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>

2
  • @АлександрРогогов не работает.
    – user433653
    11 мар 2021 в 17:36
  • Что именно не работает?:)) Нажмите "Выполнить код" наведите мышку на "Техника для кухни" увидите в консоли "Техника для кухни". Нажмите на ссылку и увидите еще раз :)) Обращаю внимание что наводить и жмякать надо на сам текст, а не на блок (который у вас бело-зеленый), так как обработчики у вас висят именно на текстовой ссылке. 11 мар 2021 в 17:47

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.