Material Design风格侧边栏UI设计

这是一款非常实用的Material Design风格侧边栏UI设计效果。该Material Design风格侧边栏支持4种侧边栏定位方式和4种不同的侧边栏主题效果。并且侧边栏的顶部还可以使用图片和颜色两种模式。

使用方法

该侧边栏UI中使用的图标是Material Design Iconic Font。该侧边栏可以和Bootstrap3相结合使用，你需要引入Bootstrap.min.js文件和使用正确的Bootstrap导航菜单HTML结构。

HTML结构

该Material Design风格侧边栏的HTML结构如下：

<!-- Overlay for fixed sidebar -->
<div class="sidebar-overlay"></div>
<!-- Material sidebar -->
<aside id="sidebar" class="sidebar sidebar-default open" role="navigation">
  <!-- Sidebar header -->
  <div class="sidebar-header header-cover" style="background-image: url(img/background.jpg);">
      <!-- Top bar -->
      <div class="top-bar"></div>
      <!-- Sidebar toggle button -->
      <button type="button" class="sidebar-toggle">
          <i class="icon-material-sidebar-arrow"></i>
      </button>
      <!-- Sidebar brand image -->
      <div class="sidebar-image">
          <img src="img/demo.jpg">
      </div>
      <!-- Sidebar brand name -->
      <a data-toggle="dropdown" class="sidebar-brand" href="#settings-dropdown">
          www.htmleaf.com
          <b class="caret"></b>
      </a>
  </div>

  <!-- Sidebar navigation -->
  <ul class="nav sidebar-nav">
      <li class="dropdown">
          <ul id="settings-dropdown" class="dropdown-menu">
              <li>
                  <a href="#" tabindex="-1">
                      Profile
                  </a>
              </li>
              <li>
                  <a href="#" tabindex="-1">
                      Settings
                  </a>
              </li>
              <li>
                  <a href="#" tabindex="-1">
                      Help
                  </a>
              </li>
              <li>
                  <a href="#" tabindex="-1">
                      Exit
                  </a>
              </li>
          </ul>
      </li>
      <li>
          <a href="#">
              <i class="sidebar-icon md-inbox"></i>
              Inbox
          </a>
      </li>
      <li>
          <a href="#">
              <i class="sidebar-icon md-star"></i>
              Starred
          </a>
      </li>
      <li>
          <a href="#">
              <i class="sidebar-icon md-send"></i>
              Sent Mail
          </a>
      </li>
      <li>
          <a href="#">
              <i class="sidebar-icon md-drafts"></i>
              Drafts
          </a>
      </li>
      <li class="divider"></li>
      <li class="dropdown">
          <a class="ripple-effect dropdown-toggle" href="#" data-toggle="dropdown">
              All Mail
              <b class="caret"></b>
          </a>
          <ul class="dropdown-menu">
              <li>
                  <a href="#" tabindex="-1">
                      Social
                      <span class="sidebar-badge">12</span>
                  </a>
              </li>
              <li>
                  <a href="#" tabindex="-1">
                      Promo
                      <span class="sidebar-badge">0</span>
                  </a>
              </li>
          </ul>
      </li>
      <li>
          <a href="#">
              Trash
              <span class="sidebar-badge">3</span>
          </a>
      </li>
      <li>
          <a href="#">
              Spam
              <span class="sidebar-badge">456</span>
          </a>
      </li>
      <li>
          <a href="#">
              Follow Up
              <span class="sidebar-badge badge-circle">i</span>
          </a>
      </li>
  </ul>
  <!-- Sidebar divider -->
  <!-- <div class="sidebar-divider"></div> -->
  
  <!-- Sidebar text -->
  <!--  <div class="sidebar-text">Text</div> -->
</aside>                
              

4种侧边栏结构分别是：默认的侧边栏结构，左侧隐藏侧边栏结构，右侧隐藏侧边栏结构和栈式推拉侧边栏结构。下面是一些截图效果：

默认的Material Design风格侧边栏UI效果：

左侧隐藏侧边栏效果：

右侧隐藏侧边栏效果：