ecshop简单三部实现导航分类二级菜单

1.在page_header.lbi对应的位置(你想显示导航的位置)插入

  (注意下面的"themes/模板名称/util.php"中的"模板名称"改成你模板文件夹的名称)

<?php

    require_once("themes/模板名称/util.php");

?>

<div class="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><iframe frameborder='0' scrolling='no' class='nomask'></iframe>";

                            }

                        }

                             ?>

                   </li>

                 <!-- {/foreach} -->

            </ul>

      <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>

</div>

 

2.在CSS文件中插入 .header-menu p{ float:left;padding:1px 12px 1px 0;margin-top:-2px;}

.header-menu  ul li{float:left;padding:1px 12px 1px 12px;margin-top:-2px;}

.header-menu ul li a,.header-menu p a{color: #333;display:block;}

.header-menu ul li a:hover,.header-menu p a:hover{color:#888;}

.header-menu ul li.curs{background:#999;}

.header-menu ul li.curs a{color:#fff;}

 

.sub_nav{ background:#999;width:110px; position:absolute; z-index:5003; display:none;margin-left:-12px;}

.nomask{ background:#fff; width:110px; height:50px; position:absolute; z-index:5002;display:none;margin-left:-12px;}

.sub_nav a.level_1{ display:block;color:#fff;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;}

.sub_nav a.level_1:hover{color:#fff;background:#55B46C;text-decoration:none;}

 

3.把附件中的文件(util.zip)解压出来拷贝到模板目录下

util.zip:http://u.115.com/file/clg0tzo3
OK,搞定
效果(具体样式可根据自己的模板需求修改CSS部分):


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值