Meteor博客

随笔记录点滴

destoon导航下拉二级菜单实现方法

destoon导航下拉二级菜单实现方法


第一步:template/default/header.htm  替换原来的菜单代码:

<div class="m">
<div id=daohang>
  <li class="tab home"><a href="{$MODULE[1][linkurl]}" class="tablink {if $moduleid<4}menuon{/if}">首 页</a><
>
{loop $MODULE $m}
  {if $m[ismenu]}
  <li class="tab dropdown"><a href="{$m[linkurl]}" class="tablink arwlink {if $m[moduleid]==$moduleid}menuon{/if}">{$m[name]}</a>
          <ul class="subnav">
     {php $child = get_maincat(0, $m[moduleid],1);}
                {loop $child $c}
            <a href="{$m[linkurl]}{$c[linkurl]}">{set_style($c[catname], $c[style])}</a>
       
             {/loop}
          </ul>
  <
>{/if}
    {/loop}
 
</div>
</div>




第二步:在/skin/default/style.css最后面加上以下内容: 
/* 全站导航 */#daohang{width:980px;height:36px;background:#00CC00;margin-bottom:2px;position:relative;z-index:99}#daohang a{        text-decoration: none !important;}.home{margin-left:16px}.tab{position:relative;display:block;float:left;cursor:pointer}.tab .tablink{position:relative;padding:1px 12px;line-height:34px;display:block;height:34px;color:#fff;font-size:16px;z-index:99;float:left}.tab .tablink a{line-height:34px;color:#FFF;text-decoration:none}.tab:hover{background:#FFF}.tab:hover .tablink{color:#009900;border:1px solid #009900;padding:0 11px;text-decoration:none}.tab:hover .tablink a{color:#009900}.dropdown:hover .arwlink{border-bottom:1px solid #FFF;border-left:1px solid #009900;height:35px}.dropdown ul{display:none}.dropdown:hover ul{position:absolute;display:block;margin-left:-1px;top:36px;left:1px;z-index:9}.subnav{width:100px}.subnav a{padding:4px 0 4px 10px;line-height:18px;width:90px;display:block;white-space:nowrap;color:#333;float:left}.subnav :hover{text-decoration:underline;color:#fff; background:#00CC00;}.dropdown .subnav{background:#FFF;border:1px solid #009900;padding:8px}#daohang .menuon{        font-weight: bold;        }


发表评论:

Copyright Dmkiss.com Rights Reserved. 阿里云提供支持

Powered By Z-BlogPHP 1.6.4 Valyria