jQuery导航栏插件自定义导航宽度、高度、文本内容、滑动效果等功能。功能非常简单，几行jquery代码就完成了，主要运用了jquery插件。参数设置参考：type: 'slidemove', // 必填

选择内容 default: 2, // 默认为空为选中第1个 -- 选中默认值 width: '200', // 限制宽度 height: '100', // 导航的高度 textlist: ['首页','分页1','分页2','分页3'], // 每个导航的内容

使用方法

在页面引入jquery.min.js和jquery-nav.js两个JS文件

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-nav.js"></script>

Html结构

在页面引入style.css样式表

<link rel="stylesheet" type="text/css" href="css/style.css">

在页面底部引入调用不同导航的script代码

<script type="text/javascript">
$('#f-nav').tooltip({
    default: 2,       // 默认为空  --  选中默认值
    width: '200',     // 限制宽度
    height: '100',
    textList: ['首页','分页1','分页2','分页3'],   // 每个导航的内容
    type: 'slideMove',  // 必填, 选择内容
    success: function(ret){
   
    }   //初始化回调
});
$('#f-nav2').tooltip({
    default: 3,    
    type: 'fontUp',
    width: '150',
});
$('#f-nav3').tooltip({
    type: 'downUp'
});
$('#f-nav4').tooltip({
    type: 'edgeLeft'
});
$('#f-nav5').tooltip({
    type: 'edgeRight'
});
    $('#f-nav6').tooltip({
    type: 'scaleChange'
});
</script>