当前位置:主页 > 网页特效 > 菜单导航 >

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

发布时间:2018/08/21 来源:互联网 浏览: 关键词:jquery 3D 菜单导航 侧边栏 
jQuery推拉式3D隐藏侧边栏菜单特效 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'
  });
});      
   

共有人阅读,期待你的评论!评论
骚年说点什么吧
  • 全部评论(0
    还没有评论,快来抢沙发吧!
Top