來源 : 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 內的檔案至模版資料夾覆蓋原檔


**先說明一下此作法我還沒時間去測試,您若真要使用請一定要先備份.