Typecho添加导航栏在当前页的选中状态

导航栏选中状态

在有的主题模板里可以看到,打开导航栏页面的时候,导航栏会有被选中的状态,可以清楚的知道当前所在的是哪个页面,既美观又实用(不是鼠标悬停的效果哦)
在研究了以后发现,想实现这个功能其实并不难,那么需要怎么做呢?
接下来就以本主题为例,来作为本文章的例子

添加 CLASS 属性

<li> 标签或 <a> 标签里添加 class 属性,一般名称为 current

<ul id="menu-nav">
            <li class="<?php if($this->is('index')): ?>current current-menu-item<?php endif; ?> <?php if($this->is('post')): ?>current<?php endif; ?>"><a  href="<?php $this->options->siteUrl(); ?>"><?php _e('首页'); ?></a>
            </li>
            <?php $this->widget('Widget_Metas_Category_List')->to($category); ?>
            <?php while($category->next()): ?>
            <li <?php if($this->is('category', $category->slug)): ?> class="current current-menu-item"<?php endif; ?>><a href="<?php $category->permalink(); ?>" title="<?php $category->name(); ?>"><?php $category->name(); ?></a>
            </li>
            <?php endwhile; ?>
</ul>

添加CSS样式

.current {
    background: #1BA6B2;
    text-decoration: none;
    position: relative;
}

是不是很简单呢?

文章最后编辑时间:2018-12-15 09:12
发表评论