头像

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

来源:http://www.sucaihuo.com/js/3691 素材火管理员 2018-05-16 12:15浏览(199) 收藏

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

程序员,你不是一个人;网站开发QQ群:436471830,在线充值,或联系QQ416148489直接充值

查看演示 下载资源: 5 下载资源 下载积分: 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>
评论8
头像

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

  • 头像 7楼
    05-20 10:28
    薛***咸
    先码住,然后下载下来慢慢看
  • 头像 6楼
    05-17 09:53
    舒***畅
    非常漂亮大气的特效,赞一个!
  • 头像 5楼
    05-17 09:47
    yo***88
    学习,下载看看是否合适?
  • 头像 4楼
    05-17 09:40
    布***丁
    惊喜效果炫酷,先留着,以后用
  • 头像 3楼
    05-17 09:34
    木***偶
    酷炫的效果,可以应用到博客网站
  • 头像 板凳
    05-17 09:21
    心***扬
    炫酷,好评,感谢楼主分享……
  • 头像 椅子
    05-17 09:03
    AM***㎕࿐
    好酷 但是用不上
  • 头像 沙发
    05-17 08:21
    崔***啊
    真是个不错的特效,很有用啊
1 2