八 29 2012


 

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

jquery楼层导航 jquery响应式导航栏_jquery楼层导航

　　响应式设计是指页面可以自动响应用户的设备环境，可自动调整分辨率。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样式
 });