投稿 搜索

热搜词

热门文章

当前位置: 站长天下 / 菜单导航 / jQuery 3D页面倾斜侧边导航菜单代码
jQuery 3D页面倾斜侧边导航菜单代码
标签:

插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:2018-05-08
    阅读:

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

简要教程

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

使用方法

在页面引入以下jquery.min.js文件

<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>