导航栏代码,导航栏代码颜色可变动的
超简单，几行代码搞定Android底部导航栏
咳咳，答应过年增加新功能的，没想到拖到现在，延迟了一个来月，尴尬，尴尬
那个，我们先忽略这尴尬的事情吧，进入正题才是最重要滴
老规矩，先上效果图：
跟原来的图有个很明显的区别，你们也一定都发现了，对不对。那么显眼的小红点，一定都看到了吧。
当然除了这个，还增加了一项功能，虽然不是很明显，但相信也有小伙伴发现了吧，截图的这俩手机屏幕明显大小不同，但是底部导航栏的大小还是相差不大滴。
是的，你们没有看多，这次不仅增加了小红点功能，还增加了底部导航栏的适配，你没有听错，以后底部导航栏也不用那些dp、sp了，都按照UI妹子们标注的px来就可以了，再也不用为了底部导航栏去跟UI妹子解释啥叫dp了。
好了，效果图展示完了，现在该进入枯燥的使用介绍了。
由于这次改动有点大，所以，先介绍下上个稳定版本的用法，到底是用最新的，还是用原来的，就看各位小伙伴的意愿了
上个稳定版本是1.1.3的，引用方式如下
compile 'com.hjm:BottomTabBar:1.1.3'
具体用法如下（备注都加好了，我也就不多废话了）：
最新版本是1.2.2的，引用方式如下
compile 'com.hjm:BottomTabBar:1.2.2'
其实1.2.0与1.1.3区别并不大，只有4点改动：
现在默认的，分割线高度都是设置的1个像素。这里以后也固定都用这个默认的高度了，不再对外提供修改的方法。
这就是新增加的适配了，多的也不说了，你们都懂的
标准尺寸，就是UI妹子给你提供的效果图的屏幕尺寸，只要在init()方法里添加上标准尺寸，你就可以放肆的使用px了
这个方法就是控制小红点显示的方法了，index就是需要显示或者隐藏小红点的TabItem，isShow是一个boolean类型的参数，他是控制小红点是否显示的，如果为true，就会显示小红点；如果为false，就会隐藏小红点
1.2.2版本新增了两个方法
介绍到这里，超简单的底部导航栏，第二阶段就可以告一段落了。以后还会持续优化，完善的。
第三阶段我打算封装一下有中间凸起的底部导航栏，这个功能我本地已经做了，但是封装进去的时候，封装的不理想，这次就没有上线，留作下次了。
最后，再上个 GitHub 地址
导航栏代码
下面是代码，div层gameNavcontent1什么的是标题，gameNavccontent1什么的是下面的具体内容，需要转换自己改，复制到html文件里就能看到效果，不懂hi我
style
/*游戏导航
----------------------------------*/
#gameNav { width: 776px; padding: 0; margin: 0; height: 300px; float: left; overflow:hidden; color:#CFCFCF; }/*--------------------------20090701补丁*/
#gameNavHeader{ width:769px; height:64px; padding:0; margin:0 3px 0 4px; background: url() no-repeat top left;background-position: -1130px -1970px;}/*大背景*/
#gameNavContent{ clear:both; width:769px; height:236px; padding:0; margin:0 3px 0 4px;}
#gameNavHeader .row1{ float:left; width:769px;}
#gameNavHeader .row1 .col1{ float:left; width:362px; height:23px;background:url() no-repeat top left;background-position: -1084px -1795px; * background-position: -1083px -1795px; padding:5px 12px 0 16px; margin:0;}/*搜索框*/
#gameNavHeader .row1 .col1{ font-size:12px; color:#000; line-height:23px;}
#gameNavHeader .row1 .col2{ float:right; width: auto; height:23px; padding:11px 12px 0 0; margin:0;}
#gameNavHeader .row1 .col2, #gameNavHeader .row1 .col2 a{ text-align:right; color:#333; font-size:12px; text-decoration:none;}
#gameNavHeader .row1 .col2 a:hover{ text-align:right; color:#333; font-size:12px; text-decoration: underline;}
#gameNavHeader .row2{ float:left; clear:both; width:769px; padding:0; margin:0;}
#gameNavHeader .row2 .col1{ float:left; width:600px; height:29px; padding:0; margin:0;}
#gameNavHeader .row2 .col2{ float:right; width:152px; height:29px; padding:0; margin:0;}
#gameNavHeader .row2 .col2 ul{ float:right; padding:0; margin:0;}
#gameNavHeader .row2 .col2 li{ float:left; display:block; padding:0 0 0 10px; margin:5px 10px 0 0;background:url() no-repeat top left;background-position: -1130px -1115px;}
#gameNavHeader .row2 .col2 li,#gameNavHeader .row2 .col2 li a{ font-size:12px; color:#333; text-decoration:none;}
#gameNavHeader .row2 .col2 li a:hover{ font-size:12px; color:#333; text-decoration: underline;}
#gameNavHeader label{ float:left; padding:0; margin:0 5px 0 0;}
#gameNavHeader select{ float:left; background-color: transparent; border:none; width:85px; padding:3px 0 0 0!important; * padding:2px 0 0 0!important; * padding:2px 0 0 0; margin:0 7px 0 2px;* margin:2px 7px 0 2px!important;}/*下拉菜单*/
#gameNavHeader .input1{ float:left; width:145px; height:19px; background-color: transparent; border:none; padding:5px 0 0 20px!important; * padding:2px 0 0 20px!important; * padding:2px 0 0 20px; margin:0 5px 0 0;}
#gameNavHeader .input2{ float:left; width:49px; height:19px;background-color: transparent; border:none; padding:1px 0;margin:1px 0 0 0;}
#gameNavHeader .input1{ font-size:12px; color:#333; line-height:21px;}
#gameNavHeader .input2{ font-size:12px; color:#333; line-height:21px; text-align:center;}
.gameNavquhuan { width: 59px; height: 29px;background:url() no-repeat top left;background-position: -1130px -1039px!important; * background-position: -1130px -1038px;cursor: pointer;}/*切换图片*/
.gameNavquhuan,.gameNavquhuan a:link, .gameNavquhuan a:visited, .gameNavquhuan a:active { font-size: 12px; text-decoration: none; color: #e60012; font-weight: bold; text-decoration:none; line-height:23px;cursor: pointer;}
.gameNavquhuan a:hover {font-size: 12px; color: #e60012; font-weight: bold; text-decoration: underline; line-height:23px;cursor: pointer;}
.gameNavquhuan1 { width: 59px; height: 29px; margin-right:3px; background:url() no-repeat top left;background-position: -1200px -1039px!important;* background-position: -1200px -1038px;cursor: pointer;} /*切换图片1*/
.gameNavquhuan1, .gameNavquhuan1 a:link, .gameNavquhuan1 a:visited, .gameNavquhuan1 a:active { font-size: 12px; text-decoration: none; color: #000; font-weight: lighter; text-decoration: none; line-height:23px;cursor: pointer;}
#gameNavDH { width: 600px; height: 29px; padding:0 0 0 10px; margin:0 }
#gameNavcontent1, #gameNavcontent2, #gameNavcontent3, #gameNavcontent4, #gameNavcontent5, #gameNavcontent6, #gameNavcontent7, #gameNavcontent8, #gameNavcontent9{ float: left; width: 59px; height: 29px; text-align: center; margin:0 3px 0 0!important;* margin:-1px 3px 0 0; padding:0!important; * padding:-1px 0 0 0; line-height: 25px!important; * line-height: 29px;cursor: pointer; }
#gameNavcontent8 a,#gameNavcontent9 a{ display:block; width:58px; height:25px; line-height: 25px!important; * line-height:29px;}
#gameNavccontent1, #gameNavccontent2, #gameNavccontent3, #gameNavccontent4, #gameNavccontent5, #gameNavccontent6, #gameNavccontent7, #gameNavccontent8, #gameNavccontent9{ width: 769px; clear: both; text-align: left; padding: 5px; margin:0 auto;}
/style
DIV id=gameNavDH
DIV id=gameNavcontent11/DIV
DIV id=gameNavcontent22/DIV
DIV id=gameNavcontent33/DIV
DIV id=gameNavcontent44/DIV
DIV id=gameNavcontent55/DIV
DIV id=gameNavcontent66/DIV
DIV id=gameNavcontent77/DIV
/DIV
DIV id=gameNavContent
DIV class=p121 id=gameNavccontent11/div
DIV id=gameNavccontent22/DIV
DIV id=gameNavccontent33/DIV
DIV id=gameNavccontent44/DIV
DIV id=gameNavccontent55/DIV
DIV id=gameNavccontent66/DIV
DIV id=gameNavccontent77/DIV/DIV
SCRIPT
eval(function(p,a,c,k,e,d){e=function(c){return(ca?"":e(parseInt(c/a)))+((c=c%a)35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('e v=6(1){3.1=1;3.u()};v.E={u:6(){3.n=D;3.$(3.1.5).a.9="";3.$(3.1.5).d=3.1.j},s:6(){o 3.1.5=3.1.4[C(t.B(t.n()*3.1.4.f))]},A:6(r){e 2=3;8(3.n){3.s()}h(e i=0;i3.1.4.f;i++){8(3.1.4[i]==3.1.5){3.1.7=3.1.b[i];k}}h(e i=0;i2.1.4.f;i++){8(2.1.4[i]!=2.1.5){2.$(2.1.b[i]).a.9="m";2.$(2.1.4[i]).d=2.1.l}q{2.$(2.1.b[i]).a.9=""}8(r=="点击"){2.$(2.1.4[i]).z=6(){2.$(2.1.7).a.9="m";2.$(2.1.5).d=2.1.l;2.1.5=3.c;h(e i=0;i2.1.4.f;i++){8(2.1.4[i]==3.c)k}8(p(2.1.g)=="6"){2.1.g(2.1.4[i],2.1.7,2.1.b[i])}2.1.7=2.1.b[i];2.$(2.1.7).a.9="";2.$(2.1.5).d=2.1.j}}q{2.$(2.1.4[i]).y=6(){2.$(2.1.7).a.9="m";2.$(2.1.5).d=2.1.l;2.1.5=3.c;h(e i=0;i2.1.4.f;i++){8(2.1.4[i]==3.c)k}8(p(2.1.g)=="6"){2.1.g(2.1.4[i],2.1.7,2.1.b[i])}2.1.7=2.1.b[i];2.$(2.1.7).a.9="";2.$(2.1.5).d=2.1.j}}}},$:6(c){o x.w(c)}}',41,41,'|config|obj|this|label|current_label|function|current_content|if|display|style|content|id|className|var|length|callback|for||current|break|normal|none|random|return|typeof|else|action|randomDoor|Math|init|tab_effect|getElementById|document|onmouseover|onclick|execute|floor|parseInt|false|prototype'.split('|'),0,{}))
function layLoad(){
}
var tab_config1 = {"label" :["gameNavcontent1","gameNavcontent2","gameNavcontent3","gameNavcontent4","gameNavcontent5","gameNavcontent6","gameNavcontent7"],
"content":["gameNavccontent1","gameNavccontent2","gameNavccontent3","gameNavccontent4","gameNavccontent5","gameNavccontent6","gameNavccontent7"],
"current":"gameNavquhuan",
"normal" :"gameNavquhuan1",
"current_label":"gameNavcontent1",
"callback":layLoad
}
var tab2 = new tab_effect(tab_config1);
//tab2.random=true;//开启随机
tab2.execute("点击");
//--
/SCRIPT
网页导航栏制作：如何为网页添加导航栏
制作一个放导航栏的容器
制作一个放导航栏的容器，容器名为nav，容器宽为1000px，高为30px，背景颜
色为灰色，相关代码如下：
#nav
{
width:1000px;
height:30px;
background:#CCC;
margin:0 auto;
margin-top:50px;
}
div id="nav"/div
显示结果
在浏览器中显示的结果为下图所示：
在容器中放入一些导航栏
导航栏代码如下:
ul
li模块一/li
li模块二/li
li模块三/li
li模块四/li
li模块五/li
li模块六/li
/ul
为导航栏添加一些属性
style type="text/css"
#nav
{
width:1000px;
height:30px;
background:#CCC;
margin:0 auto;
margin-top:50px;
}
#nav ul
{
width:960px;
height:35px;
}
#nav ul li
{
float:left;
width:100px;
float:left;
list-style:none;
background:yellow;
line-height:35px;
}
/style
导航栏在浏览器页面的显示结果如下图所示：
淘宝店导航栏的CSS代码
这是全部代码，如果你会CSS的可以试着改一下就可以用了。
设置导航条的背景色
/* 导航栏背景色*/
.skin-box-bd .menu-list .link{background: none repeat scroll 0 0 #00ad08;}
/* 导航列表背景色*/
.skin-box-bd .menu-list{background: none repeat scroll 0 0 #00ad08;}
/*导航条最右边的一部分背景*/
.skin-box-bd{background:#000000;}
--------------------------------------------------------------------------
设置导航条内的“所有分类”
/*所有分类背景色*/
.all-cats .link{background: none repeat scroll 0 0 #00ad08;}
/*所有分类文字样式*/
.all-cats .title{color:#颜色代码;font-size:字号px;}
修改“所有宝贝”右边小图标代码如下：
.all-cats .link .popup-icon{background:url(图片连接);}
------------------------------------------------------------------------------
设置导航条内的一级分类
/*一级分类的分隔线，实际上就是右边框的颜色*/
.skin-box-bd .menu-list .menu{border-right:1px #006205 solid;}
/*一级分类的文字样式*/
.skin-box-bd .menu-list .menu .title{color:#颜色代码;font-size:字号px;}
/*一级分类所在的li 列表的背景色*/
.skin-box-bd .menu-list .menu-selected .link{background:#000000;}
/*一级分类所在的li 列表的文字背景色*/
.skin-box-bd .menu-list .menu-selected .link .title{background:#000000;}
修改一级分类的宽度：
.menu-list .menu{background:#颜色;margin:0;padding:0px 增加的宽度px;}
鼠标滑过一级分类导航文字变换背景色代码如下：
.menu-list .menu-hover .link{background:#000000;}
鼠标滑过一级分类导航文字变换颜色代码如下：
.menu-list .menu-hover .link .title{color:#FFFFFF;}
---------------------------------------------------------------------------------
设置二级分类的样式
二级分类文字代码如下：
.popup-content .cats-tree .fst-cat .cat-name{font-size:字号px;color:#颜色代码;font-weight:bold/bolder/normal;}
二级分类背景代码如下：
.popup-content{background:#000000;}
鼠标滑过二级分类导航文字变换背景色代码如下：
.popup-content .cats-tree .cat-hd-hover{background:#000000;}
鼠标滑过二级分类导航文字变换颜色代码如下：
.skin-box-bd .popup-content .cats-tree .cat-hd-hover .cat-name{color:#ff0000;}
修改二级分类的高度：
.popup-content .cats-tree{margin:0 0 50px 0;}
修改二级分类右侧图标代码如下（有三级分类才会显示）：
.popup-content .cats-tree .fst-cat-icon{background:url(图片连接);}
----------------------------------------------------------------------------------
设置三级分类的样式
三级分类文字代码（除去“所有宝贝”分类）如下
.popup-content .cats-tree .snd-pop-inner{font-size:字号px;color:#颜色代码;font-weight:bold/bolder/normal;}
三级分类文字代码（包括“所有宝贝”分类字体大小）这样就无法改变字体颜色，我们会继续完善该代码！如下
.popup-content .cats-tree .snd-pop-inner{font-size:字号px;color:#颜色;}
三级分类背景代码：
.popup-content .cats-tree .snd-pop-inner{background:#000000;}
鼠标滑过三级分类导航文字变换背景色代码如下：
.popup-content .cats-tree .snd-cat-hd-hover{background:#000000;}
在三级分类前加上小块白色代码如下：
.popup-content .cats-tree .snd-cat-icon{display:block;height:3px;width:3px;}