炫酷过渡动画隐藏侧边栏界面设计

PetitQ 导航菜单 2019-1-25 1.74K 0 0

这是一款带炫酷过渡动画效果的响应式隐藏侧边栏界面设计效果。该隐藏侧边栏采用推拉式设计，侧边栏打开时页面的主内容会被推动。另外，在侧边栏打开的状态下，缩放浏览器到一定大小的时候，侧边栏会像被吸附一样扩展到全屏，效果非常酷。

使用方法

该侧边栏设计的图标使用的是 font-awesome 字体图标，使用是需要引入 font-awesome.min.css 文件。

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

<link rel="stylesheet" href="/path/to/font-awesome.min.css">

HTML 结构

侧边栏的 HTML 结构如下：

```
<aside>
```
```
  <h2>网站Logo</h2>
```
```
  <div class="controls">
```

  <input type="search" id="search" name="search" />

    <label for="search"><i class="fa fa-search"></i></label>

```
  </div>
```
```
  <nav class='site-nav'>
```

    <a class="active" href="#"><i class="fa fa-home"></i> Home</a>

    <a href="#"><i class="fa fa-gift"></i> Deals & packages</a>

    <a href="#"><i class="fa fa-line-chart"></i> Report Builder</a>

    <a href="#"><i class="fa fa-bell-o"></i> Notifications</a>

```
  </nav> 
```
```
  <footer>
```
```
    <a href="" class="avatar">
```

      <img src="" alt="" />brady Sammons</a>

    <a href=""><i class="fa fa-sign-out fa-rotate-180"></i> Logout</a>

```
  </footer>
```
```
</aside>
```

正文部分使用一个<section>元素来包裹。

```
<section>
```
```
  <article>
```
```
    <h2>Post Two</h2>
```
```
    <p>...</p>
```
```
  </article>
```
```
  ......
```
```
</section>
```

用于触发侧边栏菜单的按钮放置在顶部导航条上。

```
<header>
```
```
  <div class="left">
```

    <button id="menu" title="Menu"><i class="fa fa-bars fa-2x"></i></button>

```
    <h1>Acme CO TNT Division</h1>
```
```
  </div>
```
```
 
```
```
  <div class="utils right">
```

    <a href="#" class='alerts'><i class="fa fa-bell-o fa-lg"></i></a>

```
    <i class="sep"> </i>
```

    <a href="#"><i class="fa fa-life-ring fa-lg"></i></a>

```
  </div>
```
```
</header>
```

CSS 样式

侧边栏菜单的基本 CSS 样式如下：注意这是移动优先的 CSS 代码编写方式。首先侧边栏被设置为固定定位，宽度和高度都是 100%。并使用 left: -100%;将其隐藏起来。它在宽度上使用了指定贝兹曲线的过渡动画效果，用来制作“gooey”效果。

```
aside {
```
```
  position: fixed;
```
```
  height: 100%;
```
```
  width: 100%;
```
```
  color: #fff;
```
```
  left: -100%;
```
```
  background-color: #2A3744;
```
```
  padding: 20px;
```

  -moz-transition: left 0.4s ease, width 0.5s cubic-bezier(0.525, -0.35, 0.115, 1.335);

  -o-transition: left 0.4s ease, width 0.5s cubic-bezier(0.525, -0.35, 0.115, 1.335);

  -webkit-transition: left 0.4s ease, width 0.5s cubic-bezier(0.525, -0.35, 0.115, 1.335);

  transition: left 0.4s ease, width 0.5s cubic-bezier(0.525, -0.35, 0.115, 1.335);

```
}
```
```
 
```
```
aside a {
```
```
  padding: 8px;
```
```
  color: rgba(255, 255, 255, 0.7);
```
```
  font-weight: 300;
```

  -moz-transition: background-color 0.3s, color 0.3s;

  -o-transition: background-color 0.3s, color 0.3s;

  -webkit-transition: background-color 0.3s, color 0.3s;

  transition: background-color 0.3s, color 0.3s;

```
}
```
```
 
```
```
aside a:hover { color: #fff; }
```
```
 
```
```
aside a i, aside a img {
```
```
  width: 20px;
```
```
  text-align: center;
```
```
  margin-right: 6px;
```
```
}
```
```
 
```

aside .site-nav a { margin-bottom: 3px; }

```
 
```

aside .site-nav a.active, aside .site-nav a:hover { background-color: rgba(0, 0, 0, 0.3); }

```
 
```

aside .site-nav a.active i { color: #24FFCE; }

```
 
```
```
aside footer {
```
```
  margin-top: 10px;
```
```
  padding-top: 10px;
```

  border-top: 1px solid rgba(0, 0, 0, 0.3);

```
  width: 100%;
```
```
  position: absolute;
```
```
  bottom: 40px;
```
```
  left: 0;
```
```
  padding-left: 10px;
```
```
}
```
```
aside footer a { padding: 8px; }
```

然后使用媒体查询设置在大屏幕的时候的侧边栏样式。

```
@media (min-width: 500px) {
```
```
  body.nav-open section {
```
```
    margin-left: 250px;
```
```
  }
```
```
 
```
```
  aside {
```
```
    position: fixed;
```
```
    top: 0;
```
```
    padding-top: 80px;
```
```
    width: 250px;
```
```
  }
```
```
 
```
```
  .site-footer {
```
```
    position: fixed;
```
```
    z-index: 5;
```
```
    bottom: 0;
```
```
    left: 0;
```
```
  }
```
```
}
```

正文部分的样式非常简单，只是设置了一些最基本的样式。

```
section {
```

  -moz-transition: margin-left 0.4s ease;

```
  -o-transition: margin-left 0.4s ease;
```

  -webkit-transition: margin-left 0.4s ease;

```
  transition: margin-left 0.4s ease;
```
```
}
```
```
section article {
```
```
  padding: 20px;
```
```
}
```
```
section article h2 {
```
```
  font-weight: 300;
```
```
  font-size: 24px;
```
```
}
```
```
section article p {
```
```
  line-height: 1.5;
```
```
  margin-bottom: 10px;
```
```
}
```

JavaScript

该侧边栏特效中使用 jQuery 来简单的处理主菜单按钮的点击事件，为相应的元素添加和移除相应的 class。

```
$(function () {
```

    $('#menu').on('click', function () {

```
        $(this).toggleClass('active');
```

        $('body').toggleClass('nav-open');

```
    });
```
```
});
```

炫酷过渡动画隐藏侧边栏界面设计

已有 434 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

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

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

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

导航菜单

炫酷过渡动画隐藏侧边栏界面设计

使用方法

HTML 结构

CSS 样式

JavaScript

炫酷过渡动画隐藏侧边栏界面设计

相关文章

YouTube 左侧侧边栏导航菜单特效

模糊效果隐藏滑动侧边栏插件

纯JavaScript右键上下文菜单插件

发表回复取消回复

热销模板

导航菜单

使用方法

HTML 结构

CSS 样式

JavaScript

炫酷过渡动画隐藏侧边栏界面设计

相关文章

发表回复 取消回复

热销模板

发表回复取消回复