Animated Menu with Submenus

Developer
EY-Intuitive
Size
5,647 Kb
Views
18,216
  1. Animated Menu with Submenus Previews
  2. Animated Menu with Submenus HTML Codes
  3. Animated Menu with Submenus CSS Codes
  4. Animated Menu with Submenus JS Codes

How do I make an animated menu with submenus?

Smooth animations for main nav and submenu items. What is a animated menu with submenus? How do you make a animated menu with submenus? This script and codes were developed by EY-Intuitive on 17 January 2023, Tuesday.

Animated Menu with Submenus Previews
IQ Test

Animated Menu with Submenus - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Animated Menu with Submenus</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="theme-color" content="#CDDC39"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <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! */ * { -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body { font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: 300; font-size: 16px; line-height: 20px; background: #f2f2f2; color: #303030;
}
.ic-header { position: fixed; top: 0; left: 0; right: 0; z-index: 10; width: 100%; background: #7190d6; padding: 15px 0; text-align: center;
}
.ic-header-title { font-size: 18px; line-height: 20px; color: white;
}
.ic-main { padding-top: 60px;
}
.ic-article { width: 80%; padding: 15px; margin: 0 auto 20px; background: white;
}
.ic-heading-default { font-size: 22px; line-height: 24px; margin-bottom: 10px;
}
.ic-nav { transition: all 0.3s cubic-bezier(0.86, 0, 0.07, 1); width: 200px; height: 100%; position: fixed; top: 0; transform: translateX(-200px) translateZ(0); background: #3d3d3d;
}
.active .ic-nav { transform: translateX(0) translateZ(0);
}
.ic-nav-list { margin-top: 60px; text-align: left;
}
.ic-nav-list .ic-nav-list-item { transition: all 0.2s cubic-bezier(0.86, 0, 0.07, 1); border-bottom: 2px solid rgba(0, 0, 0, 0.2); max-height: 50px; overflow: hidden;
}
.ic-nav-list .ic-nav-list-item.ic-active { max-height: 500px;
}
.ic-nav-list .ic-nav-list-item.ic-active .ic-nav-list-item-link.ic-parent-item:after { content: "-";
}
.ic-nav-list .ic-nav-list-item .ic-nav-list-item-link { display: block; padding: 15px; color: white; text-decoration: none;
}
.ic-nav-list .ic-nav-list-item .ic-nav-list-item-link.ic-parent-item { position: relative;
}
.ic-nav-list .ic-nav-list-item .ic-nav-list-item-link.ic-parent-item:after { position: absolute; content: "+"; right: 15px; width: 20px; text-align: center;
}
.ic-nav-list .ic-nav-list-item .ic-nav-list-item-link:visited { color: white;
}
.ic-nav-sublist { padding-left: 15px; background: #333333;
}
.ic-nav-sublist .ic-nav-sublist-item { border-bottom: 2px solid rgba(0, 0, 0, 0.2);
}
.ic-nav-sublist .ic-nav-sublist-item:last-child { border-bottom: none;
}
.ic-nav-sublist .ic-nav-sublist-item .ic-nav-sublist-item-link { display: block; padding: 15px; color: white; text-decoration: none;
}
.ic-nav-sublist .ic-nav-sublist-item .ic-nav-sublist-item-link:visited { color: white;
}
.menu-button-target { background: transparent; border: none; outline: none; cursor: pointer; position: absolute; z-index: 30; left: 10px; height: 30px; top: 50%; margin-top: -15px; webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.menu-button-target.active .menu-button { transition: background .1s ease; background-color: transparent;
}
.menu-button-target.active .menu-button:before,
.menu-button-target.active .menu-button:after { transition: top .2s ease, transform .2s .1s ease;
}
.menu-button-target.active .menu-button:before { top: 0; transform: rotate(45deg);
}
.menu-button-target.active .menu-button:after { top: 0; transform: rotate(-45deg);
}
.menu-button { position: relative; top: 50%; left: 0; display: block; width: 30px; height: 3px; margin-top: 0; background-color: white; border-radius: 10px; transition: background .2s .1s;
}
.menu-button:before,
.menu-button:after { content: ""; display: block; position: absolute; width: 100%; height: 100%; left: 0; background-color: white; transition: top .2s .1s ease, transform .2s ease; border-radius: 10px; transform-origin: 50% 50%;
}
.menu-button:before { top: -7px; transform: rotate(0deg);
}
.menu-button:after { top: 7px; transform: rotate(0deg);
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <header class="ic-header"> <button class="menu-button-target" data-ic-class="button-trigger"> <span class="menu-button"></span> </button> <nav class="ic-nav"> <ul class="ic-nav-list"> <li class="ic-nav-list-item"> <a href="" class="ic-nav-list-item-link ic-parent-item">List Item One</a> <ul class="ic-nav-sublist"> <li class="ic-nav-sublist-item"> <a href="" class="ic-nav-sublist-item-link">Sublist Item One</a> </li> <li class="ic-nav-sublist-item"> <a href="" class="ic-nav-sublist-item-link">Sublist Item One</a> </li> </ul> </li> <li class="ic-nav-list-item"> <a href="" class="ic-nav-list-item-link">List Item Two</a> </li> <li class="ic-nav-list-item"> <a href="" class="ic-nav-list-item-link ic-parent-item">List Item Three</a> <ul class="ic-nav-sublist"> <li class="ic-nav-sublist-item"> <a href="" class="ic-nav-sublist-item-link">Sublist Item One</a> </li> <li class="ic-nav-sublist-item"> <a href="" class="ic-nav-sublist-item-link">Sublist Item One</a> </li> </ul> </li> <li class="ic-nav-list-item"> <a href="" class="ic-nav-list-item-link">List Item Four</a> </li> </ul> </nav> <h1 class="ic-header-title">Intuitive Company</h1>
</header>
<div class="ic-main"> <article class="ic-article"> <h2 class="ic-heading-default">Article Title</h2> <p class="ic-body-copy">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed omnis deleniti aperiam saepe error laborum quasi ipsa voluptatibus sunt recusandae illum libero placeat cum, sit debitis veritatis! Aliquid, cumque, eveniet.</p> </article> <article class="ic-article"> <h1 class="ic-heading-default">Article Title</h1> <p class="ic-body-copy">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed omnis deleniti aperiam saepe error laborum quasi ipsa voluptatibus sunt recusandae illum libero placeat cum, sit debitis veritatis! Aliquid, cumque, eveniet.</p> </article> <article class="ic-article"> <h1 class="ic-heading-default">Article Title</h1> <p class="ic-body-copy">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed omnis deleniti aperiam saepe error laborum quasi ipsa voluptatibus sunt recusandae illum libero placeat cum, sit debitis veritatis! Aliquid, cumque, eveniet.</p> </article> <article class="ic-article"> <h1 class="ic-heading-default">Article Title</h1> <p class="ic-body-copy">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed omnis deleniti aperiam saepe error laborum quasi ipsa voluptatibus sunt recusandae illum libero placeat cum, sit debitis veritatis! Aliquid, cumque, eveniet.</p> </article>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Animated Menu with Submenus - Script Codes CSS Codes

* { -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body { font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: 300; font-size: 16px; line-height: 20px; background: #f2f2f2; color: #303030;
}
.ic-header { position: fixed; top: 0; left: 0; right: 0; z-index: 10; width: 100%; background: #7190d6; padding: 15px 0; text-align: center;
}
.ic-header-title { font-size: 18px; line-height: 20px; color: white;
}
.ic-main { padding-top: 60px;
}
.ic-article { width: 80%; padding: 15px; margin: 0 auto 20px; background: white;
}
.ic-heading-default { font-size: 22px; line-height: 24px; margin-bottom: 10px;
}
.ic-nav { transition: all 0.3s cubic-bezier(0.86, 0, 0.07, 1); width: 200px; height: 100%; position: fixed; top: 0; transform: translateX(-200px) translateZ(0); background: #3d3d3d;
}
.active .ic-nav { transform: translateX(0) translateZ(0);
}
.ic-nav-list { margin-top: 60px; text-align: left;
}
.ic-nav-list .ic-nav-list-item { transition: all 0.2s cubic-bezier(0.86, 0, 0.07, 1); border-bottom: 2px solid rgba(0, 0, 0, 0.2); max-height: 50px; overflow: hidden;
}
.ic-nav-list .ic-nav-list-item.ic-active { max-height: 500px;
}
.ic-nav-list .ic-nav-list-item.ic-active .ic-nav-list-item-link.ic-parent-item:after { content: "-";
}
.ic-nav-list .ic-nav-list-item .ic-nav-list-item-link { display: block; padding: 15px; color: white; text-decoration: none;
}
.ic-nav-list .ic-nav-list-item .ic-nav-list-item-link.ic-parent-item { position: relative;
}
.ic-nav-list .ic-nav-list-item .ic-nav-list-item-link.ic-parent-item:after { position: absolute; content: "+"; right: 15px; width: 20px; text-align: center;
}
.ic-nav-list .ic-nav-list-item .ic-nav-list-item-link:visited { color: white;
}
.ic-nav-sublist { padding-left: 15px; background: #333333;
}
.ic-nav-sublist .ic-nav-sublist-item { border-bottom: 2px solid rgba(0, 0, 0, 0.2);
}
.ic-nav-sublist .ic-nav-sublist-item:last-child { border-bottom: none;
}
.ic-nav-sublist .ic-nav-sublist-item .ic-nav-sublist-item-link { display: block; padding: 15px; color: white; text-decoration: none;
}
.ic-nav-sublist .ic-nav-sublist-item .ic-nav-sublist-item-link:visited { color: white;
}
.menu-button-target { background: transparent; border: none; outline: none; cursor: pointer; position: absolute; z-index: 30; left: 10px; height: 30px; top: 50%; margin-top: -15px; webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.menu-button-target.active .menu-button { transition: background .1s ease; background-color: transparent;
}
.menu-button-target.active .menu-button:before,
.menu-button-target.active .menu-button:after { transition: top .2s ease, transform .2s .1s ease;
}
.menu-button-target.active .menu-button:before { top: 0; transform: rotate(45deg);
}
.menu-button-target.active .menu-button:after { top: 0; transform: rotate(-45deg);
}
.menu-button { position: relative; top: 50%; left: 0; display: block; width: 30px; height: 3px; margin-top: 0; background-color: white; border-radius: 10px; transition: background .2s .1s;
}
.menu-button:before,
.menu-button:after { content: ""; display: block; position: absolute; width: 100%; height: 100%; left: 0; background-color: white; transition: top .2s .1s ease, transform .2s ease; border-radius: 10px; transform-origin: 50% 50%;
}
.menu-button:before { top: -7px; transform: rotate(0deg);
}
.menu-button:after { top: 7px; transform: rotate(0deg);
}

Animated Menu with Submenus - Script Codes JS Codes

var $menuTrigger = $('[data-ic-class="button-trigger"]'), $menuOverlay = $('[data-ic-class="overlay"]'), $menuItem = $('.menu-item'), activeClass = 'active', $nav = $('.ic-nav'), navOpen = false, $parentItem = $('.ic-parent-item');
var isTouch = false;
if($('html').hasClass('touch')){ isTouch = true;
}
function menuFunction(){ $menuTrigger.toggleClass(activeClass); if(!navOpen){ navOpen = true; $('body').addClass('active'); } else { navOpen = false; $('body').removeClass('active'); }
}
function toggleSubmenu(){ $(this).closest('.ic-nav-list-item').toggleClass('ic-active');
}
if(isTouch) { $menuTrigger.on('touchstart', function(){ menuFunction(); }); $parentItem.on('touchstart', function(){ $(this).closest('.ic-nav-list-item').toggleClass('ic-active'); });
}
if(!isTouch) { $menuTrigger.on('click', function(){ menuFunction(); }); $parentItem.on('click', function(){ $(this).closest('.ic-nav-list-item').toggleClass('ic-active'); });
}
$('a').click(function(e){ e.preventDefault();
});
Animated Menu with Submenus - Script Codes
Animated Menu with Submenus - Script Codes
Home Page Home
Developer EY-Intuitive
Username ey_intuitive
Uploaded January 17, 2023
Rating 3
Size 5,647 Kb
Views 18,216
Do you need developer help for Animated Menu with Submenus?

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!

EY-Intuitive (ey_intuitive) Script Codes
Name
Pure CSS3 Flyout Navigation
Hidden Push Nav with Flyouts
Awesome Search Button with Input Animation
Xbox One Achievement Unlocked Alert
Reading Interaction
Button Text Color Accessibility Mixin Test
Awesome Full Page Menu Nav
Handlebars Templates - Example 2
Step Indicator
Draggable Timeline Demo
Create amazing marketing copy 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!