导航菜单
旋转式打开隐藏侧边栏UI界面设计
PetitQ
这是一款效果非常炫酷的创意旋转式打开隐藏侧边栏 UI 界面设计。该侧边栏设计中，当用户点击侧边栏按钮的时候，整个页面会旋转一个角度，然后隐藏在页面下的侧边栏会被显示出来，效果非常的酷。
HTML 结构
该侧边栏特效的 HTML 结构如下：.menu_toggle 是侧边栏打开按钮，.menu_items 是侧边栏菜单，main.content 是页面内容。
也想出现在这里？联系我们吧
<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 度。菜单的列表项开始时是被移动到屏幕之外的，这时被移动回原来的位置，并设置了每个列表项的动画延迟时间。这一系列的设置组成了旋转打开侧边栏的效果。
.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。
var $page = $('.page');
$('.menu_toggle').on('click', function () {
$page.toggleClass('shazam');
});
$('.content').on('click', function () {
$page.removeClass('shazam');
});
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
