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

来源：互联网发布：c语言怎么判断奇偶数编辑：程序博客网时间：2024/05/22 08:45

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

OK,搞定

效果(具体样式可根据自己的模板需求修改CSS部分)：