|
引用 | 編輯
n5998744
2010-11-30 22:12 |
樓主
|
||||||||||||
x0
在網路搜索了一整天，對於製作導航欄二級菜單的教學，大部分都不完整或有所保留，要不必是天下文章一大抄，也不管文章可不可用，後來在香蕉童裝站長的協助下，終於找到一篇可用的文章，由於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 內的檔案至模版資料夾覆蓋原檔 **先說明一下此作法我還沒時間去測試,您若真要使用請一定要先備份.
 x0
|
|||||||||||||
