|
引用 | 编辑
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
|
|||||||||||||
