Material Design风格侧边栏UI设计

PetitQ 导航菜单 2019-2-25 1.84K 0 1

这是一款非常实用的 Material Design 风格侧边栏 UI 设计效果。该 Material Design 风格侧边栏支持 4 种侧边栏定位方式和 4 种不同的侧边栏主题效果。并且侧边栏的顶部还可以使用图片和颜色两种模式。该侧边栏 UI 中使用的图标是 Material Design Iconic Font。该侧边栏可以和 Bootstrap3 相结合使用，你需要引入 Bootstrap.min.js 文件和使用正确的 Bootstrap 导航菜单 HTML 结构。

HTML 结构

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

也想出现在这里？联系我们吧

```

```
```
<div class="sidebar-overlay"></div>
```
```

```

<aside id="sidebar" class="sidebar sidebar-default open" role="navigation">

```
  
```

  <div class="sidebar-header header-cover" style="background-image: url(img/background.jpg);">

```
      
```
```
      <div class="top-bar"></div>
```
```
      
```

      <button type="button" class="sidebar-toggle">

          <i class="icon-material-sidebar-arrow"></i>

```
      </button>
```
```
      
```
```
      <div class="sidebar-image">
```
```
          <img src="img/demo.jpg">
```
```
      </div>
```
```
      
```

      <a data-toggle="dropdown" class="sidebar-brand" href="#settings-dropdown">

```
          www.htmleaf.com
```
```
          <b class="caret"></b>
```
```
      </a>
```
```
  </div>
```
```
 
```
```
  
```
```
  <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>
```
```
  
```

  <!-- <div class="sidebar-divider"></div> -->

```
 
```
```
  
```

  <!--  <div class="sidebar-text">Text</div> -->

```
</aside>
```

4 种侧边栏结构分别是：默认的侧边栏结构，左侧隐藏侧边栏结构，右侧隐藏侧边栏结构和栈式推拉侧边栏结构。

Material Design 风格侧边栏 UI 设计

已有 461 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

导航菜单

Material Design风格侧边栏UI设计

HTML 结构

Material Design 风格侧边栏 UI 设计

相关文章

智能隐藏显示顶部导航菜单

紫色炫酷CSS3和SVG实现的圆环菜单动画

Google Nexus 7 侧边栏导航菜单特效

发表回复取消回复

热销模板

导航菜单

HTML 结构

Material Design 风格侧边栏 UI 设计

相关文章

发表回复 取消回复

热销模板

发表回复取消回复