Jquery插件---自定义导航条效果

注:详情去插件库查看----http://www.jq22.com

本文是小编想学习一些jq插件,对于学过的一些东西都想记录一下.

大家可以去插件库,自己找一些差价,并拿来学习过,插件库中对插件的描述也是非常详细的.

要想使用,要先去插件库下载xq_navbar自定义导航插件:http://www.jq22.com/jquery-info9685

注:可以查看演示效果

然后就是使用插件,具体如下:

1.首先引入css文件:

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

<link rel="stylesheet" type="text/css" href="css/xq.css"/><!--不采用beat动画 ，可以不引入-->

2.在body下引入js文件:

注: jquery文件必须放在xq_navbar.js文件的上方

<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>

<script src="js/xq_navbar.js" type="text/javascript" charset="utf-8"></script>

3.在body中写导航菜单:

<div class="xq_bag" id="bar">

<ul class="xq_navbar">

<li class="xq_navli"><a href="###">首页</a></li>

<li class="xq_navli"><a href="###">天气</a></li>

<li class="xq_navli"><a href="###">新闻</a></li>

<li class="xq_navli"><a href="###">旅游</a></li>

<li class="xq_navli"><a href="###">关于</a></li>

</ul>

</div>

4.在script标签里进行初始化:

<script type="text/javascript">

//初始化

$("#bar").xq_navbar({

"type":"beat",

"liwidth":"avg",

"bgcolor":"black",

"hcolor":["blue","rgb(10,100,100)","red", "green", "rgba(23,234,22,1)"]

});

</script>

 看到初始里面的内容,是不是一脸茫然,下面将对里面的内容进行详细介绍,当然在插件库中对此部分的介绍也是相当详细的,相信大家都能看的明白.

配置参数:

var defaults = {

   "bgcolor":"#38927a",//导航条颜色

   "type":"line",//定义导航类型 下划线 underline 上划线overline 双划线line 块级背景block 

  "liwidth":"avg",//设置导航项的宽度类型 auto：自动  ， avg：评分， 30：指定具体宽度 

   "hcolor":"rgba(255,0,0,0.8)"//指定每一个导航项的颜色。不指定或指定不够默认 #ccc；统一颜色可直接传入颜色值.

}

在这里我使用的是beat效果,大家可以尝试其他的效果,都是很炫酷的.

效果图: