导航菜单

炫酷3D翻转侧边栏菜单特效

阿里云

这是一款 jQuery 和 CSS3 炫酷 3D 翻转侧边栏特效。该侧边栏特效中,当用户点击了触发按钮之后,整个页面会 3D 翻转一定的角度,同时显示侧边栏,效果非常炫酷。

使用方法:

侧边栏的 HTML 结构如下:

也想出现在这里?联系我们
创客主机
  1. <nav class="menu-activea">
  2.   <h1>打开侧边栏</h1>
  3.   <ul>
  4.     <li>首页</li>
  5.     <li>栏目一</li>
  6.     <li>联系我们</li>
  7.     <li>关于我们</li>
  8.   </ul>
  9. </nav>

作为打开侧边栏时,进行 3D 翻转的主体内容的 HTML 结构如下:

  1. <main>
  2.   <section>
  3.     <!--这里放置你的页面内容--&t;
  4.   </section>
  5. </main>

CSS 样式:

该 jQuery 和 CSS3 3D 翻转侧边栏的主要 CSS 样式如下:

  1. nav, main {
  2.   transition: -webkit-transform 150ms ease-out;
  3.   transition: transform 150ms ease-out;
  4.   transition: transform 150ms ease-out, -webkit-transform 150ms ease-out;
  5. }
  6.  
  7. nav {
  8.   z-index: 100;
  9.   position: absolute;
  10.   top: 0;
  11.   left: 0;
  12.   bottom: 0;
  13.   width: 16em;
  14.   background-color: #353441;
  15.   -webkit-transform: translateX(-16em);
  16.   transform: translateX(-16em);
  17. }
  18.  
  19. nav.menu-active {
  20.   -webkit-transform: translateX(0);
  21.   transform: translateX(0);
  22. }
  23.  
  24. nav.menu-hover {
  25.   -webkit-transform: translateX(-15em);
  26.   transform: translateX(-15em);
  27. }
  28.  
  29. nav h1 {
  30.   z-index: 100;
  31.   display: block;
  32.   position: absolute;
  33.   top: 0;
  34.   right: -60px;
  35.   height: 60px;
  36.   width: 60px;
  37.   line-height: 60px;
  38.   font-size: .8em;
  39.   font-weight: 800;
  40.   letter-spacing: 1px;
  41.   color: #9DC6D1;
  42.   text-transform: uppercase;
  43.   text-align: center;
  44.   background-color: #353441;
  45.   cursor: pointer;
  46. }
  47.  
  48. nav h1:hover {
  49.   color: #353441;
  50.   background: #fff;
  51. }
  52.  
  53. nav ul {
  54.   margin: 0;
  55.   padding: 0;
  56. }
  57.  
  58. nav li {
  59.   display: inline-block;
  60.   padding: 0 1em;
  61.   width: 100%;
  62.   height: 60px;
  63.   color: #9DC6D1;
  64.   line-height: 60px;
  65.   background-color: #353441;
  66. }
  67.  
  68. nav li:nth-of-type(2n) { background-color: #3a3947; }
  69.  
  70. nav li:hover { background: #fff; }
  71.  
  72. main {
  73.   z-index: 0;
  74.   position: absolute;
  75.   top: 0;
  76.   left: 0;
  77.   bottom: 0;
  78.   right: 0;
  79.   display: flex;
  80.   align-items: center;
  81.   overflow: hidden;
  82.   background-color: #9DC6D1;
  83.   -webkit-transform-origin: 0% 50%;
  84.   transform-origin: 0% 50%;
  85. }
  86. main:after {
  87.   content: '';
  88.   display: block;
  89.   position: absolute;
  90.   z-index: 1;
  91.   top: 0;
  92.   left: 0;
  93.   bottom: 0;
  94.   right: 0;
  95.   background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(33, 33, 45, 0.5));
  96.   visibility: hidden;
  97.   opacity: 0;
  98.   transition: opacity 150ms ease-out, visibility 0s 150ms;
  99. }
  100. main.menu-active {
  101.   border-radius: .001px;
  102.   -webkit-transform: translateX(16em) rotateY(15deg);
  103.   transform: translateX(16em) rotateY(15deg);
  104. }
  105. main.menu-active:after {
  106.   visibility: visible;
  107.   opacity: 1;
  108.   transition: opacity 150ms ease-out, visibility 0s;
  109. }
  110. main.menu-hover {
  111.   border-radius: .001px;
  112.   -webkit-transform: translateX(1em) rotateY(1deg);
  113.   transform: translateX(1em) rotateY(1deg);
  114. }
  115. main section {
  116.   position: absolute;
  117.   top: 0;
  118.   left: 0;
  119.   bottom: 0;
  120.   right: 0;
  121.   margin: auto;
  122.   padding: 1em 4em;
  123.   max-width: 680px;
  124.   overflow: auto;
  125.   background-color: rgba(255, 255, 255, 0.5);
  126. }

JavaScript 代码:

最后通过 jquery 代码来控制侧边栏的隐藏和显示。

  1. (function() {
  2.   var nav = $('nav'),
  3.     menu = $('nav h1'),
  4.     main = $('main'),
  5.     open = false,
  6.     hover = false;
  7.   menu.on('click', function() {
  8.     open = !open ? true : false;
  9.     nav.toggleClass('menu-active');
  10.     main.toggleClass('menu-active');
  11.     nav.removeClass('menu-hover');
  12.     main.removeClass('menu-hover');
  13.     console.log(open);
  14.   });
  15.   menu.hover( 
  16.     function() {
  17.       if (!open) {
  18.         nav.addClass('menu-hover');
  19.         main.addClass('menu-hover');
  20.       }
  21.     }, function() {
  22.       nav.removeClass('menu-hover');
  23.       main.removeClass('menu-hover');
  24.     }
  25.   );
  26. })();

该 jQuery 和 CSS3 3D 翻转侧边栏特效的 codepen 地址为:https://codepen.io/jscottsmith/pen/KppGrE

炫酷 3D 翻转侧边栏菜单特效

已有 644 人购买
查看演示升级 VIP立刻购买

演示地址 下载地址
收藏
(0)

发表回复

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题
LensNews

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!