jquery.secretnav是一款效果非常炫酷的jQuery推拉式3D隐藏侧边栏菜单特效。该隐藏侧边栏特效支持从左侧和顶部显示菜单,并且在显示菜单的时候带有3D透视的推拉效果,非常的优美。
安装
可以使用nmp或bower来安装该隐藏侧边栏菜单插件。
npm install jquery.secretnav bower install jquery.secretnav
该插件需要jQuery1.7以上版本的支持,使用是要引入jQuery,jquery.secretnav.js和jquery.secretnav.css文件。
<link rel="stylesheet" type="text/css" href="css/jquery.secretnav.css" /> <script src="js/jquery.min.js"></script> <script src="js/jquery.secretnav.js"></script>
使用方法
HTML结构
该隐藏侧边栏菜单的HTML结构可以使用<nav>
作为包裹元素,里面放置一组作为菜单项的<a>
元素。
<nav id="nav"> <a href="#">Home</a> <a href="#">Works</a> <a href="#">Services</a> <a href="#">Contact</a> <a href="#">About</a> <a href="#">Blog</a> </nav>
然后你可以通过一个超链接来打开侧边栏菜单,这个超链接上要带一个特定的class,后面会通过jQuery代码来选择这个元素。
<a href="#" class="open" title="点击打开菜单!">[打开菜单]</a>
初始化插件
在页面DOM元素加载完毕之后,可以通过下面的方法来初始化该侧边栏菜单插件。
$('#content').secretNav({ navSelector: '#nav', openSelector: '.open' });
#content
是你的页面内容的包裹元素,navSelector
指定侧边栏菜单的选择器,openSelector
指定用于打开侧边栏菜单的按钮或超链接的class名称。
从左侧打开隐藏侧边栏菜单的方法如下:
$(function() { $('#content').secretNav({ navSelector: '#nav', openSelector: '.open', position: 'left' }); });
从顶部打开隐藏侧边栏菜单的方法如下:
$(function() { $('#content').secretNav({ navSelector: '#nav', openSelector: '.open', position: 'top' }); });
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!