MegaHeader v5

nasazen skrol strankz

by Petr Haluza

HTML

<!DOCTYPE html>
<html>
<head> 
<title>Mega Menu</title> 
<meta name="viewport" content="width=device-width, initial-scale=1" /> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" crossorigin="anonymous" referrerpolicy="no-referrer"  /> 
</head>
<body>


<!-- header start -->
<header class="mega_header">

  <div class="mh_tree-toggle">
    <a href="#">Produkty</a>
  </div>
  
  <div class="mh_logo">
    <a href="#"><img src="https://b2b.100mega.cz/css/logo.png"></a>
  </div>

  
  <div class="mh_menu"><!-- mh_menu -->
    <div class="mh_menu-overlay"></div>
    
    <nav class="mh_nav">
      <div class="mh_nav-mobile-head">
        <div class="mh_go-back"><i class="fa fa-angle-left"></i></div>
        <div class="mh_nav-current-title"></div>
        <div class="mh_nav-close">&times;</div>
      </div>
              
      <ul class="mh_menu-main">
        <li><a href="#">Školení</a></li>
                
        <li class="mh_menu-dropdown">
          <a href="#">Podpora <i class="fa fa-angle-down"></i></a>
          
            <div class="mh_menu-sub-menu mh_mega-menu mh_mega-menu-3col">
                    
              <div class="mh_menu-sub-group">
                <input name="mh_menuGroup1" id="mg11" type="radio"><label for="mg11" class="title">Technická podpora<i class="fa fa-angle-down"></i></label>
                <ul>
                  <li><a href="#"><i class="fa-solid fa-headset"></i>Kontaktovat podporu<span class="mh_new">Nové</span></a></li>
                  <li><a href="#"><i class="fa-solid fa-helicopter-symbol"></i>Často kladené dotazy</a></li>
                  <li><a href="#">Lorem ipsum</a></li>
                </ul>
              </div>
              
              <div class="mh_menu-sub-group">
                <input name="mh_menuGroup1" id="mg12" type="radio"><label for="mg12" class="title">Reklamace<i class="fa fa-angle-down"></i></label>
                <ul>
                 ...

CSS

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@100;200;300;400;500;700;900&display=swap');

body{	line-height: 1.5;	font-family: 'Noto Sans', sans-serif;	font-size:14px; font-weight: 400;	overflow-x: hidden;}
*{	margin:0;	box-sizing: border-box;}
:before,:after{	box-sizing: border-box;}

/********/
:root {
  --mega-red: #ea0000;
  --mega-aside-width: 230px
}

/* MEGAheader - struktura a prvky desktop/mobil */
header.mega_header,
header.mega_header a {text-decoration:none; color: #48596c}
header.mega_header ul {padding:0; margin:0; list-style: none}
header.mega_header {display: flex; width: 100%; /*position: relative;*/ z-index: 99; margin:0;	padding:0;box-shadow: 0 0 15px -5px; /*}

header { */position: fixed; height:70px; top: 0; left: 0; right: 0; transition: top .2s ease-in-out ; z-index: 100;}
header.outOfScreen { top: -69px; box-shadow:none}


.mega_header .mh_tree-toggle {grid-area: mh_tree-toggle; display: flex; justify-content: flex-start; align-items: center;}
.mega_header .mh_logo        {grid-area: mh_logo; display: flex; justify-content: center; align-items: center; background: #ea0000; max-width: var(--mega-aside-width);}
.mega_header .mh_menu        {grid-area: mh_menu; display: flex; align-items: center;}
.mega_header .mh_search      {grid-area: mh_search; }
.mega_header .mh_user        {grid-area: mh_user; margin-left: auto}
.mega_header .mh_carts-holder{grid-area: mh_carts-holder; margin-left:auto}
.mega_header .mh_hamburger   {grid-area: mh_hamburger; display: flex; justify-content: flex-end; align-items: center;}

@media (max-width:991px) { /* mobil */

  header.mega_header {  display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-areas:
  "mh_user         mh_user         mh_user"
  "mh_tree-toggle  mh_logo         mh_hamburger"
  "mh_search       mh_search       mh_search"
  "mh_carts-holder mh_carts-holder mh_carts-holder";}
  .mega_header .mh_tree-toggle,
  .mega_header .mh_hamburger {background:#ea0000}
 ...

JavaScript

// cíl minimalizovat podíl js, eliminovat kde půjde

// obsluha mobilního menu
 const menu = document.querySelector(".mh_nav");
 const menuMain = menu.querySelector(".mh_menu-dropdown");
 const goBack = menu.querySelector(".mh_go-back");
 const menuTrigger = document.querySelector(".mh_mobile-trigger");
 const closeMenu = menu.querySelector(".mh_nav-close");
 let subMenu;
 menuMain.addEventListener("click", (e) =>{
 	if(!menu.classList.contains("active")){
 		return;
 	}
   if(e.target.closest(".mh_menu-dropdown")){
   	 const hasChildren = e.target.closest(".mh_menu-dropdown");
      showSubMenu(hasChildren);
   }
 });
 goBack.addEventListener("click",() =>{
 	 hideSubMenu();
 })
 menuTrigger.addEventListener("click",() =>{
 	 toggleMenu();
 })
 closeMenu.addEventListener("click",() =>{
 	 toggleMenu();
 })
 document.querySelector(".mh_menu-overlay").addEventListener("click",() =>{
 	toggleMenu();
 })
 function toggleMenu(){
 	menu.classList.toggle("active");
 	document.querySelector(".mh_menu-overlay").classList.toggle("active");
 }
 function showSubMenu(hasChildren){
    subMenu = hasChildren.querySelector(".mh_menu-sub-menu");
    subMenu.classList.add("active");
    subMenu.style.animation = "slideLeft 0.3s ease forwards";
    const menuTitle = hasChildren.querySelector("i").parentNode.childNodes[0].textContent;
    menu.querySelector(".mh_nav-current-title").innerHTML=menuTitle;
    menu.querySelector(".mh_nav-mobile-head").classList.add("active");
 }
 function hideSubMenu(){
    subMenu.style.animation = "slideRight 0.2s ease forwards";
    setTimeout(() =>{
       subMenu.classList.remove("active");
    },300);
    menu.querySelector(".mh_nav-current-title").innerHTML="";
    menu.querySelector(".mh_nav-mobile-head").classList.remove("active");
 }
 window.onresize = function(){
 	if(this.innerWidth >991){
 		if(menu.classList.contains("active")){
 			toggleMenu();
 		}

 	}
 }
 // /end - obsluha mobilního menu

// obsluha našeptávače k lavnímu search...