|
|
| (One intermediate revision by the same user not shown) |
| Line 22: |
Line 22: |
| | <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script> | | <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script> |
| | | | |
| − | <style>
| |
| − | .demo-layout-transparent {
| |
| − | background: url('../assets/demos/transparent.jpg') center / cover;
| |
| − | }
| |
| − | .demo-layout-transparent .mdl-layout__header,
| |
| − | .demo-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;
| |
| − | }
| |
| − | </style>
| |
| − |
| |
| − | <div class="demo-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">
| |
| − | <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">
| |
| − | </main>
| |
| − | </div>
| |
| | | | |
| | </html> | | </html> |
