这是一款基于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>