jQuery 3D页面倾斜侧边导航菜单代码

jQuery 3D页面倾斜侧边导航菜单代码

这是一款基于jQuery css3属性制作点击按钮展开3D倾斜页面左侧导航菜单列表代码。通过点击菜单可以实现背景倾斜,效果十分漂亮。

使用方法
在页面引入以下jquery.min.js文件

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

文件信息:

    0

    发表评论