Google Material Design Nav Submenu Animation

Developer
EY-Intuitive
Size
3,009 Kb
Views
14,168
  1. Google Material Design Nav Submenu Animation Previews
  2. Google Material Design Nav Submenu Animation HTML Codes
  3. Google Material Design Nav Submenu Animation CSS Codes
  4. Google Material Design Nav Submenu Animation JS Codes

How do I make an google material design nav submenu animation?

What is a google material design nav submenu animation? How do you make a google material design nav submenu animation? This script and codes were developed by EY-Intuitive on 17 January 2023, Tuesday.

Google Material Design Nav Submenu Animation Previews
IQ Test

Google Material Design Nav Submenu Animation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Google Material Design Nav Submenu Animation</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <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! */ * { box-sizing: border-box;
}
html,
body { height: 100%;
}
body { font-size: 18px; line-height: 22px; font-family: Helvetica;
}
.menu { background: #16a085; width: 300px; height: 100%;
}
.item { display: block; width: 100%; padding: 15px; background: transparent; outline: none; border: none; text-align: left; font-size: 18px; line-height: 22px; font-family: Helvetica; cursor: pointer;
}
.submenu-container { overflow: hidden;
}
.submenu { transition: all 0.5s ease; background: #bdc3c7; margin-top: -5000px;
}
.submenu li { padding: 15px;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="menu">	<button class="item">Components</button>	<div class="submenu-container">	<ul class="submenu" data-ic-class="submenu">	<li>Header</li>	<li>Footer</li>	<li>Notification</li>	<li>Button</li>	<li>Input</li>	<li>Checkbox</li>	<li>Radio</li>	</ul>	</div>	<button class="item">Demos</button>	<div class="submenu-container">	<ul class="submenu" data-ic-class="submenu">	<li>Documentation</li>	<li>Usage</li>	<li>Layout</li>	</ul>	</div>
</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>

Google Material Design Nav Submenu Animation - Script Codes CSS Codes

* { box-sizing: border-box;
}
html,
body { height: 100%;
}
body { font-size: 18px; line-height: 22px; font-family: Helvetica;
}
.menu { background: #16a085; width: 300px; height: 100%;
}
.item { display: block; width: 100%; padding: 15px; background: transparent; outline: none; border: none; text-align: left; font-size: 18px; line-height: 22px; font-family: Helvetica; cursor: pointer;
}
.submenu-container { overflow: hidden;
}
.submenu { transition: all 0.5s ease; background: #bdc3c7; margin-top: -5000px;
}
.submenu li { padding: 15px;
}

Google Material Design Nav Submenu Animation - Script Codes JS Codes

var submenuHeight = $('.submenu').outerHeight();
console.log(submenuHeight);
$('.submenu').css('margin-top', '-' + submenuHeight + 'px');
$('.item').each(function() {	var clicker = true;	$(this).click(function() {	if(clicker) {	$(this).next('.submenu-container').find('.submenu').css('margin-top', '0');	clicker = false;	} else if (!clicker) {	$(this).next('.submenu-container').find('.submenu').css('margin-top', '-' + submenuHeight + 'px');	clicker = true;	}	})
});
Google Material Design Nav Submenu Animation - Script Codes
Google Material Design Nav Submenu Animation - Script Codes
Home Page Home
Developer EY-Intuitive
Username ey_intuitive
Uploaded January 17, 2023
Rating 3
Size 3,009 Kb
Views 14,168
Do you need developer help for Google Material Design Nav Submenu Animation?

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
Jquery Flyout Navigation
Hidden Push Nav with Flyouts
Reading Interaction
Xbox One Achievement Unlocked Alert
Gradient Hover Transition on Buttons
UI Color Shade Previewer
Draggable Timeline Demo
Awesome Search Button with Input Animation
Button Text Color Accessibility Mixin Test
Progress Button Animation
Create amazing video scripts 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!