jQuery推拉式3D隐藏侧边栏菜单特效

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'
  });
});