当前位置：首页 > 网页特效 > 导航菜单

创意旋转式打开隐藏侧边栏UI界面设计

分类：导航菜单日期：2024-05-14 点击(0) 评论(0)

创意旋转式打开隐藏侧边栏UI界面设计

简介

##### HTML结构
该侧边栏特效的HTML结构如下：.menu_toggle是侧边栏打开按钮，.menu_items是侧边栏菜单，main.content是页面内容。

```html
<div class="page">
    <span class="menu_toggle">
      <i class="menu_open fa fa-bars fa-lg"></i>
      <i class="menu_close fa fa-times fa-lg"></i>
    </span>
    <ul class="menu_items">
      <li><a href="#"><i class="icon fa fa-signal fa-2x"></i> Moar</a></li>
      <li><a href="#"><i class="icon fa fa-coffee fa-2x"></i> Coffee</a></li>
      <li><a href="#"><i class="icon fa fa-heart fa-2x"></i> Please</a></li>
    </ul>
    <main class="content">
      <div class="content_inner">
        <h1>...</h1>
        <p>...</p>
      </div>
    </main>
</div>  
```       
#####  CSS样式
在CSS样式中，当用户点击了打开侧边栏按钮的时候，页面朱内容元素.content被添加了class .shazam，这时该元素被旋转了-30度，打开按钮被旋转了-20度。菜单的列表项开始时是被移动到屏幕之外的，这时被移动回原来的位置，并设置了每个列表项的动画延迟时间。这一系列的设置组成了旋转打开侧边栏的效果。

```html
.shazam .content {
  -webkit-transform: rotate(-30deg);
      -ms-transform: rotate(-30deg);
          transform: rotate(-30deg);
}
.shazam .menu_open {
  -webkit-transform: rotate(-20deg);
      -ms-transform: rotate(-20deg);
          transform: rotate(-20deg);
}
.shazam .menu_close {
  -webkit-transform: rotate(0);
      -ms-transform: rotate(0);
          transform: rotate(0);
}
.shazam .menu_items li {
  -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
          transform: translateX(0);
  -webkit-transition: -webkit-transform 0.35s 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275);
          transition: transform 0.35s 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.shazam .menu_items li:nth-child(2) {
  -webkit-transition-delay: .47s;
          transition-delay: .47s;
}
.shazam .menu_items li:nth-child(3) {
  -webkit-transition-delay: .48s;
          transition-delay: .48s;
}        
```     
#####  Javascript
在jQuery代码中，主要为点击按钮添加和移除相应的class。

```html
var $page = $('.page');
$('.menu_toggle').on('click', function () {
    $page.toggleClass('shazam');
});
$('.content').on('click', function () {
    $page.removeClass('shazam');
});  
```

web299.com

创意旋转式打开隐藏侧边栏UI界面设计

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果