Mega menu

Developer
Dima
Size
5,066 Kb
Views
26,299

How do I make an 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 17 September 2022, Saturday.

Mega menu Previews
IQ Test

Mega menu - Script Codes 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 - Script Codes 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 - Script Codes 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);
Mega menu - Script Codes
Mega menu - Script Codes
Home Page Home
Developer Dima
Username dimaZubkov
Uploaded September 17, 2022
Rating 3
Size 5,066 Kb
Views 26,299
Do you need developer help for Mega menu?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Dima (dimaZubkov) Script Codes
Name
Price range slider
A Pen by Dima
Section scroll
Ken Burns Effect
Glitch
Codrops HoverEffectIdeas
Web Audio API
Angular T-shirt shop
Ken Burns effect CSS only
Three js
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!