mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2025-10-30 23:47:42 +03:00
74 lines
2.8 KiB
HTML
74 lines
2.8 KiB
HTML
---
|
|
layout: example
|
|
title: Drawer Template
|
|
group: material-design
|
|
---
|
|
|
|
<div class="mdb-layout-container mdb-drawer-f-l mdb-drawer-overlay-md-down mdb-drawer-in-lg-up">
|
|
<header class="mdb-layout-header">
|
|
<div class="navbar navbar-light bg-faded">
|
|
<button class="navbar-toggler hidden-lg-up" type="button" data-toggle="drawer" data-target="#dw-1">
|
|
<span class="sr-only">Toggle drawer</span>
|
|
<i class="material-icons">menu</i>
|
|
</button>
|
|
<ul class="nav navbar-nav">
|
|
<li class="nav-item">Title</li>
|
|
</ul>
|
|
<ul class="nav navbar-nav pull-xs-right">
|
|
<li class="nav-item">
|
|
<div class="mdb-form-group mdb-collapse-inline pull-xs-right">
|
|
<button class="btn mdb-btn-icon" for="search" data-toggle="collapse" data-target="#collapse-search-1" aria-controls="collapse-search-1">
|
|
<i class="material-icons">search</i>
|
|
</button>
|
|
<span id="collapse-search-1" class="collapse">
|
|
<input class="form-control" type="text" id="search" placeholder="Enter your query...">
|
|
</span>
|
|
</div>
|
|
</li>
|
|
<li class="nav-item">
|
|
<div class="dropdown">
|
|
<button class="btn mdb-btn-icon btn-secondary dropdown-toggle" type="button" id="more-menu-1" data-toggle="dropdown" aria-haspopup="true">
|
|
<i class="material-icons">more_vert</i>
|
|
</button>
|
|
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="more-menu-1">
|
|
<button class="dropdown-item" type="button">About</button>
|
|
<button class="dropdown-item" type="button">Contact</button>
|
|
<button class="dropdown-item" type="button">Legal information</button>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</header>
|
|
|
|
<div id="dw-1" class="mdb-layout-drawer bg-faded">
|
|
<header>
|
|
<a class="navbar-brand">Title</a>
|
|
</header>
|
|
<ul class="list-group">
|
|
<a class="list-group-item">
|
|
<i class="material-icons" role="presentation">home</i>Home
|
|
</a>
|
|
<a class="list-group-item">
|
|
<i class="material-icons" role="presentation">inbox</i>Inbox
|
|
</a>
|
|
<a class="list-group-item">
|
|
<i class="material-icons" role="presentation">delete</i>Trash
|
|
</a>
|
|
|
|
<li class="mdb-layout-spacer"></li>
|
|
|
|
<a class="list-group-item">
|
|
<i class="material-icons" role="presentation">help_outline</i><span class="sr-only">Help</span>
|
|
</a>
|
|
</ul>
|
|
</div>
|
|
<main class="mdb-layout-content">
|
|
<div class="container">
|
|
<!-- main content -->
|
|
<h2>Responsive drawer template</h2>
|
|
<p class="lead">This template provides a push style drawer for large screens, but an overlay style drawer for smaller screens. For example, try viewing on an iPad in portrait vs. landscape.</p>
|
|
</div>
|
|
</main>
|
|
</div>
|