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 |
Fluid typography | 3,929 Kb |
Vue cart | 4,497 Kb |
Scroll animating effect | 4,146 Kb |
Star Rating | 2,819 Kb |
Glitch | 3,368 Kb |
Section Slides | 5,312 Kb |
Vue radio | 5,915 Kb |
Audio button | 2,784 Kb |
Glitch | 2,843 Kb |
Burger nav | 3,874 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 |
Mondrian | Chrisarmstrong | 2,787 Kb |
IE11 Test | Boostnewmedia | 4,998 Kb |
A Pen by Andrea Verlicchi | Verlok | 2,018 Kb |
CSS background-size - GSAP | Jonathan | 2,209 Kb |
A Pen by Ben Babics | Benbabics | 2,957 Kb |
Login with flip 3d animation | Mariusbalaj | 3,014 Kb |
Flexbox Test | Icutpeople | 2,486 Kb |
React Markdown Previewer | C0d0er | 3,190 Kb |
Coming Soon | MariamMassadeh | 1,680 Kb |
3D Text in Sass | Bookcasey | 2,766 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!