zblog教程 内容:90

zblog网站导航菜单栏当前页面高亮

  • 查看作者
  • zblog导航菜单栏高亮,当用户访问首页,访问分类页,访问文章页,访问单页,访问标签,会自动给导航添加 class="active" 选择器,我们可以定义这个样式,比如红色,比如下划线...这就是高亮。

    zblog网站导航菜单栏当前页面高亮 zblog 第1张图片

    使用方法

    JS

    付费资源

    您需要注册登录后通过购买才能查看!

    PS:创建并引用js到模板header.php头部文件head里面。

    html
    <div id="monavber" data-type="{$type}" data-infoid="{if $type=='category'}{if $category.RootID}{$category.RootID}{else}
    {$category.ID}{/if}{/if}{if $type=='article'}{if $article.Category.RootID}{$article.Category.RootID}{else}
    {$article.Category.ID}{/if}{/if}{if $type=='page'}{$article.ID}{/if}{if $type=='tag'}{$tag.ID}{/if}">
    <ul class="navbar">
    <li id="navbar-item-index"><a href="/">首页</a></li>
    <li id="navbar-category-1"><a href="/">分类</a></li>
    <li id="navbar-page-1"><a href="/" >单页</a></li>
    <li id="navbar-tag-1"><a href="/">标签</a></li>
    </ul>
    </div>

    PS:ul必须添加  class="navbar" 选择器,外面div一定要加上,这里是判断页面属于什么页的。

    PS:li标签可以用 {module:navbar} 这个代替。后台模块管理,导航栏,把 li 放进去,方便管理。

    适配

    首页:id="navbar-item-index"

    分类:id="navbar-category-1"

    单页:id="navbar-page-1"

    标签:id="navbar-tag-1"

    PS:分类,单页,标签,后面这个1是代表页面ID,这个根据你的页面ID对应设置即可。

    css
    .active{
    #00c2c3;
    }

    PS:这里css我就不写了,相当于列出来个实例。因为每个主题不一样,请根据自己主题进行颜色字体...高亮搭配。

    请登录之后再进行评论

    登录
    最新评论
    199U币
    已有632人浏览, 0人付费购买, 浏览收益0, 礼物收益0, 打赏收益0, 点赞收益0, 广告收益0, 付费收益0, 获得总收益0U币
    也可开通会员全场文章免费看
    立即购买