jQuery响应式水平导航栏插件 - HorizontalNav

八 29 2012

 

　　如今响应式网页设计比较流行，那么今天就给大家推荐一个响应式的 jQuery 导航栏插件 -HorizontalNav。

　　响应式设计是指页面可以自动响应用户的设备环境，可自动调整分辨率。HorizontalNav 是轻量级的并且非常容易使用的插件，它能让你快速的创建一个自适应宽度的水平导航栏。它提供了3个可设置的参数：是否启用响应功能，响应变化前的延迟时间，是否使用 display:table 样式。它在浏览器兼容性方面也做得比较好，支持多种主流浏览器。

如何使用

　　首先在页面的 head 中引入 jQuery 框架和 HorizontalNav 插件

<script src="jquery.min.js"></script>
<script src="jquery.horizontalNav.js"></script>

　　之后添加水平导航栏，还可以自定义 CSS 样式

<nav class="demo-nav">
<ul>
<li><a href="#">给力技术</a></li>
<li><a href="#">工作</a></li>
</ul>
</nav>

　　最后初始化就可以了

$('.demo-nav').horizontalNav({
responsive : true,
responsiveDelay : 100,//延迟时间
tableDisplay : true //是否使用display:table样式
});