Mega menu
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 - 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);

Developer | Dima |
Username | dimaZubkov |
Uploaded | September 17, 2022 |
Rating | 3 |
Size | 5,066 Kb |
Views | 26,299 |
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!
Name | Size |
Price range slider | 3,589 Kb |
A Pen by Dima | 3,031 Kb |
Section scroll | 5,271 Kb |
Ken Burns Effect | 3,067 Kb |
Glitch | 3,368 Kb |
Codrops HoverEffectIdeas | 14,526 Kb |
Web Audio API | 3,946 Kb |
Angular T-shirt shop | 8,889 Kb |
Ken Burns effect CSS only | 3,398 Kb |
Three js | 2,323 Kb |
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!
Name | Username | Size |
Menubar compass mixin | Michaelparenteau | 4,925 Kb |
Simple Linear Regression with Editable Table | Melatonind | 3,264 Kb |
Starting out with Ember.JS | Cfleschhut | 4,808 Kb |
Web Spiral - p5.js | TWAIN | 2,183 Kb |
A form arranged using automatic placement. | Vikasford | 2,103 Kb |
Sinclair Research Computers | MattCowley | 3,068 Kb |
HTML5 Breakout | Jaysalvat | 4,873 Kb |
A Pen by Gregory Potdevin | GregoryPotdevin | 1,713 Kb |
Pericles mi loro... | Judag | 4,125 Kb |
Sass Radar | Jlong | 6,887 Kb |
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. Hide Your IP Now!