MegaHeader v6

megamenu s obsahem

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/img/logo/logo-vektor-100mega-b2b-v2.svg"></a>
  </div>
	
  
	<fieldset class="mh_search">
    <input type="search" placeholder="Hledaný produkt či výraz">
    <button type="submit" value="Submit"><i class="fas fa-search"></i></button>
    <div id="mega_suggest">
    	<a href="#">Rozšíené hledání</a>
			<div>nehledáte náhodou?</div>
			<div id="snippet-suggestControl-naseptavac">    <!--  Naseptavac stavajici -->
        <ul id="whisperer">
                <li class="category word"><span>Nejčastěji hledané:</span>
                    <ul>
                            <li><a href="/cs/search/list?search=apple+x">apple x</a></li>
                            <li><a href="/cs/search/list?search=apple+pencil">apple pencil</a></li>
                            <li><a href="/cs/search/list?search=apple+iphone+8">apple iphone 8</a></li>
                            <li><a href="/cs/search/list?search=apple+smart">apple smart</a></li>
                            <li><a href="/cs/search/list?search=Apple+Apple+Pencil">Apple Apple Pencil</a></li>
		                        <li><a href="/cs/search/list?search=app" class="more">... všechny výsledky</a></li>
                    </ul>
                </li><!-- /kategorie -->
                <li class="category cats"><span>Značky:</span>
                    <ul>
                            <li><a href="/cs/kategorie/14101-apple">APPLE</a></li>
                    </ul>
                </li><!-- /značky -->
                <li...

CSS

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

/*@import url('https://b2b.100mega.cz/css/theme-default.css?v=./../www/css/theme-default.css');*/

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;
	--mh_submenu_color: #48596c;
	--mh_menu_background:#495a6a;
  --mega-aside-width: 230px;
	--mega_header-height: 56px
}


/* MEGAheader - struktura a prvky desktop/mobil */
header.mega_header,
header.mega_header a {text-decoration:none; }
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;  background: var(--mh_menu_background); 
position: fixed;  top: 0; left: 0; right: 0; transition: top .2s ease-in-out ; z-index: 100;
height:var(--mega_header-height);}
.mega_header > * { max-height: var(--mega_header-height);}

header.outOfScreen { top: -70px; 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;}
.mega_header .mh_offer-holder{grid-area: mh_offer-holder; }
.mega_header .mh_hamburger   {grid-area: mh_hamburger; display: flex; justify-content: flex-end; align-items: center;}

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

  header.mega_header {  display: grid;...

JavaScript

/*  test */
$(document).ready(function () {
	$(".mh_menu-dropdown").hover(function () {
		$(this).children("div").children(".addOn").append($("#searchInMenu"));
		$("#searchInMenu").show()
  });
});

// obsluha mobilního menu
 const menu = document.querySelector(".mh_nav");
 const menuMain = menu.querySelector(".mh_menu-main");
 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){
...