MDL-Navigation

Transparent Navigation

.demo-layout-transparent{
        background: url('https://getmdl.io/assets/demos/transparent.jpg') center/cover;
    }
</style>
</head>
</body>
    <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 href="#" class="mdl-navigation__link">Link</a>
                    <a href="#" class="mdl-navigation__link">Link</a>
                    <a href="#" class="mdl-navigation__link">Link</a>
                    <a href="#" class="mdl-navigation__link">Link</a>
                </nav>
            </div>
        </header>
        <div class="mdl-layout__drawer">
            <span class="mdl-layout-title">Title</span>
            <nav class="mdl-navigation">
                <nav class="mdl-navigation__link" href="#">Link</nav>
            <nav class="mdl-navigation__link" href="#">Link</nav>
            <nav class="mdl-navigation__link" href="#">Link</nav>
            <nav class="mdl-navigation__link" href="#">Link</nav>
            </nav>
        </div>
    </div>
`</pre>

### Fixed Drawer without Header(The drawer will open automatically in large screen)

![Fixed Drawer](http://7xu8mu.com1.z0.glb.clouddn.com/wp-content/uploads/FixedDrawer1.png)

<pre>`    &lt;div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer"&gt;
        &lt;div class="mdl-layout__drawer"&gt;
            &lt;span class="mdl-layout-title"&gt;Title&lt;/span&gt;
            &lt;nav class="mdl-navigation"&gt;
                &lt;a href="#" class="mdl-navigation__link"&gt;Link&lt;/a&gt;
                &lt;a href="#" class="mdl-navigation__link"&gt;Link&lt;/a&gt;
                &lt;a href="#" class="mdl-navigation__link"&gt;Link&lt;/a&gt;
                &lt;a href="#" class="mdl-navigation__link"&gt;Link&lt;/a&gt;
            &lt;/nav&gt;
        &lt;/div&gt;
    &lt;/div&gt;
`</pre>

### Fixed Header(The Header shows always, even in small screen)

![Fixed Header](http://7xu8mu.com1.z0.glb.clouddn.com/wp-content/uploads/FixedHeader.png)

<pre>`    &lt;div class="mdl-layout mdl-js-layout mdl-layout--fixed-header"&gt;
        &lt;header class="mdl-layout__header"&gt;
            &lt;div class="mdl-layout__header-row"&gt;
                &lt;span class="mdl-layout-title"&gt;Title&lt;/span&gt;
                &lt;div class="mdl-layout-spacer"&gt;&lt;/div&gt;
                &lt;nav class="mdl-navigation mdl-navigation--large-screen-only"&gt;
                    &lt;a href="#" class="mdl-navigation__link"&gt;Link&lt;/a&gt;
                    &lt;a href="#" class="mdl-navigation__link"&gt;Link&lt;/a&gt;
                    &lt;a href="#" class="mdl-navigation__link"&gt;Link&lt;/a&gt;
                &lt;/nav&gt;
            &lt;/div&gt;
        &lt;/header&gt;
        &lt;div class="mdl-layout__drawer"&gt;
            &lt;span class="mdl-layout-title"&gt;
                Title
            &lt;/span&gt;
            &lt;nav class="mdl-navigation"&gt;
                &lt;a href="#" class="mdl-navigation__link"&gt;Link&lt;/a&gt;
                &lt;a href="#" class="mdl-navigation__link"&gt;Link&lt;/a&gt;
                &lt;a href="#" class="mdl-navigation__link"&gt;Link&lt;/a&gt;
            &lt;/nav&gt;
        &lt;/div&gt;
    &lt;/div&gt;
`</pre>

### Fixed Header and Drawer

![Fixed Header and Drawer](http://7xu8mu.com1.z0.glb.clouddn.com/wp-content/uploads/FixedHeader&Drawer.png)

<pre>`&lt;div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header"&gt;
        &lt;header class="mdl-layout__header"&gt;
            &lt;div class="mdl-layout__header-row"&gt;
                &lt;div class="mdl-layout-spacer"&gt;&lt;/div&gt;
                &lt;div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable mdl-textfield--floating-label mdl-text--align-right"&gt;
                    &lt;label for="fixed-header-drawer-exp" class="mdl-button mdl-js-button mdl-button--icon"&gt;S&lt;/label&gt;
                    &lt;div class="mdl-textfield__expandable-holder"&gt;
                        &lt;input type="text" class="mdl-textfield__input" name="sample" id="fixed-header-drawer-exp"&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/header&gt;
        &lt;div class="mdl-layout__drawer"&gt;
            &lt;span class="mdl-layout-title"&gt;Title&lt;/span&gt;
            &lt;nav class="mdl-navigation"&gt;
                &lt;a href="#" class="mdl-navigation__link"&gt;Link&lt;/a&gt;
                &lt;a href="#" class="mdl-navigation__link"&gt;Link&lt;/a&gt;
                &lt;a href="#" class="mdl-navigation__link"&gt;Link&lt;/a&gt;
                &lt;a href="#" class="mdl-navigation__link"&gt;Link&lt;/a&gt;
            &lt;/nav&gt;
        &lt;/div&gt;
    &lt;/div&gt;
`</pre>

### Scrolling Header

<pre>`&lt;div class="mdl-layout mdl-js-layout"&gt;
        &lt;header class="mdl-layout__header mdl-layout__header--scroll"&gt;
            &lt;div class="mdl-layout__header-row"&gt;
                &lt;span class="mdl-layout-title"&gt;Title&lt;/span&gt;
            &lt;/div&gt;
            &lt;div class="mdl-layout-spacer"&gt;&lt;/div&gt;
            &lt;nav class="mdl-navigation"&gt;
                &lt;a href="#" class="mdl-navigation__link"&gt;Link&lt;/a&gt;
                &lt;a href="#" class="mdl-navigation__link"&gt;Link&lt;/a&gt;
                &lt;a href="#" class="mdl-navigation__link"&gt;Link&lt;/a&gt;
            &lt;/nav&gt;
        &lt;/header&gt;
        &lt;div class="mdl-layout__drawer"&gt;
            &lt;span class="mdl-layout-title"&gt;Title&lt;/span&gt;
            &lt;nav class="mdl-navigation"&gt;
                &lt;a href="#" class="mdl-navigation__link"&gt;Link&lt;/a&gt;
                &lt;a href="#" class="mdl-navigation__link"&gt;Link&lt;/a&gt;
                &lt;a href="#" class="mdl-navigation__link"&gt;Link&lt;/a&gt;
            &lt;/nav&gt;
        &lt;/div&gt;
    &lt;/div&gt;
`</pre>

### Waterfall Header

<pre>`    &lt;div class="demo-layout-water mdl-layout mdl-js-layout"&gt;
        &lt;header class="mdl-layout__header mdl-layout--water"&gt;
            &lt;!-- Top Row Always Visible --&gt;
            &lt;div class="mdl-layout__header-row"&gt;
                &lt;!-- Title --&gt;
                &lt;span class="mdl-layout-title"&gt;Title&lt;/span&gt;
                &lt;div class="mdl-layout-spacer"&gt;&lt;/div&gt;
                &lt;div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable mdl-textfield--floating-label mdl-textfield--align-right"&gt;
                    &lt;label for="waterfall-exp" class="mdl-button mdl-js-button mdl-button--icon"&gt;
                        &lt;i class="material-icons"&gt;Search&lt;/i&gt;
                    &lt;/label&gt;
                    &lt;div class="mdl-textfield__expandable-holder"&gt;
                        &lt;input type="text" name="sample" id="waterfall-exp" class="mdl-textfield__input"&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
            &lt;!-- Bottom Row, Invisible on Scroll --&gt;
            &lt;div class="mdl-layout__header-row"&gt;
                &lt;div class="mdl-layout-spacer"&gt;&lt;/div&gt;
                &lt;nav class="mdl-navigation"&gt;
                    &lt;a href="" class="mdl-navigation__link"&gt;Link&lt;/a&gt;
                    &lt;a href="" class="mdl-navigation__link"&gt;Link&lt;/a&gt;
                    &lt;a href="" class="mdl-navigation__link"&gt;Link&lt;/a&gt;
                    &lt;a href="" class="mdl-navigation__link"&gt;Link&lt;/a&gt;
                    &lt;a href="" class="mdl-navigation__link"&gt;Link&lt;/a&gt;
                &lt;/nav&gt;
            &lt;/div&gt;
        &lt;/header&gt;
        &lt;div class="mdl-layout__drawer"&gt;
            &lt;span class="mdl-layout-title"&gt;Title&lt;/span&gt;
            &lt;nav class="mdl-navigation"&gt;
                &lt;a href="" class="mdl-navigation__link"&gt;Link&lt;/a&gt;
                &lt;a href="" class="mdl-navigation__link"&gt;Link&lt;/a&gt;
                &lt;a href="" class="mdl-navigation__link"&gt;Link&lt;/a&gt;
                &lt;a href="" class="mdl-navigation__link"&gt;Link&lt;/a&gt;
                &lt;a href="" class="mdl-navigation__link"&gt;Link&lt;/a&gt;
            &lt;/nav&gt;
        &lt;/div&gt;
    &lt;/div&gt;
`</pre>

### Scrollable Tabs

<pre>`&lt;div class="mdl-layout mdl-js-layout mdl-layout--fixed-header"&gt;
    &lt;header class="mdl-layout__header"&gt;
        &lt;div class="mdl-layout__header-row"&gt;
            &lt;span class="mdl-layout-title"&gt;Title&lt;/span&gt;
        &lt;/div&gt;
        &lt;!-- Tab --&gt;
        &lt;div class="mdl-layout__tab-bar mdl-js-ripple-effect"&gt;
            &lt;a href="#scroll-tab-1" class="mdl-layout__tab is-active"&gt;Tab 1&lt;/a&gt;
            &lt;a href="#scroll-tab-2" class="mdl-layout__tab"&gt;Tab 2&lt;/a&gt;
            &lt;a href="#scroll-tab-3" class="mdl-layout__tab"&gt;Tab 3&lt;/a&gt;
            &lt;a href="#scroll-tab-4" class="mdl-layout__tab"&gt;Tab 4&lt;/a&gt;
            &lt;a href="#scroll-tab-5" class="mdl-layout__tab"&gt;Tab 5&lt;/a&gt;
        &lt;/div&gt;
    &lt;/header&gt;
    &lt;div class="mdl-layout__drawer"&gt;
        &lt;span class="mdl-layout-title"&gt;Title&lt;/span&gt;
    &lt;/div&gt;
    &lt;main class="mdl-layout__content"&gt;
        &lt;section class="mdl-layout__tab-panel is-active" id="scroll-tab-1"&gt;
            &lt;div class="page-content" style="height:500px"&gt;Tab 1&lt;/div&gt;
        &lt;/section&gt;
        &lt;section class="mdl-layout__tab-panel" id="scroll-tab-2"&gt;
            &lt;div class="page-content" style="height:500px"&gt;Tab 2&lt;/div&gt;
        &lt;/section&gt;
        &lt;section class="mdl-layout__tab-panel" id="scroll-tab-3"&gt;
            &lt;div class="page-content" style="height:500px"&gt;Tab 3&lt;/div&gt;
        &lt;/section&gt;
        &lt;section class="mdl-layout__tab-panel" id="scroll-tab-4"&gt;
            &lt;div class="page-content" style="height:500px"&gt;Tab 4&lt;/div&gt;
        &lt;/section&gt;
        &lt;section class="mdl-layout__tab-panel" id="scroll-tab-5"&gt;
            &lt;div class="page-content" style="height:500px"&gt;Tab 5&lt;/div&gt;
        &lt;/section&gt;
    &lt;/main&gt;
&lt;/div&gt;
`</pre>

### Fixed Tabs

<pre>`&lt;div class="mdl-layout mdl-js-layout mdl-layout--fixed-header mdl-layout--fixed-tabs"&gt;
    &lt;header class="mdl-layout__header"&gt;
        &lt;div class="mdl-layout__header-row"&gt;
            &lt;span class="mdl-layout-title"&gt;Title&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class="mdl-layout__tab-bar mdl-js-ripple-effect"&gt;
            &lt;a href="#fixed-tab-1" class="mdl-layout__tab is-active"&gt;Tab 1&lt;/a&gt;
            &lt;a href="#fixed-tab-2" class="mdl-layout__tab"&gt;Tab 2&lt;/a&gt;
            &lt;a href="#fixed-tab-3" class="mdl-layout__tab"&gt;Tab 3&lt;/a&gt;
        &lt;/div&gt;
    &lt;/header&gt;
    &lt;div class="mdl-layout__drawer"&gt;
        &lt;span class="mdl-layout-title"&gt;Title&lt;/span&gt;
    &lt;/div&gt;
    &lt;main class="mdl-layout__content"&gt;
        &lt;section class="mdl-layout__tab-panel" id="fixed-tab-1"&gt;
            &lt;div class="page-content" style="height:500px"&gt;Tab 1&lt;/div&gt;
        &lt;/section&gt;
        &lt;section class="mdl-layout__tab-panel" id="fixed-tab-2"&gt;
            &lt;div class="page-content" style="height:500px"&gt;Tab 2&lt;/div&gt;
        &lt;/section&gt;
        &lt;section class="mdl-layout__tab-panel" id="fixed-tab-3"&gt;
            &lt;div class="page-content" style="height:500px"&gt;Tab 3&lt;/div&gt;
        &lt;/section&gt;
    &lt;/main&gt;
&lt;/div&gt;
&lt;/div&gt;