Material Design Lite menu demo
How do I make an material design lite menu demo?
What is a material design lite menu demo? How do you make a material design lite menu demo? This script and codes were developed by Zenvercoder on 15 January 2023, Sunday.
Material Design Lite menu demo - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Material Design Lite menu demo</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <html> <head> <!-- Material Design Lite --> <script src="https://code.getmdl.io/1.1.3/material.min.js"></script> <link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.indigo-pink.min.css"> <!-- Material Design icon font --> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> </head> <body> <!-- Uses a header that contracts as the page scrolls down. --> <div class="demo-layout-waterfall mdl-layout mdl-js-layout"> <header class="mdl-layout__header mdl-layout__header--waterfall"> <!-- Top row, always visible --> <div class="mdl-layout__header-row"> <!-- Title --> <span class="mdl-layout-title">Title</span> <div class="mdl-layout-spacer"></div> <div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable mdl-textfield--floating-label mdl-textfield--align-right"> <label class="mdl-button mdl-js-button mdl-button--icon" for="waterfall-exp"> <i class="material-icons">search</i> </label> <div class="mdl-textfield__expandable-holder"> <input class="mdl-textfield__input" type="text" name="sample" id="waterfall-exp"> </div> </div> </div> <!-- Bottom row, not visible on scroll --> <div class="mdl-layout__header-row"> <div class="mdl-layout-spacer"></div> <!-- Navigation --> <nav class="mdl-navigation"> <a class="mdl-navigation__link" href="">Link</a> <a class="mdl-navigation__link" href="">Link</a> <a class="mdl-navigation__link" href="">Link</a> <a class="mdl-navigation__link" href="">Link</a> <a class="mdl-navigation__link" href="">Link</a> <a class="mdl-navigation__link" href="">Link</a> <a class="mdl-navigation__link" href="">Link</a> <a class="mdl-navigation__link" href="">Link</a> <a class="mdl-navigation__link" href="">Link</a> <a class="mdl-navigation__link" href="">Link</a> <a class="mdl-navigation__link" href="">Link</a> <a class="mdl-navigation__link" href="">Link</a> <a class="mdl-navigation__link" href="">Link</a> <a class="mdl-navigation__link" href="">Link</a> <a class="mdl-navigation__link" href="">Link</a> <a class="mdl-navigation__link" href="">Link</a> <a class="mdl-navigation__link" href="">Link</a> <a class="mdl-navigation__link" href="">Link</a> <a class="mdl-navigation__link" href="">Link</a> <a class="mdl-navigation__link" href="">Link</a> <a class="mdl-navigation__link" href="">Link</a> <a class="mdl-navigation__link" href="">Link</a> <a class="mdl-navigation__link" href="">Link</a> <a class="mdl-navigation__link" href="">Link</a> <a class="mdl-navigation__link" href="">Link</a> <a class="mdl-navigation__link" href="">Link</a> <a class="mdl-navigation__link" href="">Link</a> <a class="mdl-navigation__link" href="">Link</a> <a class="mdl-navigation__link" href="">Link</a> <a class="mdl-navigation__link" href="">Link</a> <a class="mdl-navigation__link" href="">Link</a> <a class="mdl-navigation__link" href="">Link</a> <a class="mdl-navigation__link" href="">Link</a> <a class="mdl-navigation__link" href="">Link</a> <a class="mdl-navigation__link" href="">Link</a> <a class="mdl-navigation__link" href="">Link</a> <a class="mdl-navigation__link" href="">Link</a> <a class="mdl-navigation__link" href="">Link</a> <a class="mdl-navigation__link" href="">Link</a> <a class="mdl-navigation__link" href="">Link</a> </nav> </div> </header> <div class="mdl-layout__drawer"> <span class="mdl-layout-title">Title</span> <nav class="mdl-navigation"> <a class="mdl-navigation__link" href="">Link</a> <a class="mdl-navigation__link" href="">Link</a> <a class="mdl-navigation__link" href="">Link</a> <a class="mdl-navigation__link" href="">Link</a> </nav> </div> <main class="mdl-layout__content"> <div class="page-content"><!-- Your content goes here --></div> </main> </div> </body>
</html>
</body>
</html>
Material Design Lite menu demo - Script Codes CSS Codes
.demo-layout-waterfall .mdl-layout__header-row .mdl-navigation__link:last-of-type { padding-right: 0;
}
Developer | Zenvercoder |
Username | zenvercoder |
Uploaded | January 15, 2023 |
Rating | 3 |
Size | 2,007 Kb |
Views | 4,048 |
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 |
My first CSS shape | 2,311 Kb |
Practice | 1,943 Kb |
Bootstrap Mockup | 5,240 Kb |
Animal Trading Card | 3,026 Kb |
A Pen by zenvercoder | 1,855 Kb |
Mobile email example page | 2,044 Kb |
CSS layout practice - card making | 2,285 Kb |
Focotrain.ninja | 2,012 Kb |
Chips | 1,840 Kb |
Ommm visualizer | 4,487 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 Vote Component | Souporserious | 5,465 Kb |
Header Line Issue | Charlie-volpe | 1,768 Kb |
React JS Movie Info App | MTushar | 4,870 Kb |
Project MMetro beta | Atomicsong | 5,157 Kb |
Jquery 2d character movement | Drewtadams | 4,291 Kb |
Elephants Full screen site | Orrinward | 3,981 Kb |
Flex Table | Simeonoff | 4,059 Kb |
Elon Musk - Tribute Page - FreeCodeCamp | Yunnimun | 8,615 Kb |
Bootstrap 3 Price Table | Honglio | 2,655 Kb |
Tester1 | Sasquatchbrawley | 2,001 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!