jQuery+css3 3D倾斜页面左侧导航菜单代码

来源:https://www.sucaihuo.com/js/3691.html 2018-05-16 12:15浏览(1332) 收藏

一款酷酷的jQuery+css3 3D倾斜页面左侧导航菜单代码,点击按钮展开左侧边栏导航菜单时页面会有3D倾斜效果,收起导航菜单即恢复。
jQuery+css3 3D倾斜页面左侧导航菜单代码
分类:导航菜单 > 展开收缩 难易:初级
查看演示 下载资源 下载积分: 20 积分

js代码

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

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2