Menu
How do I make an menu?
What is a menu? How do you make a menu? This script and codes were developed by Mp_graphic on 06 August 2022, Saturday.
Menu - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>menu</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<html>
<head lang="en"> <meta charset="UTF-8"> <title></title>
</head>
<body>
<div id="main-wrapper" class="wrapper"> <div class="menu-icon-container"> <div class="menu-icon"> <span class="bar1"></span> <span class="bar2"></span> <span class="bar3"></span> </div> </div> <nav id="nav-menu"> <div class="menu-list-container"> <ul> <li>HOME</li> <li>ABOUT</li> <li>CONTACT</li> </ul> </div> </nav> <div class="main-container"> <div class="content"> <div class="text">DEMO</div> </div> </div>
</div>
</body>
</html> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Menu - Script Codes CSS Codes
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video { margin: 0; padding: 0; border: 0; font: inherit; font-size: 100%; vertical-align: baseline;
}
html { line-height: 1;
}
ol, ul { list-style: none;
}
table { border-collapse: collapse; border-spacing: 0;
}
caption, th, td { text-align: left; font-weight: normal; vertical-align: middle;
}
q, blockquote { quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after { content: ""; content: none;
}
a img { border: none;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary { display: block;
}
html, body { background: #999; width: 100%; height: 100%; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: 300;
}
.wrapper { width: 100%; height: 100%;
}
.wrapper .menu-icon span { -webkit-transition: background 0.4s ease-out, margin-bottom 0.2s, margin-top 0.2s, opacity 0.4s ease-out; -webkit-transition-delay: 0.2s, 0s, 0s, 0s; -moz-transition: background 0.4s ease-out 0.2s, margin-bottom 0.2s, margin-top 0.2s, opacity 0.4s ease-out; -o-transition: background 0.4s ease-out 0.2s, margin-bottom 0.2s, margin-top 0.2s, opacity 0.4s ease-out; transition: background 0.4s ease-out 0.2s, margin-bottom 0.2s, margin-top 0.2s, opacity 0.4s ease-out;
}
.wrapper.active .menu-icon span { -webkit-transition: background 0.4s ease-out, opacity 0.4s ease-out; -webkit-transition-delay: 0.6s, 0.6s; -moz-transition: background 0.4s ease-out 0.6s, opacity 0.4s ease-out 0.6s; -o-transition: background 0.4s ease-out 0.6s, opacity 0.4s ease-out 0.6s; transition: background 0.4s ease-out 0.6s, opacity 0.4s ease-out 0.6s; background: #ffffff;
}
.wrapper.active nav { top: 0; height: 100%;
}
.wrapper.active nav .menu-list-container { opacity: 1;
}
.wrapper.active .main-container { -webkit-transform: scale(0.8, 0.8); -moz-transform: scale(0.8, 0.8); -ms-transform: scale(0.8, 0.8); -o-transform: scale(0.8, 0.8); transform: scale(0.8, 0.8);
}
.main-container { width: 100%; height: 100%; background: url("https://source.unsplash.com/category/nature") no-repeat center center fixed white; -moz-background-size: cover; -webkit-background-size: cover; -o-background-size: cover; background-size: cover; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out;
}
.main-container .content { position: relative; width: 100%; height: 100%;
}
.main-container .content .text { padding: 10px 20px; font-size: 32px; letter-spacing: 3px; background: #333333; color: #ffffff; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
}
.menu-icon-container { position: absolute; top: 20px; right: 10%; z-index: 9999;
}
nav { background: rgba(33, 33, 33, 0.9); color: #ffffff; position: absolute; top: 100%; width: 100%; height: 0; left: 0; z-index: 1000; overflow: hidden; -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); -webkit-transition: all 0.4s ease-out; -webkit-transition-delay: 0.3s; -moz-transition: all 0.4s ease-out 0.3s; -o-transition: all 0.4s ease-out 0.3s; transition: all 0.4s ease-out 0.3s;
}
nav .menu-list-container { position: absolute; top: 50%; width: 100%; opacity: 0; -webkit-transition: opacity 0.4s ease-out; -webkit-transition-delay: 0.3s; -moz-transition: opacity 0.4s ease-out 0.3s; -o-transition: opacity 0.4s ease-out 0.3s; transition: opacity 0.4s ease-out 0.3s;
}
nav .menu-list-container ul { -webkit-transform: translate(0, -50%); -moz-transform: translate(0, -50%); -ms-transform: translate(0, -50%); -o-transform: translate(0, -50%); transform: translate(0, -50%); width: 100%;
}
nav .menu-list-container ul li { width: 100%; text-align: center; font-size: 24px; margin-bottom: 20px;
}
.demo { margin: auto; margin-top: 60px; padding: 75px 0 10px; width: 22px;
}
.menu-icon { display: block; float: left; cursor: pointer; -webkit-transition: all 0.2s ease-in; -moz-transition: all 0.2s ease-in; -o-transition: all 0.2s ease-in; transition: all 0.2s ease-in;
}
.menu-icon span { display: block; width: 22px; height: 4px; background: #333333; margin-bottom: 2px; border-radius: 1px; -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; -o-transition: all 0.4s ease-out; transition: all 0.4s ease-out;
}
.menu-icon span.bar1 { margin-top: 2px;
}
.menu-icon:hover span { margin-bottom: 4px;
}
.menu-icon:hover span.bar1 { margin-top: 0px;
}
.menu-icon.active { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg);
}
.menu-icon.active:hover span { margin-top: 2px; margin-bottom: 2px;
}
.menu-icon.active .bar1 { -webkit-transform: rotate(0deg) translateY(6px); -moz-transform: rotate(0deg) translateY(6px); -ms-transform: rotate(0deg) translateY(6px); -o-transform: rotate(0deg) translateY(6px); transform: rotate(0deg) translateY(6px);
}
.menu-icon.active .bar2 { opacity: 0;
}
.menu-icon.active .bar3 { -webkit-transform: rotate(-90deg) translateX(5px); -moz-transform: rotate(-90deg) translateX(5px); -ms-transform: rotate(-90deg) translateX(5px); -o-transform: rotate(-90deg) translateX(5px); transform: rotate(-90deg) translateX(5px);
}
Menu - Script Codes JS Codes
(function(){ var $mainWrapper = $("#main-wrapper"); $('.menu-icon').click(function(){ $(this).toggleClass('active'); $mainWrapper.toggleClass('active'); });
})();
Developer | Mp_graphic |
Username | mp_graphic |
Uploaded | August 06, 2022 |
Rating | 4.5 |
Size | 3,265 Kb |
Views | 30,360 |
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 |
Animation | 4,478 Kb |
Img hover | 1,646 Kb |
Tool tip | 3,718 Kb |
Vertical Timeline | 4,497 Kb |
Vertical Scrollbars | 2,506 Kb |
Scroll fade | 4,263 Kb |
A Pen by mp_graphic | 5,900 Kb |
MatchHeight | 2,055 Kb |
5,653 Kb | |
Scroll menu | 6,677 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 |
React Markdown Previewer | C0d0er | 3,190 Kb |
CSS Dynamic Width Square Div | Elleestcrimi | 2,861 Kb |
Clock Face Idea | Chrisburnell | 3,196 Kb |
Vue.js Lazy Loading | Kjbrum | 3,620 Kb |
Beautiful canvas stars | Matths | 2,399 Kb |
Popover Example | Seanboom | 2,429 Kb |
Draggables in pure angular | Rlo206 | 5,167 Kb |
NgEasyModal | Lorenzodianni | 4,159 Kb |
The CodePen Logo | Kindofone | 4,259 Kb |
Css or Czz.. | Judag | 4,111 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!