编辑“MetInfo导航条制作”

<span style="border:1px solid #000; float:right; text-align:center; padding:6px;"><strong>导航：</strong>[[MetInfo模板制作#常用效果制作|返回上一页]]</span>
<div style="clear:both;"></div>
==头部导航条==

===标签化方法制作===
'''第一种显示方式（简单导航条）'''

结合[[CSS]]控制，可以实现如下效果：
<div>
[[Image:metinfo90.png]]
</div>
[[HTML]]代码：
<pre>
<!-- 
EOT; 
$metnavtop=methtml_topnav('1','|'); 
echo <<<EOT 
--> 
<div class="nav"><div class="nav1">$metnavtop</div></div> 
</pre>

css代码： 
<pre>
.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;} 
</pre>

'''第二种显示方式（带切换特效）'''

结合CSS控制，可以实现如下效果：
<div>
[[Image:metinfo91.png]]
</div>
HTML代码：
<pre>
<!-- 
EOT; 
$metnavtop=methtml_topnav('2','','9'); 
echo <<<EOT 
--> 
<div class="nav">$metnavtop</div> 
</pre>

css代码： 
<pre>
.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;} 
</pre>

'''第三种显示方式（纵向显示二级导航）'''

结合CSS控制，可以实现如下效果：
<div>
[[Image:metinfo92.png]]
</div>
HTML代码： 
<pre>
<!-- 
EOT; 
$metnavtop=methtml_topnav('3','','8'); 
echo <<<EOT 
--> 
<div class="nav">$mettopnav</div> 
</pre>

css代码： 
<pre>
.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;} 
</pre>

'''第四种显示方式（横向显示二级导航）'''

结合CSS控制，可以实现如下效果：
<div>
[[Image:metinfo93.png]]
</div>
HTML代码： 
<pre>
<!-- 
EOT; 
$metnavtop=methtml_topnav('4','','8'); 
echo <<<EOT 
--> 
<div class="nav">$mettopnav</div> 
</pre>

css代码： 
<pre>
.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; } 
</pre>

===标准PHP代码方法制作===
以显示纵向二级栏目导航条制作为例：
<pre>
<div class="menu"> 
<div class="menu_ul menu_ul1"><a href="$index_url" id="nav_0">{$lang_home}</a></div> //首页 
<!-- 
EOT; 
$i=0; 
foreach($nav_list as $key=>$val){ //循环头部导航栏目列表数组 
$i++; 
echo <<<EOT 
--> 
<div class="menu_ul" onmouseover="show($i);" onMouseOut="showout($i);"> 
<a href="$val[url]" $val[new_windows] title="$val[name]" id="nav_$val[id]" >$val[name]</a> 
<div class="menu_li" style="display:none" id="div_$i" > 
<!-- 
EOT; 
foreach($nav_list2[$val[id]] as $key=>$val2){ //循环当前栏目中的二级栏目列表数组 
$val2[name]=utf8substr($val2[name], 0, $lang_navnum1); //截取二级栏目标题字数 
echo <<<EOT 
--> 
<li><a href="$val2[url]" $val2[new_windows] title="$val2[name]">$val2[name]</a></li> 
<!-- 
EOT; 
} 
echo <<<EOT 
--> 
</div> 
</div> 
<!-- 
EOT; 
if($i>=9)break; //当一级栏目大于9时跳出 
} 
echo <<<EOT 
--> 
<SCRIPT language=JavaScript type=text/JavaScript>  
         document.getElementById('$navdown').className="navdown"; 
</SCRIPT> 
<script type="text/javascript">  
     function show(id){ 
       if (document.getElementById("div_"+id).style.display == "") 
       { 
        document.getElementById("div_"+id).style.display = "none"; 
       } 
      else 
      { 
       document.getElementById("div_"+id).style.display = ""; 
       } 
     } 
   function showout(id){ 
      if (document.getElementById("div_"+id).style.display == "none") 
      { 
        document.getElementById("div_"+id).style.display = ""; 
      } 
     else 
     { 
       document.getElementById("div_"+id).style.display = "none"; 
     } 
   } 
</script> 
<div style="clear:both;"></div> 
</div>
</pre>

==尾部导航条==
结合CSS控制，可以实现如下效果：
<div>
[[Image:metinfo94.png]]
</div>
HTML代码：
<pre>
<!-- 
EOT; 
$metfootnav=methtml_footnav(' | '); 
echo <<<EOT 
--> 
<div class="footnav">{$metfootnav}</div> 
</pre>

css代码： 
<pre>
.footnav{ width:1000px; height:20px; border-bottom:1px solid #8B0000; padding-top:10px; margin-top:3px; } 
</pre>

==横向导航条（当前位置）==
结合CSS控制，可以实现如下效果：
<div>
[[Image:metinfo95.png]]
</div>
HTML代码：
<pre>
<div class="nav_x">&nbsp;<a href='$index_url'>{$lang_home}</a> > $nav_x[name]</div> 
</pre>

css代码： 
<pre>
.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;} 
</pre>
更换$nav_x[name]中的元素可以控制导航显示的内容，如$nav_x[2]只显示当前栏目。

==边栏导航条==
结合CSS控制，可以实现如下效果：
<div>
[[Image:metinfo96.png]]
</div>
HTML代码：
<pre>
<!-- 
EOT; 
$metproductsearch=methtml_parasearch('product'); 
echo <<<EOT 
--> 
<div class="nav_x1">$class1_info[name]</div> 
<div class="navright">{$metrightnav}</div> 
</pre>

css代码：
<pre>
.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;} 
</pre>





[[category:MetInfo]]