Material Inspired Menu

Developer
Keith Pickering
Size
4,237 Kb
Views
34,408
  1. Material Inspired Menu Previews
  2. Material Inspired Menu HTML Codes
  3. Material Inspired Menu CSS Codes
  4. Material Inspired Menu JS Codes

How do I make an material inspired menu?

What is a material inspired menu? How do you make a material inspired menu? This script and codes were developed by Keith Pickering on 10 August 2022, Wednesday.

Material Inspired Menu Previews
IQ Test

Material Inspired Menu - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Material Inspired Menu</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.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! */ body { padding: 24px; font-family: "Open Sans", sans-serif;
}
.site-nav { position: relative; overflow: hidden; width: 48px; max-height: 48px; border-radius: 2px; background-color: #3498db; color: white; transition: all 250ms ease-in-out;
}
.site-nav > ul { list-style: none; margin: 0; padding-left: 0; padding-bottom: 48px; background: #2980b9;
}
.site-nav > ul > li { transition: all 0.15s ease-in-out; transform: scale(0.5); transform-origin: top left;
}
.site-nav > ul > li > a { display: block; padding: 0 48px 0 64px; padding-left: 54px; line-height: 48px; white-space: nowrap; text-decoration: none; font-size: 20px; font-weight: 200; transition: all 0.25s;
}
.site-nav > ul > li > a:hover, .site-nav > ul > li > a:focus { background-color: #2c89c9;
}
.site-nav > ul a { color: transparent;
}
.site-nav .site-nav-toggle { position: absolute; top: 0; left: 0; width: 48px; height: 48px; transition: all 100ms;
}
.site-nav .site-nav-toggle:hover > span, .site-nav .site-nav-toggle:hover > span:before, .site-nav .site-nav-toggle:hover > span:after { box-shadow: 0 0 2px rgba(255, 255, 255, 0.5);
}
.site-nav .site-nav-toggle > span { top: 50%; left: 10px; margin-top: -2px;
}
.site-nav .site-nav-toggle > span, .site-nav .site-nav-toggle > span:before, .site-nav .site-nav-toggle > span:after { display: block; position: absolute; height: 4px; width: 28px; border-radius: 1px; background-color: white; transition: all 300ms ease-in-out;
}
.site-nav .site-nav-toggle > span:before, .site-nav .site-nav-toggle > span:after { content: "";
}
.site-nav .site-nav-toggle > span:before { top: -10px;
}
.site-nav .site-nav-toggle > span:after { top: 10px;
}
.site-nav .site-nav__title { margin: 0; padding-left: 64px; font-size: 18px; line-height: 48px; text-transform: uppercase;
}
.site-nav.site-nav--open { width: 300px; max-height: 600px; color: white; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25); transition: all 350ms ease-out;
}
.site-nav.site-nav--open .site-nav-toggle > span { transform: translate(6px, 0);
}
.site-nav.site-nav--open .site-nav-toggle > span:before { transform: translate(-10px, 5px) rotate(-45deg) scale(0.65, 1);
}
.site-nav.site-nav--open .site-nav-toggle > span:after { transform: translate(-10px, -5px) rotate(45deg) scale(0.65, 1);
}
.site-nav.site-nav--open > ul > li { transform: scale(1);
}
.site-nav.site-nav--open > ul > li > a { padding-left: 64px;
}
.site-nav.site-nav--open a { color: white;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'>
<nav id="site-nav" class="site-nav"> <a href="#" id="site-nav-toggle" class="site-nav-toggle"><span></span></a> <h2 class="site-nav__title">Menu</h2> <ul> <li> <a href="#">Home</a> </li> <li> <a href="#">Blog</a> </li> <li> <a href="#">Portfolio</a> </li> <li> <a href="#">Nav item</a> </li> <li> <a href="#">Nav item</a> </li> </ul>
</nav> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Material Inspired Menu - Script Codes CSS Codes

body { padding: 24px; font-family: "Open Sans", sans-serif;
}
.site-nav { position: relative; overflow: hidden; width: 48px; max-height: 48px; border-radius: 2px; background-color: #3498db; color: white; transition: all 250ms ease-in-out;
}
.site-nav > ul { list-style: none; margin: 0; padding-left: 0; padding-bottom: 48px; background: #2980b9;
}
.site-nav > ul > li { transition: all 0.15s ease-in-out; transform: scale(0.5); transform-origin: top left;
}
.site-nav > ul > li > a { display: block; padding: 0 48px 0 64px; padding-left: 54px; line-height: 48px; white-space: nowrap; text-decoration: none; font-size: 20px; font-weight: 200; transition: all 0.25s;
}
.site-nav > ul > li > a:hover, .site-nav > ul > li > a:focus { background-color: #2c89c9;
}
.site-nav > ul a { color: transparent;
}
.site-nav .site-nav-toggle { position: absolute; top: 0; left: 0; width: 48px; height: 48px; transition: all 100ms;
}
.site-nav .site-nav-toggle:hover > span, .site-nav .site-nav-toggle:hover > span:before, .site-nav .site-nav-toggle:hover > span:after { box-shadow: 0 0 2px rgba(255, 255, 255, 0.5);
}
.site-nav .site-nav-toggle > span { top: 50%; left: 10px; margin-top: -2px;
}
.site-nav .site-nav-toggle > span, .site-nav .site-nav-toggle > span:before, .site-nav .site-nav-toggle > span:after { display: block; position: absolute; height: 4px; width: 28px; border-radius: 1px; background-color: white; transition: all 300ms ease-in-out;
}
.site-nav .site-nav-toggle > span:before, .site-nav .site-nav-toggle > span:after { content: "";
}
.site-nav .site-nav-toggle > span:before { top: -10px;
}
.site-nav .site-nav-toggle > span:after { top: 10px;
}
.site-nav .site-nav__title { margin: 0; padding-left: 64px; font-size: 18px; line-height: 48px; text-transform: uppercase;
}
.site-nav.site-nav--open { width: 300px; max-height: 600px; color: white; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25); transition: all 350ms ease-out;
}
.site-nav.site-nav--open .site-nav-toggle > span { transform: translate(6px, 0);
}
.site-nav.site-nav--open .site-nav-toggle > span:before { transform: translate(-10px, 5px) rotate(-45deg) scale(0.65, 1);
}
.site-nav.site-nav--open .site-nav-toggle > span:after { transform: translate(-10px, -5px) rotate(45deg) scale(0.65, 1);
}
.site-nav.site-nav--open > ul > li { transform: scale(1);
}
.site-nav.site-nav--open > ul > li > a { padding-left: 64px;
}
.site-nav.site-nav--open a { color: white;
}

Material Inspired Menu - Script Codes JS Codes

$("#site-nav-toggle").click(function(e) { e.preventDefault(); $("#site-nav").toggleClass("site-nav--open");
});
Material Inspired Menu - Script Codes
Material Inspired Menu - Script Codes
Home Page Home
Developer Keith Pickering
Username keithpickering
Uploaded August 10, 2022
Rating 3
Size 4,237 Kb
Views 34,408
Do you need developer help for Material Inspired 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!

Keith Pickering (keithpickering) Script Codes
Name
Delicious SASS Buttons
Reusable Styles
Sliding Navigation Menu
Single-element Toggle Switch
CSS Business Card
A Pen by Keith Pickering
Smooth, Semantic Tab Box
Text Inputs with Sliding Labels
Windows 8 Start Screen
Notifications
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!