XOOPS China - 简易横向导航制作心得 [技术论坛

XOOPS China 讨论区 > XOOPS Theme (主题) > 主题制作 > 简易横向导航制作心得

正在浏览： 1 名游客

到底部

前一个主题

下一个主题 [无发表权] 请登录或者注册

mooyi

简易横向导航制作心得

新进会员

注册日期:
2009/8/16 22:35

来自北京

所属群组：
注册会员

帖子: 16

等级： 2; EXP： 74
HP： 0 / 43
MP： 5 / 165

HTML部分



<div id="navigation">

  <ul id="nav">

    <li<{if $xoops_dirname == 'system'}> class="current"<{/if}>> <a href="<{xoAppUrl /}>">首页</a></li>

    <li<{if $xoops_dirname == 'press'}> class="current"<{/if}>> <a href="<{xoAppUrl modules/press/}>">新闻动态</a></li>

    <li<{if $xoops_dirname == 'catalog'}> class="current"<{/if}>> <a href="<{xoAppUrl modules/catalog/}>">产品中心</a></li>

    <li<{if $xoops_dirname == 'about'}> class="current"<{/if}>> <a href="<{xoAppUrl modules/about}>">关于我们</a></li>

    <li<{if $xoops_dirname == 'links'}> class="current"<{/if}>> <a href="<{xoAppUrl modules/links}>">友情链接</a></li>

  </ul>

</div>

CSS部分



#nav {

    width:auto;

    padding:0;

    margin-bottom:2px;

    list-style:none;

    height:30px;

    background-color:#F0F0F0;

    float:left;

}





#nav li{

    float:left;

}



#nav li a{

    height:30px;

    line-height:30px;

    overflow:hidden;

    display:block;

    width:100px;

    text-decoration:none;

    color:#000;

    text-align:center;

    border-left:1px solid #FFF;

    border-right:1px solid #FFF;

}



#nav li a:hover{

    background-color:#2A75C5;

    height:30px;

    line-height:30px;

    overflow:hidden;

    display:block;

    text-decoration:none;

    color:#FFF;

    border-left:1px solid #FFF;

    border-right:1px solid #FFF;

}



#nav .current a {

    background-color:#2A75C5;

    height:30px;

    line-height:30px;

    overflow:hidden;

    display:block;

    text-decoration:none;

    color:#fff;

}

说明部分
本例重点
1、当前页面高亮显示判断语句
<{if $xoops_dirname == 'about'}> class="current"<{/if}>
2、模块链接地址
<{xoAppUrl modules/×××/}>
注：×××代表模块名称
如<{xoAppUrl modules/about}>

附件: