Подключение кода html файла в javascript. Использование include

Question

Есть страница

в которой в зависимости от выбранного пункта меню из левого столбца (Смартфоны и гаджеты, Ноутбуки и компьютеры, Телевизоры, аудио-видео, Hi-Fi, Бытовая техника для дома и кухни, Строительство и ремонт, Дом и дача, Фото, видео, системы безопасности, Автотовары, Канцтовары, Мебель и офисная техника, Красота и здоровье) в правой части окна отображаются подкатегории выбранной слева категории.

Есть код, отображающий эту страницу

  document.getElementById('dropdownwindow').style.position = "fixed";
  document.getElementById('dropdownwindow').style.marginLeft = "0";
  document.getElementById('dropdownwindow').style.marginTop = "0";
  document.getElementById('dropdownwindow').style.display = "block";
  console.log(document.getElementById('dropdownwindow').style.display);
  document.getElementById('dropdownwindow').style.marginRight = "20%";
  document.getElementById('dropdownwindow').style.width = "80%";
  document.getElementById('dropdownwindowright').style.flex = "60%";
  document.getElementById('dropdownwindow').style.backgroundColor = "#ffffff";
  const menuelems = document.querySelectorAll('.menulistitem');
  menuelems.forEach((menuelem) => {
    menuelem.addEventListener('mouseover', (event) => {
      event.target.style.cursor = "pointer";
      event.target.classList.add('menulistitem_selected')
    });
    menuelem.addEventListener('mouseout', (event) => {
      event.target.style.cursor = "pointer";
      event.target.classList.remove('menulistitem_selected')
    });
  });

#dropdownwindow {
  display: none;
  margin-left: 0;
  margin-right: 100%;
  height: 100vh;
  z-index: 5;
}

#fullblock {
  height: 100vh;
  position: static;
}

.contentdropdownwindow {
  display: flex;
  /*justify-content: center;*/
}

.CatalogMenuLeft {
  width: 25%;
}

.catalogheader {
  width: 100%;
  height: 30%;
  /*display: flex;*/
  /*justify-content: center;*/
  margin-left: auto;
  margin-right: auto;
}

.crossline,
.bottompart {
  flex: 1;
  /*width: 100%;*/
  /*height: 33%;*/
}

.crosslineright {
  width: 100%;
  /*margin-top: 40px;*/
  /*margin-left: 20px;*/
  /*margin-right: 20px;*/
  /*align: right;*/
  text-align: right;
}

.windowheader {
  flex: 1;
  /*width: 100%;*/
  /*height: calc(100% - 2*37.5px);*/
  /*height: 34%;*/
  margin: auto;
  text-align: center;
}

.windowheader h4 {
  flex: 1;
  /*width: 100%;*/
  margin: auto;
  text-align: center;
}

.flexdisabledscrollbar1,
.flexdisabledscrollbar2,
.flexdisabledscrollbar3 {
  flex: 0;
  width: 5px;
  border-right: 5px solid #f5f5f6;
}

.flexline1 {
  display: flex;
  justify-content: center;
  height: 33%;
}

.flexline2 {
  display: flex;
  justify-content: center;
  height: 34%;
}

.flexline3 {
  display: flex;
  justify-content: center;
  height: 33%;
}

.flexcontent {
  display: flex;
  /*overflow-y: scroll;*/
}

#menulist {
  flex: 1;
  overflow: auto;
  height: 400px;
}

.menulistitem {
  padding-top: 5px;
  padding-bottom: 5px;
}


/* Works on Firefox */

#menulist {
  scrollbar-width: auto;
  scrollbar-color: #b8b8bc #f5f5f6;
  /*overflow-y: scroll;*/
  /*height: 200px;*/
}


/* Works on Chrome, Edge, and Safari */

#menulist::-webkit-scrollbar-button {
  display: none;
}

#menulist::-webkit-scrollbar {
  width: 5px;
}

#menulist::-webkit-scrollbar-track {
  background: #f5f5f6;
}

#menulist::-webkit-scrollbar-thumb {
  background: #b8b8bc;
  border-radius: 2.5px;
  border: 0px solid #f5f5f6;
}

#menulist::-webkit-scrollbar-thumb:hover {
  background: #b8b8bc;
}

.menulistitem_selected {
  font-weight: bold;
  cursor: pointer;
}

.menulistitem_selected::after {
  content: "\2192";
  /*position: absolute;*/
  margin-left: 5px;
  display: inline-block;
  font-weight: 400;
  transition: all .1s ease;
}

.close {
  margin-top: -14px;
  padding-top: 5px;
  padding-left: 5px;
  padding-right: 5px;
  font-size: 24px;
  cursor: pointer;
  display: inline-block;
}

.dropdownwindowright {
  width: 75%;
}

.CatalogMenuSearch #SearchBlock {
  /*border-bottom: 1px solid orange;*/
}

#SearchBlock {
  padding-top: 5px;
  /*padding-left: 25px;*/
  margin-left: 25px;
  margin-right: 50px;
  /*padding-right: 50px;*/
  display: flex;
  /*justify-content: flex-end;*/
  height: 35px;
  border-bottom: 1px solid #dfdfe1;
}

#SearchInputdiv {
  height: 100%;
  width: calc(100%-35px);
  flex: 1;
  /*color: #dfdfe1;*/
  /*flex: calc(100%-35px);*/
}

#SearchInput {
  width: 100%;
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: none;
}

#SearchButtondiv {
  height: 100%;
  justify-content: flex-end;
  width: 35px;
  /*flex: 35px;*/
}

#SearchButton button svg {
  vertical-align: middle;
  fill: #dfdfe1;
  /*justify-content: flex-end;
    flex: 35px;*/
}

#SearchButton {
  outline: none;
  border: none;
  background: transparent;
  cursor: pointer;
}

#SearchButton:active {
  outline: 1px solid blue;
}

<div id="dropdownwindow">
  <!-- <div class="crossline">
            <div class="close">&times;</div>
        </div> -->
  <div class="contentdropdownwindow">
    <div class="CatalogMenuLeft">
      <div class="catalogheader">
        <div class="flexline1">
          <div class="crossline">
          </div>
          <div class="flexdisabledscrollbar1">
          </div>
        </div>
        <div class="flexline2">
          <div class="windowheader">
            <h4>Каталог</h4>
          </div>
          <div class="flexdisabledscrollbar2">
          </div>
        </div>
        <div class="flexline3">
          <div class="bottompart">
          </div>
          <div class="flexdisabledscrollbar3">
          </div>
        </div>
      </div>

      <div class="flexcontent">
        <div class="windowmenulist" id="menulist">
          <div class="menulistitem">
            Смартфоны и гаджеты
          </div>
          <div class="menulistitem">
            Ноутбуки и компьютеры
          </div>
          <div class="menulistitem">
            Телевизоры, аудио-видео, Hi-Fi
          </div>
          <div class="menulistitem">
            Бытовая техника для дома и кухни
          </div>
          <div class="menulistitem">
            Строительство и ремонт
          </div>
          <div class="menulistitem">
            Дом и дача
          </div>
          <div class="menulistitem">
            Фото, видео, системы безопасности
          </div>
          <div class="menulistitem">
            Автотовары
          </div>
          <div class="menulistitem">
            Канцтовары, Мебель и Офисная техника
          </div>
          <div class="menulistitem">
            Красота и здоровье
          </div>
          <div class="menulistitem">
            Спорт и отдых
          </div>
          <div class="menulistitem">
            Товары для геймеров
          </div>
          <div class="menulistitem">
            Уцененные товары
          </div>
          <div class="menulistitem">
            Подарочные сертификаты
          </div>
          <div class="menulistitem">
            Сервисы и услуги
          </div>
        </div>
      </div>
    </div>
    <div class="myscroll">

    </div>
    <div id="dropdownwindowright">
      <div class="crosslineright">
        <div class="close">&times;</div>
      </div>
      <div class="CatalogMenuSearch">
        <div id="SearchBlock">
          <div id="SearchInputdiv">
            <input type="search" placeholder="Поиск по товарам" id="SearchInput">
          </div>
          <div id="SearchButtondiv">
            <button id="SearchButton"><svg class=" Icon" width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M5.22703 5.22703C7.86307 2.591 12.1369 2.591 14.773 5.22703C17.2298 7.68382 17.3968 11.5632 15.2742 14.2135L19.0607 18L18 19.0607L14.2135 15.2742C11.5632 17.3968 7.68381 17.2298 5.22703 14.773C2.59099 12.1369 2.59099 7.86307 5.22703 5.22703ZM13.7123 6.28769C11.6621 4.23744 8.33794 4.23744 6.28769 6.28769C4.23744 8.33795 4.23744 11.6621 6.28769 13.7123C8.33794 15.7626 11.6621 15.7626 13.7123 13.7123C15.7626 11.6621 15.7626 8.33795 13.7123 6.28769Z"></path></svg></button>
          </div>
        </div>
      </div>
      <div class="CatalogMenuRight">
      </div>
    </div>
  </div>
  <!--<div>-->
  <!--</div>-->
</div>

Есть файл smartphonesandgadgets.html и commonstylesformenuitems.css (которые должны загружаться при наведении курсора мыши на пункт меню левого столбца)

.headercontent {
  margin: 0 0 25px 0;
}

.menucategoryitem {
  column-count: 3;
  column-gap: 20px;
}

.menucategoryitem .menu__item {
  padding: 0 20px 40px 0;
  max-width: 260px;
  break-inside: avoid;
}

.menucategoryitem .menu__item .headersubmenu {
  font-size: 14px;
  margin: 0 0 12px 0;
}

.menucategoryitem .menu__item ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
.menucategoryitem .menu__item ul li {
  font-size: 14px;
}

/*.headersproductcategory {

}*/

<h1 class="headercontent">Смартфоны и гаджеты</h1>
  <div class="menucategoryitem">
    <div class="menu__item">
      <h2 class="headersubmenu">Заголовок</h2>
      <ul>
        <li>Смартфон</li>
        <li>Смартфон</li>
        <li>Смартфон</li>
        <li>Смартфон</li>
        <li>Смартфон</li>
        <li>Смартфон</li>
      </ul>
    </div>
    <div class="menu__item">
      <h2 class="headersubmenu">Заголовок</h2>
      <ul>
        <li>Смартфон</li>
        <li>Смартфон</li>
        <li>Смартфон</li>
        <li>Смартфон</li>
        <li>Смартфон</li>
        <li>Смартфон</li>
      </ul>
    </div>
    <div class="menu__item">
      <h2 class="headersubmenu">Заголовок</h2>
      <ul>
        <li>Смартфон</li>
        <li>Смартфон</li>
        <li>Смартфон</li>
        <li>Смартфон</li>
        <li>Смартфон</li>
        <li>Смартфон</li>
      </ul>
    </div>
    <div class="menu__item">
      <h2 class="headersubmenu">Заголовок</h2>
      <ul>
        <li>Смартфон</li>
        <li>Смартфон</li>
        <li>Смартфон</li>
        <li>Смартфон</li>
        <li>Смартфон</li>
        <li>Смартфон</li>
      </ul>
    </div>
    <div class="menu__item">
      <h2 class="headersubmenu">Заголовок</h2>
      <ul>
        <li>Смартфон</li>
        <li>Смартфон</li>
        <li>Смартфон</li>
        <li>Смартфон</li>
        <li>Смартфон</li>
        <li>Смартфон</li>
      </ul>
    </div>
    <div class="menu__item">
      <h2 class="headersubmenu">Заголовок</h2>
      <ul>
        <li>Смартфон</li>
        <li>Смартфон</li>
        <li>Смартфон</li>
        <li>Смартфон</li>
        <li>Смартфон</li>
        <li>Смартфон</li>
      </ul>
    </div>
    <div class="menu__item">
      <h2 class="headersubmenu">Заголовок</h2>
      <ul>
        <li>Смартфон</li>
        <li>Смартфон</li>
        <li>Смартфон</li>
        <li>Смартфон</li>
        <li>Смартфон</li>
        <li>Смартфон</li>
      </ul>
    </div>
  </div>

Должно быть, что при наведении курсора мыши

            const menuelems=document.querySelectorAll('.menulistitem');
            menuelems.forEach((menuelem) => { menuelem.addEventListener('mouseover', (event) => { event.target.style.cursor = "pointer";event.target.classList.add('menulistitem_selected')});

блок

                <div class="CatalogMenuRight">
                </div>

заполнялся содержимым файла smartphonesandgadgets.html (в случае просто загрузки страницы без наведения курсора мыши на пункт меню из левого столбца в правой части должно открываться содержимое окна для пункта меню Смартфоны и гаджеты). Каким образом осуществить это?

Возможна ли такая конструкция

document.getElementsByClassName('CatalogMenuRight')[0].innerHTML+=include('../html/smartphonesandgadgets.html');

?

БЛОГ НА HUSL

Подключение кода html файла в javascript. Использование include

Ответы (0 шт):