Skip to content

Instantly share code, notes, and snippets.

@thomxc

thomxc/index.html

Created July 21, 2015 13:51
Show Gist options
  • Save thomxc/6a755729ada4d02ef31d to your computer and use it in GitHub Desktop.
Save thomxc/6a755729ada4d02ef31d to your computer and use it in GitHub Desktop.
Download ZIP
Google's Material Design Drawer
Raw
index.html
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Material Design Lite components demo</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<html>
<head>
<!-- Material Design Lite -->
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.min.js"></script>
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.0/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 transparent header that draws on top of the layout's background -->
<div class="layout-transparent mdl-layout mdl-js-layout">
<header class="mdl-layout__header mdl-layout__header--transparent">
<div class="mdl-layout__header-row">
<!-- Title -->
<span class="mdl-layout-title">Title</span>
<!-- Add spacer, to align navigation to the right -->
<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>
</nav>
</div>
</header>
<div class="mdl-layout__drawer" id="drawer">
<span class="mdl-layout-title">Title</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="#" id="clickme">Click me</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">
</main>
</div>
</body>
</html>
<script src="js/index.js"></script>
</body>
</html>
Raw
index.js
var clicker = document.getElementById("clickme");
clicker.onclick = function() {
document.getElementById("drawer").className = "mdl-layout__drawer"; // only keep mdl-layout__drawer, is-visible should be removed
}
Raw
style.css
.layout-transparent {
background: url('http://www.getmdl.io/assets/demos/transparent.jpg') center / cover;
}
.layout-transparent .mdl-layout__header,
.layout-transparent .mdl-layout__drawer-button {
/* This background is dark, so we set text to white. Use 87% black instead if
your background is light. */
color: white;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment