Atomic Menu
How do I make an atomic menu?
Building assets for a math and science tutoring website. Thought this little guy was cool. More to come soon.. What is a atomic menu? How do you make a atomic menu? This script and codes were developed by Alex Coven on 11 August 2022, Thursday.
Atomic Menu Previews
Atomic Menu - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Atomic Menu</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ .navigation { background:#fff; width:100%; height:250px; display:none;
}
svg { margin:0 auto; position:relative; left:0px; stroke-linejoin:round; stroke-linecap:round; display:block; stroke:#fff; stroke-width: 1.5; stroke-dasharray: 300; stroke-dashoffset: 400; width:80px; height:80px; padding-top:50px; animation: undraw 0.75s forwards linear;
}
.navigation li:hover > svg { animation: draw 0.5s forwards linear;
}
.navigation ul li { display:inline-block; float:left; width:25%; margin:0; height:250px; transition: 0.5s all ease-in-out; box-shadow:0px 2px 10px rgba(0,0,0,0);
}
.navigation li a:after { content:''; border-bottom:1px solid #fff; width:0px; height:1px; display:block; margin:0 auto; transition: all 0.35s ease-in-out;
}
.navigation li a:hover:after { content:''; border-bottom:1px solid #fff; width:40px; height:1px; display:block; margin:0 auto;
}
.navigation ul { margin: 0px; padding: 0px;
}
.navigation ul li a { width:100%; text-align:center; display: block; text-decoration: none; text-transform:uppercase; letter-spacing:2px; color:#fff; font-family:helvetica; font-size:12px; height:250px; line-height: 55px; font-weight:lighter; transition: 0.5s all ease-in-out; margin-top: -12px;
}
/* .navigation ul li a:before {
content:''; background:url('http://clients.pivotdesign.com/dev/sterlingbay/4c/hospitality.png'); background-repeat:no-repeat; display:block; text-align:center; width: 65px; height: 59px; margin: 0 auto 0px auto; margin-top: 143px; transition:0.5s all ease-in-out;
} */
.navigation ul li a:hover:before { -webkit-filter: drop-shadow(0px 3px 3px rgba(0,0,0,0.3)); filter: drop-shadow(0px 3px 3px rgba(0,0,0,0.3)); -ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=3, Color='#444')";
}
.navigation ul li:nth-child(1) { background:#DB4D3B;
}
.navigation ul li:nth-child(2) { background:#B74132;
}
.navigation ul li:nth-child(3) { background:#772A20;
}
.navigation ul li:nth-child(4) { background:#38140F;
}
.navigation ul li:hover { background:#F26451; box-shadow:0px 2px 10px rgba(0,0,0,0.25); z-index:20;
}
.navigation ul li a:hover { text-shadow:0px 1px 3px regba(0,0,0,0.3); letter-spacing:4px;
}
html { padding:0; margin:0; -webkit-font-smoothing: subpixel-antialiased;
}
body { background: #F26451; padding:0; margin:0;
}
p { color: #fff; text-transform: uppercase; letter-spacing: 4px; font-size: 10px; font-family: "helvetica" sans; text-align: center;
}
.container { width:100%; padding:20px; box-sizing:border-box;
}
.mob_btn { width:100%; position:relative;
}
button { position: absolute; top: 20px; right: 20px; width: 30px; height: 30px; transition: all 300ms cubic-bezier(.61, .01, .42, 1); cursor: pointer; background: transparent; border: 0px;
}
button div { height: 0px; border: 1.5px solid #fff; width: 22px; display: block; position: absolute; transition: all 300ms cubic-bezier(.61, .01, .42, 1); background:#fff;
}
button:hover { transition-delay: 100ms; transform: scale(1.1);
}
button:hover div:nth-child(3):before { width: 2px; height: 2px; border-radius: 50%; background: #F26451;
}
button:hover div { border: 2px solid #fff; height: 9px; border-radius: 50%; margin-left: -1px; margin-top: 2px; animation: atom 300ms linear 1; width: 25px; top: 0px; background:transparent;
}
button:focus { outline: 0px;
}
div:nth-child(1) { top: 0px;
}
div:nth-child(2) { top: 8px;
}
div:nth-child(3) { top: 16px;
}
div:nth-child(3):before { opacity: 0; animation: ball 1.5s linear infinite; content: ''; border: 2px solid #fff; display: block; position: relative; top: 0.25px;
}
button:hover div:nth-child(1) { transform: rotate(-33deg);
}
button:hover div:nth-child(2) { transform: rotate(90deg);
}
button:hover div:nth-child(3) { transform: rotate(33deg);
}
button:hover div:nth-child(3):before { opacity: 1; transition: opacity 600ms cubic-bezier(.61, .01, .42, 1); ;
}
button.mob_open:hover div:nth-child(3):before,
button.mob_open div:nth-child(3):before,
button.mob_open div:nth-child(2) { opacity: 0; transition: all 200ms;
}
button.mob_open div{ border: 1.5px solid #fff; height: 0px; border-radius: 0%; margin-left: -1px; margin-top: 6px; animation: division 300ms linear 1; width: 25px; top: 0px;
}
button.mob_open div:nth-child(2) { width: 0px;
}
button.mob_open div:nth-child(3) { transform: rotate(45deg);
}
button.mob_open div:nth-child(1) { transform: rotate(-45deg);
}
@keyframes atom { 0% { transform: rotate(180deg); }
}
@keyframes division { 0% { transform: rotate(180deg); }
}
@keyframes ball { 0% { left: -20%; top: 10%; } 10% { left: 10%; top: -35%; } 25% { left: 45%; top: -50%; } 40% { left: 80%; top: -20%; } 50% { left: 98%; top: 18%; } 60% { left: 80%; top: 50%; } 75% { left: 45%; top: 80%; } 90% { left: 0%; top: 60%; } 100% { left: -20%; top: 10%; }
}
@keyframes draw { to { stroke-dashoffset: 600; }
}
@keyframes undraw { from { stroke-dashoffset: 0; stroke-dasharray: 380; } to { stroke-dashoffset: 600; stroke-dasharray: 380; }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="navigation"> <ul> <li> <a href="#">home</a> </li> <li>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px" width="53.8px" height="50.8px" viewBox="0 0 53.8 50.8" enable-background="new 0 0 53.8 50.8" xml:space="preserve">
<defs>
</defs>
<path fill="none" stroke-miterlimit="10" d="M40.8,24.5 c3.2,0.8,5.4,5.3,3,9c-3,4.6,0.1,6.2,0.1,6.2s-3.5,0-5.3,0c-1.9,0-3.6-1.1-4.7-2.7"/>
<path fill="none" stroke-miterlimit="10" d="M8.8,7.7"/>
<path fill="none" stroke-miterlimit="10" d="M13.2,50.1c1.5-6,6.8-10.4,13.3-10.4h0.3 c6.6,0,12.1,4.4,13.4,10.6"/>
<path fill="none" stroke-miterlimit="10" d="M32.5,29.7c0,3.3-2.7,5.9-5.9,5.9 s-5.9-2.7-5.9-5.9"/>
<path fill="none" stroke-miterlimit="10" d="M26.9,0.5c2,0.3,4,0.6,6.1,0.8"/>
<path fill="none" stroke-miterlimit="10" d="M15.3,3.6C25.8,4.4,30.9,6,43,6.6"/>
<path fill="none" stroke-miterlimit="10" d="M32.2,10.1c4.2,0.5,8.7,1,15.4,1.1"/>
<path fill="none" stroke-miterlimit="10" d="M8.8,7.7C18.6,8,22.9,8.9,29.3,9.8"/>
<path fill="none" stroke-miterlimit="10" d="M39,15.2c3.3,0.2,7.1,0.4,11.9,0.4"/>
<path fill="none" stroke-miterlimit="10" d="M5.1,12c4.7,0.1,8.4,0.3,11.6,0.5"/>
<path fill="none" stroke-miterlimit="10" d="M40.4,19.8c3.4,0.2,7.4,0.3,12.2,0.3"/>
<path fill="none" stroke-miterlimit="10" d="M3,16.4c4.3,0,7.9,0.1,11,0.3"/>
<path fill="none" stroke-miterlimit="10" d="M40.4,24.2c3.6,0.2,7.7,0.4,12.9,0.3"/>
<path fill="none" stroke-miterlimit="10" d="M1.3,20.9c4.8,0,8.7,0.1,12,0.3"/>
<path fill="none" stroke-miterlimit="10" d="M44.7,28.8c2.6,0.1,5.3,0.1,8.6,0.1"/>
<path fill="none" stroke-miterlimit="10" d="M0.5,25.3c4.9,0,9,0.1,12.4,0.3"/>
<path fill="none" stroke-miterlimit="10" d="M44.1,33.2c2.7,0.1,5,0.2,8.4,0.1"/>
<path fill="none" stroke-miterlimit="10" d="M0.8,29.7c6.4,0,11.2,0.2,15.2,0.5"/>
<path fill="none" stroke-miterlimit="10" d="M42.6,37.6c2.6,0.1,5.5,0.2,8.8,0.2"/>
<path fill="none" stroke-miterlimit="10" d="M1.4,34.2c7.1,0,12.3,0.3,16.6,0.7"/>
<path fill="none" stroke-miterlimit="10" d="M33.3,41.3c4.1,0.5,8.8,0.8,15.3,0.9"/>
<path fill="none" stroke-miterlimit="10" d="M2.8,38.6c9.7,0,15.6,0.7,20.9,1.4"/>
<path fill="none" stroke-miterlimit="10" d="M38.5,46.2c2,0.2,4.2,0.3,6.7,0.3"/>
<path fill="none" stroke-miterlimit="10" d="M5.4,43c4.6,0.1,8.3,0.3,11.4,0.6"/>
<path fill="none" stroke-miterlimit="10" d="M9.7,47.6c1.5,0.1,2.9,0.1,4.3,0.2"/>
<path fill="none" stroke-miterlimit="10" d="M38,27.2c0,6.9-4.9,12.5-11.1,12.5s-11.2-5.6-11.2-12.5"/>
<path fill="none" stroke-miterlimit="10" d="M14.5,30.2 c-0.7,0-1.2-0.5-1.2-1.2l0-2.7v-5.9c0-5.9,4.7-10.6,10.6-10.6h5.9c5.9,0,10.6,4.7,10.6,10.6l0,8.4c0,0.6-0.5,1.2-1.1,1.2l0,0 c-0.6,0-1.2-0.5-1.2-1.2l0-3c0,0-6.4-3.2-8.4-7.7c-2.3,4.3-13.9,7.8-13.9,7.8l0,3.1C15.7,29.6,15.2,30.2,14.5,30.2L14.5,30.2z"/>
</svg> <a href="#">about</a> </li> <li> <a href="#">services</a> </li> <li>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px" viewBox="0 0 65 35" enable-background="new 0 0 65 35" xml:space="preserve">
<defs>
</defs>
<rect x="10.4" y="0.5" fill="none" stroke-miterlimit="10" width="44.9" height="29.3"/>
<polyline fill="none" stroke-miterlimit="10" points="10.4,0.5 32.9,17.2 55.3,0.5 "/>
<g> <g> <g> <path fill="none" d="M0,19.1C8.5,19,8.5,23,17,23"/> <path fill="none" stroke-linecap="round" stroke-miterlimit="10" d="M3.4,19.3c5,0.8,6.3,3.3,12.3,3.6"/> </g> <g> <path fill="none" d="M0,22.8c8.5-0.1,8.5,3.9,17,3.9"/> <path fill="none" stroke-linecap="round" stroke-miterlimit="10" d="M1.3,22.9c6.8,0.3,7.6,3.5,14.3,3.8"/> </g> <g> <path fill="none" d="M0.1,26.6c8.5-0.1,8.5,3.9,17,3.9"/> <path fill="none" stroke-linecap="round" stroke-miterlimit="10" d="M1.3,26.6c6.1,0.3,7.4,2.8,12.4,3.6"/> </g> <g> <path fill="none" stroke-linecap="round" stroke-miterlimit="10" d="M9.1,17.3c1.1,0.5,2.3,1,3.8,1.3"/> </g> <g> <path fill="none" stroke-linecap="round" stroke-miterlimit="10" d="M3.7,30.9c2,0.4,3.4,1,4.8,1.7"/> </g> </g>
</g>
</svg> <a href="#">contact</a> </li> </ul>
</div>
<div class="container"> <div class="mob_btn"> <button> <div></div> <div></div> <div></div> </button> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Atomic Menu - Script Codes CSS Codes
.navigation { background:#fff; width:100%; height:250px; display:none;
}
svg { margin:0 auto; position:relative; left:0px; stroke-linejoin:round; stroke-linecap:round; display:block; stroke:#fff; stroke-width: 1.5; stroke-dasharray: 300; stroke-dashoffset: 400; width:80px; height:80px; padding-top:50px; animation: undraw 0.75s forwards linear;
}
.navigation li:hover > svg { animation: draw 0.5s forwards linear;
}
.navigation ul li { display:inline-block; float:left; width:25%; margin:0; height:250px; transition: 0.5s all ease-in-out; box-shadow:0px 2px 10px rgba(0,0,0,0);
}
.navigation li a:after { content:''; border-bottom:1px solid #fff; width:0px; height:1px; display:block; margin:0 auto; transition: all 0.35s ease-in-out;
}
.navigation li a:hover:after { content:''; border-bottom:1px solid #fff; width:40px; height:1px; display:block; margin:0 auto;
}
.navigation ul { margin: 0px; padding: 0px;
}
.navigation ul li a { width:100%; text-align:center; display: block; text-decoration: none; text-transform:uppercase; letter-spacing:2px; color:#fff; font-family:helvetica; font-size:12px; height:250px; line-height: 55px; font-weight:lighter; transition: 0.5s all ease-in-out; margin-top: -12px;
}
/* .navigation ul li a:before {
content:''; background:url('http://clients.pivotdesign.com/dev/sterlingbay/4c/hospitality.png'); background-repeat:no-repeat; display:block; text-align:center; width: 65px; height: 59px; margin: 0 auto 0px auto; margin-top: 143px; transition:0.5s all ease-in-out;
} */
.navigation ul li a:hover:before { -webkit-filter: drop-shadow(0px 3px 3px rgba(0,0,0,0.3)); filter: drop-shadow(0px 3px 3px rgba(0,0,0,0.3)); -ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=3, Color='#444')";
}
.navigation ul li:nth-child(1) { background:#DB4D3B;
}
.navigation ul li:nth-child(2) { background:#B74132;
}
.navigation ul li:nth-child(3) { background:#772A20;
}
.navigation ul li:nth-child(4) { background:#38140F;
}
.navigation ul li:hover { background:#F26451; box-shadow:0px 2px 10px rgba(0,0,0,0.25); z-index:20;
}
.navigation ul li a:hover { text-shadow:0px 1px 3px regba(0,0,0,0.3); letter-spacing:4px;
}
html { padding:0; margin:0; -webkit-font-smoothing: subpixel-antialiased;
}
body { background: #F26451; padding:0; margin:0;
}
p { color: #fff; text-transform: uppercase; letter-spacing: 4px; font-size: 10px; font-family: "helvetica" sans; text-align: center;
}
.container { width:100%; padding:20px; box-sizing:border-box;
}
.mob_btn { width:100%; position:relative;
}
button { position: absolute; top: 20px; right: 20px; width: 30px; height: 30px; transition: all 300ms cubic-bezier(.61, .01, .42, 1); cursor: pointer; background: transparent; border: 0px;
}
button div { height: 0px; border: 1.5px solid #fff; width: 22px; display: block; position: absolute; transition: all 300ms cubic-bezier(.61, .01, .42, 1); background:#fff;
}
button:hover { transition-delay: 100ms; transform: scale(1.1);
}
button:hover div:nth-child(3):before { width: 2px; height: 2px; border-radius: 50%; background: #F26451;
}
button:hover div { border: 2px solid #fff; height: 9px; border-radius: 50%; margin-left: -1px; margin-top: 2px; animation: atom 300ms linear 1; width: 25px; top: 0px; background:transparent;
}
button:focus { outline: 0px;
}
div:nth-child(1) { top: 0px;
}
div:nth-child(2) { top: 8px;
}
div:nth-child(3) { top: 16px;
}
div:nth-child(3):before { opacity: 0; animation: ball 1.5s linear infinite; content: ''; border: 2px solid #fff; display: block; position: relative; top: 0.25px;
}
button:hover div:nth-child(1) { transform: rotate(-33deg);
}
button:hover div:nth-child(2) { transform: rotate(90deg);
}
button:hover div:nth-child(3) { transform: rotate(33deg);
}
button:hover div:nth-child(3):before { opacity: 1; transition: opacity 600ms cubic-bezier(.61, .01, .42, 1); ;
}
button.mob_open:hover div:nth-child(3):before,
button.mob_open div:nth-child(3):before,
button.mob_open div:nth-child(2) { opacity: 0; transition: all 200ms;
}
button.mob_open div{ border: 1.5px solid #fff; height: 0px; border-radius: 0%; margin-left: -1px; margin-top: 6px; animation: division 300ms linear 1; width: 25px; top: 0px;
}
button.mob_open div:nth-child(2) { width: 0px;
}
button.mob_open div:nth-child(3) { transform: rotate(45deg);
}
button.mob_open div:nth-child(1) { transform: rotate(-45deg);
}
@keyframes atom { 0% { transform: rotate(180deg); }
}
@keyframes division { 0% { transform: rotate(180deg); }
}
@keyframes ball { 0% { left: -20%; top: 10%; } 10% { left: 10%; top: -35%; } 25% { left: 45%; top: -50%; } 40% { left: 80%; top: -20%; } 50% { left: 98%; top: 18%; } 60% { left: 80%; top: 50%; } 75% { left: 45%; top: 80%; } 90% { left: 0%; top: 60%; } 100% { left: -20%; top: 10%; }
}
@keyframes draw { to { stroke-dashoffset: 600; }
}
@keyframes undraw { from { stroke-dashoffset: 0; stroke-dasharray: 380; } to { stroke-dashoffset: 600; stroke-dasharray: 380; }
}Atomic Menu - Script Codes JS Codes
function showMobileMenu(){ var mobileVis = jQuery('.navigation').css('display'); if(mobileVis == "none"){ jQuery('.navigation').slideDown('slow'); $('.mob_btn button').toggleClass("mob_open"); } else{ jQuery('.navigation').slideUp('slow'); $('.mob_btn button').toggleClass("mob_open"); }
};
jQuery('.mob_btn button').click(function(){ showMobileMenu(); return false; });
| Developer | Alex Coven |
| Username | alcoven |
| Uploaded | August 11, 2022 |
| Rating | 3 |
| Size | 6,193 Kb |
| Views | 56,672 |
Do you need developer help for Atomic 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!
Alex Coven (alcoven) Script Codes
| Name | Size |
| Squid Swimming Spinning SVG Animation | 4,005 Kb |
| Material Bounce Effect | 6,217 Kb |
| SVG Squid Swimming WIP Hover | 3,405 Kb |
| Lucro Assets | 7,909 Kb |
| Hamburger to atom menu CSS | 2,353 Kb |
| Atom Menu SVG Animation | 2,919 Kb |
| SVG Squid Swimming | 2,902 Kb |
| Word randomize and replace. | 2,221 Kb |
| Stackoverflow nth-child answer | 1,469 Kb |
| Hover triangle wipe css | 2,559 Kb |
Create amazing sales emails 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!
Similar Scripts & Codes
| Name | Username | Size |
| A Pen by Adrien Clerbois | AClerbois | 6,501 Kb |
| Personal Logo Animation | Lloydwheeler | 3,795 Kb |
| Nested flexbox layout for library catalog | Boycetrus | 3,271 Kb |
| CSS Patterns | Alyda | 3,953 Kb |
| Apex Calculator | Michaelwnelson | 2,370 Kb |
| Layout 11 | Altynai | 1,690 Kb |
| Web SQL | Hoehoe | 1,983 Kb |
| Scroll using CSS | Casperovic | 2,159 Kb |
| A Pen by Eka Risyana | Risyana | 3,705 Kb |
| How to add Css Fold Notes In Blogger By Askwithloud.com | Askwithloud | 2,280 Kb |
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. Hide Your IP Now!