Mega menu

mega menu What is a mega menu How do you make a mega menu? This script and codes were developed by Dima on 21 November 2021, Sunday.

How do I make an mega menu?
  1. Mega menu Previews
  2. Mega menu HTML Codes
  3. Mega menu CSS Codes
  4. Mega menu JS Codes
Mega menu Previews

Mega menu HTML Codes

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>mega menu</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  
<header>
  <div class="wr_Content flex"><a id="logo" href="/">LOGO</a>
    <nav class="flex"><a href="">button_1</a><a href="">button_2</a><a href="">button_3</a>
    </nav>
    <div id="search">
      <input type="text" placeholder="Поиск по сайту"/>
    </div>
  </div>
</header>
<div class="flex" id="menu">
  <div class="item">item_1
    <div class="submenu">
      <div class="wr_Content">
        <h1>item_1</h1>
        <p>
           List items for menu <b>item_1 </b>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, sit perferendis? Obcaecati!</p>
        <div class="flex">
          <nav><a href="">menu_1 sub_1</a><a href="">menu_1 sub_2</a><a href="">menu_1 sub_3</a><a href="">menu_1 sub_4</a>
          </nav>
          <nav><a href="">menu_1 sub_1</a><a href="">menu_1 sub_2</a><a href="">menu_1 sub_3</a><a href="">menu_1 sub_4</a><a href="">menu_1 sub_5</a><a href="">menu_1 sub_6</a>
          </nav>
          <nav><a href="">menu_1 sub_1</a><a href="">menu_1 sub_2</a><a href="">menu_1 sub_3</a><a href="">menu_1 sub_4</a><a href="">menu_1 sub_5</a><a href="">menu_1 sub_6</a><a href="">menu_1 sub_7</a><a href="">menu_1 sub_8</a>
          </nav>
        </div>
      </div>
    </div>
  </div>
  <div class="item">item_2
    <div class="submenu">
      <div class="wr_Content">
        <h1>item_2</h1>
        <p>
           List items for menu <b>item_2 </b>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, sit perferendis? Obcaecati!</p>
        <div class="flex">
          <nav><a href="">menu_2 sub_1</a><a href="">menu_2 sub_2</a><a href="">menu_2 sub_3</a><a href="">menu_2 sub_4</a><a href="">menu_2 sub_5</a><a href="">menu_2 sub_6</a><a href="">menu_2 sub_7</a><a href="">menu_2 sub_8</a><a href="">menu_2 sub_9</a><a href="">menu_2 sub_10</a><a href="">menu_2 sub_11</a><a href="">menu_2 sub_12</a>
          </nav>
          <nav><a href="">menu_2 sub_1</a><a href="">menu_2 sub_2</a><a href="">menu_2 sub_3</a><a href="">menu_2 sub_4</a><a href="">menu_2 sub_5</a><a href="">menu_2 sub_6</a><a href="">menu_2 sub_7</a><a href="">menu_2 sub_8</a><a href="">menu_2 sub_9</a><a href="">menu_2 sub_10</a><a href="">menu_2 sub_11</a><a href="">menu_2 sub_12</a>
          </nav>
          <nav><a href="">menu_2 sub_1</a><a href="">menu_2 sub_2</a><a href="">menu_2 sub_3</a><a href="">menu_2 sub_4</a><a href="">menu_2 sub_5</a><a href="">menu_2 sub_6</a><a href="">menu_2 sub_7</a><a href="">menu_2 sub_8</a><a href="">menu_2 sub_9</a>
          </nav>
          <nav><a href="">menu_2 sub_1</a><a href="">menu_2 sub_2</a><a href="">menu_2 sub_3</a><a href="">menu_2 sub_4</a><a href="">menu_2 sub_5</a><a href="">menu_2 sub_6</a><a href="">menu_2 sub_7</a>
          </nav>
          <nav><a href="">menu_2 sub_1</a><a href="">menu_2 sub_2</a><a href="">menu_2 sub_3</a><a href="">menu_2 sub_4</a><a href="">menu_2 sub_5</a><a href="">menu_2 sub_6</a><a href="">menu_2 sub_7</a><a href="">menu_2 sub_8</a>
          </nav>
        </div>
      </div>
    </div>
  </div>
  <div class="item">item_3
    <div class="submenu">
      <div class="wr_Content">
        <h1>item_3</h1>
        <p>
           List items for menu <b>item_3 </b>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, sit perferendis? Obcaecati!</p>
        <div class="flex">
          <nav><a href="">menu_3 sub_1</a><a href="">menu_3 sub_2</a><a href="">menu_3 sub_3</a><a href="">menu_3 sub_4</a><a href="">menu_3 sub_5</a><a href="">menu_3 sub_6</a><a href="">menu_3 sub_7</a>
          </nav>
          <nav><a href="">menu_3 sub_1</a><a href="">menu_3 sub_2</a><a href="">menu_3 sub_3</a><a href="">menu_3 sub_4</a>
          </nav>
          <nav><a href="">menu_3 sub_1</a><a href="">menu_3 sub_2</a><a href="">menu_3 sub_3</a><a href="">menu_3 sub_4</a><a href="">menu_3 sub_5</a><a href="">menu_3 sub_6</a><a href="">menu_3 sub_7</a><a href="">menu_3 sub_8</a><a href="">menu_3 sub_9</a><a href="">menu_3 sub_10</a><a href="">menu_3 sub_11</a><a href="">menu_3 sub_12</a>
          </nav>
        </div>
      </div>
    </div>
  </div>
  <div class="item">item_4
    <div class="submenu">
      <div class="wr_Content">
        <h1>item_4</h1>
        <p>
           List items for menu <b>item_4 </b>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, sit perferendis? Obcaecati!</p>
        <div class="flex">
          <nav><a href="">menu_4 sub_1</a><a href="">menu_4 sub_2</a><a href="">menu_4 sub_3</a><a href="">menu_4 sub_4</a><a href="">menu_4 sub_5</a><a href="">menu_4 sub_6</a><a href="">menu_4 sub_7</a><a href="">menu_4 sub_8</a><a href="">menu_4 sub_9</a>
          </nav>
          <nav><a href="">menu_4 sub_1</a><a href="">menu_4 sub_2</a><a href="">menu_4 sub_3</a><a href="">menu_4 sub_4</a><a href="">menu_4 sub_5</a><a href="">menu_4 sub_6</a><a href="">menu_4 sub_7</a>
          </nav>
          <nav><a href="">menu_4 sub_1</a><a href="">menu_4 sub_2</a><a href="">menu_4 sub_3</a><a href="">menu_4 sub_4</a><a href="">menu_4 sub_5</a>
          </nav>
          <nav><a href="">menu_4 sub_1</a><a href="">menu_4 sub_2</a><a href="">menu_4 sub_3</a><a href="">menu_4 sub_4</a><a href="">menu_4 sub_5</a><a href="">menu_4 sub_6</a><a href="">menu_4 sub_7</a><a href="">menu_4 sub_8</a><a href="">menu_4 sub_9</a><a href="">menu_4 sub_10</a><a href="">menu_4 sub_11</a><a href="">menu_4 sub_12</a>
          </nav>
          <nav><a href="">menu_4 sub_1</a><a href="">menu_4 sub_2</a><a href="">menu_4 sub_3</a><a href="">menu_4 sub_4</a>
          </nav>
          <nav><a href="">menu_4 sub_1</a><a href="">menu_4 sub_2</a><a href="">menu_4 sub_3</a><a href="">menu_4 sub_4</a><a href="">menu_4 sub_5</a><a href="">menu_4 sub_6</a><a href="">menu_4 sub_7</a><a href="">menu_4 sub_8</a><a href="">menu_4 sub_9</a>
          </nav>
          <nav><a href="">menu_4 sub_1</a><a href="">menu_4 sub_2</a><a href="">menu_4 sub_3</a><a href="">menu_4 sub_4</a><a href="">menu_4 sub_5</a><a href="">menu_4 sub_6</a><a href="">menu_4 sub_7</a><a href="">menu_4 sub_8</a><a href="">menu_4 sub_9</a><a href="">menu_4 sub_10</a><a href="">menu_4 sub_11</a><a href="">menu_4 sub_12</a>
          </nav>
          <nav><a href="">menu_4 sub_1</a><a href="">menu_4 sub_2</a><a href="">menu_4 sub_3</a><a href="">menu_4 sub_4</a><a href="">menu_4 sub_5</a><a href="">menu_4 sub_6</a><a href="">menu_4 sub_7</a>
          </nav>
        </div>
      </div>
    </div>
  </div>
  <div class="item">item_5
    <div class="submenu">
      <div class="wr_Content">
        <h1>item_5</h1>
        <p>
           List items for menu <b>item_5 </b>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, sit perferendis? Obcaecati!</p>
        <div class="flex">
          <nav><a href="">menu_5 sub_1</a><a href="">menu_5 sub_2</a><a href="">menu_5 sub_3</a><a href="">menu_5 sub_4</a>
          </nav>
          <nav><a href="">menu_5 sub_1</a><a href="">menu_5 sub_2</a><a href="">menu_5 sub_3</a><a href="">menu_5 sub_4</a><a href="">menu_5 sub_5</a><a href="">menu_5 sub_6</a><a href="">menu_5 sub_7</a><a href="">menu_5 sub_8</a><a href="">menu_5 sub_9</a><a href="">menu_5 sub_10</a><a href="">menu_5 sub_11</a>
          </nav>
        </div>
      </div>
    </div>
  </div>
</div>
<main class="wr_Content flex">
  <div class="item"><img src="http://placehold.it/240x200?text=PIC" alt=""/></div>
  <div class="item"><img src="http://placehold.it/240x200?text=PIC" alt=""/></div>
  <div class="item"><img src="http://placehold.it/240x200?text=PIC" alt=""/></div>
  <div class="item"><img src="http://placehold.it/240x200?text=PIC" alt=""/></div>
  <div class="item"><img src="http://placehold.it/240x200?text=PIC" alt=""/></div>
  <div class="item"><img src="http://placehold.it/240x200?text=PIC" alt=""/></div>
  <div class="item"><img src="http://placehold.it/240x200?text=PIC" alt=""/></div>
  <div class="item"><img src="http://placehold.it/240x200?text=PIC" alt=""/></div>
  <div class="item"><img src="http://placehold.it/240x200?text=PIC" alt=""/></div>
  <div class="item"><img src="http://placehold.it/240x200?text=PIC" alt=""/></div>
  <div class="item"><img src="http://placehold.it/240x200?text=PIC" alt=""/></div>
  <div class="item"><img src="http://placehold.it/240x200?text=PIC" alt=""/></div>
  <div class="item"><img src="http://placehold.it/240x200?text=PIC" alt=""/></div>
  <div class="item"><img src="http://placehold.it/240x200?text=PIC" alt=""/></div>
  <div class="item"><img src="http://placehold.it/240x200?text=PIC" alt=""/></div>
  <div class="item"><img src="http://placehold.it/240x200?text=PIC" alt=""/></div>
  <div class="item"><img src="http://placehold.it/240x200?text=PIC" alt=""/></div>
  <div class="item"><img src="http://placehold.it/240x200?text=PIC" alt=""/></div>
  <div class="item"><img src="http://placehold.it/240x200?text=PIC" alt=""/></div>
  <div class="item"><img src="http://placehold.it/240x200?text=PIC" alt=""/></div>
  <div class="item"><img src="http://placehold.it/240x200?text=PIC" alt=""/></div>
  <div class="item"><img src="http://placehold.it/240x200?text=PIC" alt=""/></div>
  <div class="item"><img src="http://placehold.it/240x200?text=PIC" alt=""/></div>
  <div class="item"><img src="http://placehold.it/240x200?text=PIC" alt=""/></div>
</main>
  
    <script src="js/index.js"></script>

</body>
</html>

Mega menu CSS Codes

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font: 16px/1.4 sans-serif;
}
.flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.wr_Content {
  max-width: 1280px;
  min-width: 540px;
  margin: 0 auto;
  padding: 0 2em;
}
#menu.sticky {
  position: fixed;
  top: 0;
  left: 0;
  -webkit-transform: translateX(0);
          transform: translateX(0);
  width: 100%;
}
#menu {
  -webkit-transition: left 0.7s;
  transition: left 0.7s;
  left: 100%;
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  background: #157fbe;
  color: #fff;
  position: relative;
  z-index: 10;
}
#menu:hover {
  background: #116698;
}
#menu:hover:before {
  content: '';
  pointer-events: none;
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background: -webkit-linear-gradient(top, rgba(0,0,0,0.5) 20%, rgba(255,255,255,0.8) 50%);
  background: linear-gradient(to bottom, rgba(0,0,0,0.5) 20%, rgba(255,255,255,0.8) 50%);
  z-index: -1;
}
#menu .item {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  cursor: pointer;
  padding: 1em 0;
  text-align: center;
}
#menu .item:hover {
  background: #157fbe;
}
#menu .item:hover .submenu {
  display: block;
}
.submenu {
  text-align: left;
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100vw;
  background: #157fbe;
  padding: 1em;
}
.submenu a {
  color: #fff;
  display: block;
}
.submenu a:hover {
  text-decoration: underline;
}
.submenu .flex {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.submenu nav {
  margin: 10px;
  padding: 1em;
  background: #1375af;
}
header {
  padding: 1em;
}
header .flex {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
header nav a {
  background: #157fbe;
  color: #fff;
  padding: 0.5em 1em;
}
header nav a+a {
  margin-left: 0.5em;
}
header nav a:hover {
  background: #1372ab;
}
a {
  text-decoration: none;
}
ul {
  list-style: none;
}
#logo {
  color: #157fbe;
  font-weight: bold;
  font-size: 2em;
}
input {
  outline: 0;
  box-shadow: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border-radius: 0;
  border: 1px solid #157fbe;
}
#search {
  position: relative;
}
#search input {
  padding: 0.5em 1em;
  font-size: 1em;
}
#search:after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 44px;
  background: #157fbe url("data:image/svg+xml;utf8,") center no-repeat;
}
main {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
main .item {
  margin: 1em;
}

Mega menu JS Codes

function sticky() {
	var nav = document.querySelector("#menu"),
      H = nav.offsetHeight,
			nav_prev = document.querySelector("header");

	function stickyOn(){
		nav.classList.add("sticky");
		nav_prev.style.marginBottom = H + 'px';
	}
	function stickyOff() {
		nav.classList.remove("sticky");
		nav_prev.style.marginBottom = '';
	}

	( window.scrollY > H ) ? stickyOn() : stickyOff();

}
document.addEventListener("scroll", sticky);
Do you want hide your ip address?Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup.