分享一个超棒的jQuery的单页面滚动导航设计插件 - jQuery one page nav

jquery 同时被 3 个专栏收录
233 篇文章 0 订阅
84 篇文章 0 订阅
35 篇文章 0 订阅

分享一个超棒的jQuery的单页面滚动导航设计插件 - jQuery one page nav

在线演示1  在线演示2  本地下载

单页面设计最近越来越流行了,使用单页面的网站简单优雅并且易于维护,你不需要修改很多文件来做日常维护,而且使用超酷的动态滚动方式来展示你的个人网站或者公司网站,的确是一个非常不错的选择,今天这里我们将介绍给大家一款非常不错的单页面滚动式导航jQuery插件 - jQuery one page nav,希望大家能够应用到自己的网站设计和开发中,如果你也喜欢这个插件,请给我们留言,谢谢!!

主要特性

  • 支持jQuery
  • 需要scrollTo插件
  • 使用简单
  • 支持主流浏览器
  • 使用简单

如何使用

HTML标签:

<ul id="nav">
  <li class="current"><a href="#section-1">Section 1</a></li>
  <li><a href="#section-2">Section 2</a></li>
  <li"><a href="#section-3">Section 3</a></li>
</ul>

<div id="section-1">
  <strong>Section 1</strong>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
  incididunt ut labore et dolore magna aliqua.</p>
</div>
<div id="section-2">
  <strong>Section 2</strong>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
  incididunt ut labore et dolore magna aliqua.</p>
</div>
<div id="section-3">
  <strong>Section 3</strong>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
  incididunt ut labore et dolore magna aliqua.</p>
</div>

Javascript:

<script src="jquery.js"></script>
<script src="jquery.scrollTo.js"></script>
<script src="jquery.nav.min.js"></script>

将插件应用到导航项目上:

$(document).ready(function() {$('#nav').onePageNav();});

插件主要选项

  • currentClass:缺省值'current',用来定义选定的导航项目的样式
  • changeHash:缺省值false,如果你希望hash变化,那么设定这个选项为true。
  • scrollSpeed:缺省值700,定义滚动速度

插件使用非常简单,希望大家能应该到自己的项目中。


  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值