来源 : ec shop 制作导航栏垂直和水平选单
在网路搜索了一整天，对于制作导航栏二级菜单的教学，大部分都不完整或有所保留，要不必是天下文章一大抄，也不管文章可不可用，后来在香蕉童装站长的协助下，终于找到一篇可用的文章，由于EC的JS与Jquery冲突，无法使用Jquery，对Javascript不熟的我来说，非常不方便。 经过一番修改之后，可以很方便的选择使用垂直或水平选单（CSS内有注解），就算你不懂程式，也可以很方便使用。

垂直选单


水平选单



1、在模版资料夹 library/page_header.lbi 对应的位置（以 2.7.0 default 模版为例）：
约28～33行
<div id="mainNav" class="clearfix">
<a href="../index.php"{if $navigator_list.config.index eq 1} class="cur"{/if}>{$lang.home}<span></span></a>
<!– {foreach name=nav_middle_list from=$navigator_list.middle item=nav} –>
<a href="{$nav.url}" {if $nav.opennew eq 1}target="_blank" {/if} {if $nav.active eq 1} class="cur"{/if}>{$nav.name}<span></span></a>
<!– {/foreach} –>
</div> 替换成：
(注意下面的"themes/default/util.php"中的"default"改成你模版资料夹的名称)
<?php
require_once("themes/default/util.php");
?>
<div id="header-menu">
<p {if $navigator_list.config.index eq 1} class="cur" {/if}><a href="../index.php">{$lang.home}</a></p>
<ul>
<!– {foreach name=nav_middle_list from=$navigator_list.middle item=nav} –>
<li onMouseOver="sw_nav(this,1);" onMouseOut="sw_nav(this,0);" {if $nav.active eq 1} class="curs"{/if}><a href="{$nav.url}" {if $nav.opennew eq 1}target="_blank" {/if}>{$nav.name}</a>
<?php
$subcates = get_subcate_byurl($GLOBALS['smarty']->_var['nav']['url']);
if($subcates!=false){
if(count($subcates)>0){
echo "<div class=’sub_nav’>";
if($subcates){
foreach($subcates as $cate){
echo "<a href=’".$cate['url']."’ class=’level_1′>".$cate['name']."</a>"; 　
}
}
echo "</div><div class=’nomask’></div>";
}
}
?>
</li>
<!– {/foreach} –>
</ul>
</div>
<script type="text/javascript">
//初始化主菜单
function sw_nav(obj,tag){
var subdivs = obj.getElementsByTagName("DIV");
var ifs = obj.getElementsByTagName("IFRAME");
if(subdivs.length>0){
if(tag==1){
subdivs[0].style.display = "block";
ifs[0].style.display = "block";
} else {
subdivs[0].style.display = "none";
ifs[0].style.display = "none";
}
}
}
</script>
2、在模版资料夹的样式表（CSS）最后加入：
/*导航列*/
#header-menu {background:url(images/middle_atv.gif) repeat-x;height:30px;line-height:30px;}
#header-menu p, #header-menu ul li{float:left;}
#header-menu ul li a,#header-menu p a{color: #fff;display:block;text-decoration:none;line-height:25px;padding:0 10px;}
#header-menu ul li a:hover,#header-menu p a:hover{color:#333;background:url(images/middle_hover.gif);}
#header-menu ul li.curs a{color:#f00;background:url(images/middle_bg.gif);}
/*子选单*/
.sub_nav{ background:url(images/middle_bg.gif);min-width:100px;height:auto;line-height:30px; position:absolute; z-index:5003; display:none;}
.nomask{ position:absolute; z-index:5002;display:none;margin-left:-12px;height:25px;}
/*使用垂直选单请将 float:left; 注解掉*/
.sub_nav a.level_1{ float:left;display:block;padding:6px 6px 6px 13px;font:11px Tahoma,Verdana,PMingLiU,Arial;border-bottom:1px dotted #D1D1D1;*border-bottom:1px dotted #D1D1D1 !important;*border-bottom:1px solid #A8A8A8;text-decoration:none;background:url(images/middle_atv.gif);}
.sub_nav a.level_1:hover{text-decoration:none;} 3、上传 upload 内的档案至模版资料夹覆盖原档


**先说明一下此作法我还没时间去测试,您若真要使用请一定要先备份.