实现需求是：当处于某个分类下，或者在内容详情页时，上一级分类及一级分类，所在导航的分类要实现自动高亮，有点类似当前位置，对用户起到提示作用，告诉用户当前浏览的是哪一个分类，在网站的什么位置。同时导航是响应式的，对于PC和移动端能够自适应；所以使用了bootstrap 4.4和结合dedecms自动添加current的功能，之前分享过一篇子栏目的技术文章，本次是导航栏的全部代码，可以直接使用哦。

如上图所示，此时在内容详情页，对应的一级分类导航也处于高亮状态，这个对用户体验很好，一眼就可以看到自己在网站的哪一个分类下面。如果用户的当前位置在一级分类下面的某一个二级分类也是一样的效果。

一、HTML响应式代码

我的这端代码是整个导航，只调用了dedecms系统的一级分类，可以放在head.htm中直接用，为了不太会dedecms系统标签的使用，所以全部都贴出来吧。

1.<nav class="navbar navbar-expand-lg navbar-light bg-white">

2.<div class="container-xl"> <a class="navbar-brand" href="{dede:global.cfg_cmsurl/}/">{dede:global.cfg_webname/}</a>

3.<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample07" aria-controls="navbarsExample07" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>

4.<div class="collapse navbar-collapse" id="navbarsExample07">

5.<ul class="navbar-nav mr-auto">

6.{dede:channel type='top' row='10' currentstyle="

7.<li><a class='current' href='~typelink~' ~rel~>~typename~</a></li>"}

8.<li><a href='[field:typeurl/]' [field:rel/]>[field:typename/]</a></li>

9.{/dede:channel}</ul>

10.<form class="form-inline my-2 my-md-0" name="formsearch" action="{dede:global.cfg_cmsurl/}/plus/search.php">

11.<div class="input-group">

12.<input type="hidden" name="kwtype" value="0" />

13.<input name="q" type="text" class="form-control" id="search-keyword" value="在这里搜索……" onfocus="if(this.value=='在这里搜索……'){this.value='';}"onblur="if(this.value==''){this.value='在这里搜索……';}" />

14.<div class="input-group-append">

15.<button type="submit" class="btn btn-outline-secondary dq-navs">搜索</button></div></div></form>

16.</div></div></nav>

其中第5~9行是dedecms的一级分类调用标签，其他的是bootstrap导航代码，如使用的不是dedecms系统，只要把5~9行替换成对应的数据调用即可。

二、自定义css代码

因为默认bootstrap没有激活状态下颜色等直接可用的代码，需要自定义写几行css，下面是自定义样式代码，先将其拷贝到Dreamweaver等编辑器里面格式化一下，看起来就会很清爽了。

a.@media (min-width: 992px) and (max-width:1200px) {.navbar-collapse > .form-inline > .input-group > .form-control {width: 9rem ！important}}

b.@media (max-width: 992px) {.navbar-collapse .mr-auto{margin-top: .5rem}.navbar-collapse .mr-auto li:nth-of-type(2n-1){background: #eee;}}

c.navbar-collapse .mr-auto li a{color: rgba(0, 0, 0, 0.9);display: block;padding: 0.5rem 0.5rem;}

d.navbar-collapse .mr-auto li a:hover,.navbar-collapse .mr-auto li a:active,.navbar-collapse .mr-auto li a:focus{color: #fff;background: #c1962f;text-decoration: none;border-radius: .2rem;}

f.navbar-collapse .mr-auto li > .current{background: #af8a33;color: #fff;border-radius: .2rem;}

bootstrap版本是4.4，直接复制使用的话注意不能使低于此版本，默认实现了移动端的样式。

录制了一个gif演示，因为我的首页模板还没有做出来，当前只是完成了部分栏目和详情页的设计制作，移动端在后面，处于栏目的分类下时也是有效果的，具体可以拷贝代码在本地测试。

本文由岑辉宇博客整理发布，微信搜索微信公众号“岑辉宇 ”可查看更多内容。