Module «submenu». Подменю для шапки сайта

Source:

https://html.ildar-meyker.ru/html-kgeu/

Демо:

https://codepen.io/ildar-meyker/pen/abjvGEx

Плагины:

https://jquery.com

Подключение:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Разметка:

<div class="header">
  <nav class='header__nav'>
    <a href="#">Главная</a>
    <a href="#" data-target='submenu-1' class='js-submenu-btn'>Новости</a>
    <a href="#" data-target='submenu-2' class='js-submenu-btn'>Репортажи</a>
  </nav>
  
  
  
</div>


<div class="submenu js-submenu-panel" id="submenu-1">
  <nav>
   <ul>
     <li>
       <a href="#"><span>Практика</span></a>
     </li>

     <li>
       <a href="#"><span>Объединенный совет обучающихся</span></a>
     </li>

     <li>
       <a href="#"><span>Студенческий лагерь Шеланга</span></a>
     </li>

     <li>
       <a href="#"><span>Платные образовательные услуги</span></a>
     </li>

     <li>
       <a href="#"
          ><span
                 >Расписание государственной итоговой аттестации</span
         ></a
         >
     </li>

     <li>
       <a href="#"
          ><span
                 >Расписание мастер-классов и лекционных занятий
         руководителей энергетических компаний</span
         ></a
         >
     </li>

     <li>
       <a href="#"><span>Новости</span></a>
     </li>

     <li>
       <a href="#"><span>Календарь событий</span></a>
     </li>

     <li>
       <a href="#"
          ><span
                 >Расписание занятий и промежуточная аттестация</span
         ></a
         >
     </li>
    </ul>
  </nav>
</div>

<div class="submenu js-submenu-panel" id="submenu-2">
  <nav>
    <ul>
     

      <li>
        <a href="#"><span>Платные образовательные услуги</span></a>
      </li>

      <li>
        <a href="#"
           ><span
                  >Расписание государственной итоговой аттестации</span
          ></a
          >
      </li>

      <li>
        <a href="#"
           ><span
                  >Расписание мастер-классов и лекционных занятий
          руководителей энергетических компаний</span
          ></a
          >
      </li>

      <li>
        <a href="#"><span>Новости</span></a>
      </li>

      <li>
        <a href="#"><span>Календарь событий</span></a>
      </li>

      <li>
        <a href="#"
           ><span
                  >Расписание занятий и промежуточная аттестация</span
          ></a
          >
      </li>
    </ul>
  </nav>
</div>

Стили:

.header {
 position: relative;
 font-family: sans-serif;
}

.header__nav {
  background: #000;
}

.header__nav  a {
  display: inline-block;
  padding: 1em;
  margin-right: 1em;
  text-decoration: none;
  color: #fff;
}

.submenu {
  position: absolute;
  padding: 1em;
  display: none;
  border: 1px solid #000;
}

.submenu.active {
  display: block;
}

.submenu a {
  text-decoration: none;
  color: #000;
}

Инициализация:

const CLASS_BTN = "js-submenu-btn";
const CLASS_PANEL = "js-submenu-panel";

let timer = null;
let $activePanel = $();
let $activeBtn = $();

function closeActive() {
    $activePanel.removeClass("active");
    $activeBtn.removeClass("hover");
}

function handleMenuItemEnter() {
    clearTimeout(timer);
    closeActive();

    const target = $(this).data("target");

    if (!target) return;

    $activeBtn = $(this);
    $activePanel = $("#" + target);

    const btnOffset = $(this).offset();
    const btnBottomY = btnOffset.top + $(this).outerHeight();
    const btnMiddleX = btnOffset.left + $(this).outerWidth() / 2;

    const panelWidth = $activePanel.outerWidth();
    const panelLeftX = btnMiddleX - panelWidth / 2;
    const panelRightX = panelLeftX + panelWidth;

    const $container = $(".header");
    const minLeftX = $container.offset().left;
    const maxRightX = minLeftX + $container.outerWidth();

    $activeBtn.addClass("hover");
    $activePanel
        .css({
            top: btnBottomY,
            left:
                panelLeftX < minLeftX || panelRightX > maxRightX
                    ? minLeftX
                    : panelLeftX,
        })
        .addClass("active");
}

function handleMenuItemLeave() {
    timer = setTimeout(closeActive, 200);
}

function handleSubmenuEnter() {
    clearTimeout(timer);
}

function handleSubmenuLeave() {
    closeActive();
}

$(function () {
    if ($(".js-submenu-btn").length === 0) return;

    $(document).on("mouseenter", "." + CLASS_BTN, handleMenuItemEnter);
    $(document).on("mouseleave", "." + CLASS_BTN, handleMenuItemLeave);
    $(document).on("mouseenter", "." + CLASS_PANEL, handleSubmenuEnter);
    $(document).on("mouseleave", "." + CLASS_PANEL, handleSubmenuLeave);
});