廣告廣告
  加入我的最愛 設為首頁 風格修改
首頁 首尾
 手機版   訂閱   地圖  簡體 
您是第 6804 個閱讀者
 
發表文章 發表投票 回覆文章
  可列印版   加為IE收藏   收藏主題   上一主題 | 下一主題   
n5998744
個人文章 個人相簿 個人日記 個人地圖
版主
級別: 版主 該用戶目前不上站
版區: ECShop 討論區
推文 x62 鮮花 x97
分享: 轉寄此文章 Facebook Plurk Twitter 複製連結到剪貼簿 轉換為繁體 轉換為簡體 載入圖片
推文 x0
[插件][2.7.0] ec shop 製作導航欄垂直和水平選單
來源 : 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 內的檔案至模版資料夾覆蓋原檔


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


本帖包含附件
zip navmenu.rar   (2022-06-09 14:16 / 90 KB)   下載次數:19



獻花 x0 回到頂端 [樓 主] From:台灣中華電信 | Posted:2010-11-30 22:12 |

首頁  發表文章 發表投票 回覆文章
Powered by PHPWind v1.3.6
Copyright © 2003-04 PHPWind
Processed in 0.026888 second(s),query:15 Gzip disabled
本站由 瀛睿律師事務所 擔任常年法律顧問 | 免責聲明 | 本網站已依台灣網站內容分級規定處理 | 連絡我們 | 訪客留言