MetInfo导航条制作
查看全部专题命名空间：Main
导航：返回上一页
头部导航条
标签化方法制作
第一种显示方式（简单导航条）结合CSS控制，可以实现如下效果：
HTML代码：
css代码：
.nav{ width:100%; height:30px; background:url(../navblue.gif) repeat-x 0px 0px;}
.nav1{height:30px; width:1000px; margin:0 auto; display: block; overflow:hidden; color:#FFFFFF; text-align:left; line-height:30px; font-size:13px;}
.nav1 a{ color:#FFFFFF; padding:0px 21px 0px 21px;}
.nav1 a:hover{ color:#003366; background-color:#ffffff;}
第二种显示方式（带切换特效）
结合CSS控制，可以实现如下效果：
HTML代码：
css代码：
.nav{ position:absolute; right:0px; bottom:0px; width:100%; height:25px; }
.nav li{ list-style:none; float:left;}
.nav .navdown{ width:99px; text-align:center; float:left; background-image:url(../nav2.gif); height:25px; border-left:1px solid #FFFFFF;
line-height:25px; color:#003399; font-weight:bold;}
.nav .navdown a{color:#003399;}
.nav .navup{ width:99px; text-align:center; float:left; background-image:url(../nav1.gif); height:25px; border-left:1px solid #FFFFFF;
line-height:25px; color:#FFFFFF; font-weight:bold;}
.nav .navup a{color:#FFFFFF;}
第三种显示方式（纵向显示二级导航）
结合CSS控制，可以实现如下效果：
HTML代码：
css代码：
.nav1{float:left; width:75px; height:35px; text-align:center; position:relative; padding-left:2px; background:url(../menu_line.gif) no-repeat left
top; }
.nav1 a{display:block; color:#FFFFFF; font-weight:bold; padding-right:2px; }
.nav1 a:hover{ background:url(../lia_bg.gif) repeat-x; color:#FFFFFF;}
.nav2{position:absolute; top:34px; left:0px; *left:-14px; }
- +html .nav2{top:30px;}
.nav2 li{list-style-type:none; width:120px; height:25px; border-bottom:1px solid #FFFFFF;}
- +html .nav2 li{margin-bottom:-9px;}
.nav2 li a{background:#045aa7; color:#FFFFFF; height:25px; border-top:none; line-height:25px; font-weight:normal;}
.nav2 li a:hover{font-weight:bold; background:#045aa7; border-top:none;}
a.navdown{background:url(../lia_bg.gif) repeat-x 0px 0px;}
第四种显示方式（横向显示二级导航）
结合CSS控制，可以实现如下效果：
HTML代码：
css代码：
.nav{height:73px; background:url(../menu_bg.gif) repeat-x bottom left; position:relative; }
.nav ul{overflow:hidden; margin-left:5px;}
.nav ul li.navl{float:left; height:35px;}
.nav ul li.navl a{float:left; display:block; padding-left:6px; height:35px; background:url(../menu_on_left.gif) no-repeat left top; cursor:pointer;
text-decoration:none;}
.nav ul li.navl a span{float:left; padding:11px 14px 10px 10px; line-height:14px; background:url(../menu_on_right.gif) no-repeat right top;
font-size:14px; font-weight:bold; color:#FFFBF0;text-decoration:none; }
li.navl a.navdown{background-position:left 100% !important; }
li.navl a.navdown span{background-position:right 100% !important; color:#333333 !important; text-decoration:none !important; padding:14px 14px 7px
10px !important;}
ul.nav2{position:absolute !important; left:20px !important; bottom:8px !important; }
ul.nav2 li{float:left !important; height:22px !important;}
ul.nav2 li a span{float:left !important; display:block !important; padding:6px 10px 4px 10px !important; line-height:12px !important;
background:url(../menu_on_right2.gif) no-repeat right top !important;}
ul.nav2 li a span{font-weight:normal !important; color:#333333 !important; font-size:12px !important;}
ul.nav2 li a{display:block !important; float:left !important; background:url(../menu_on_left2.gif) no-repeat left top !important; cursor:pointer
!important; padding-left:3px !important;}
ul.nav2 li a{padding-bottom:0px !important; padding-right:0px !important; padding-top:0px !important; height:22px !important;}
ul.nav2 li a:hover{text-decoration:none !important; background:url(../menu_on_left2.gif) no-repeat left bottom !important; }
ul.nav2 li a:hover span{background:url(../menu_on_right2.gif) no-repeat right bottom !important; color:#FF6600 !important; }
标准PHP代码方法制作
以显示纵向二级栏目导航条制作为例：尾部导航条
结合CSS控制，可以实现如下效果：
{$metfootnav}
css代码：
.footnav{ width:1000px; height:20px; border-bottom:1px solid #8B0000; padding-top:10px; margin-top:3px; }
横向导航条（当前位置）
结合CSS控制，可以实现如下效果：
css代码：
.nav_x{ width:100%; font-size:13px; height:30px; font-weight:bold; text-align:left;
line-height:30px; background-color:#E9E9E9; color:#990000; border-bottom:1px solid #8B0000;}
.nav_x a{color:#990000;}
更换$nav_x[name]中的元素可以控制导航显示的内容，如$nav_x[2]只显示当前栏目。
边栏导航条
结合CSS控制，可以实现如下效果：
css代码：
.navright{ width:192px; height:auto; overflow:auto; line-height:25px; text-align:left; }
.navright font a{color: #666666;}
.navright li { width:152px; height:25px; background-color:#EFEFEF; list-style:none; margin:0px 0px 0px 0px; padding:0px 0px 0px 40px;
font-weight:bold;}
.navright .li_class2{ background:url(../class2.gif) no-repeat 18px 5px; color:#CC0000; background-color:#F1F1F1; border-bottom:1px solid #FFFFFF;}
.navright .li_class2 a{color:#990000;}
.navright .li_class3{ background:url(../class3.gif) no-repeat 35px 5px; padding:0px 0px 0px 57px; width:135px; font-weight:normal;}
.navright .classnow{ background:url(../class3.gif) no-repeat 18px 5px; color:#CC0000; background-color:#D3D3D3; border-bottom:1px solid #FFFFFF;}
.navright .classnow a{color:#990000;}