实现需求是：当处于某个分类下，大概在内容详情页时，上一级分类及一级分类，地点导航的分类要实现主动高亮，有点雷同当前位置，对用户起到提示作用，报告用户当前欣赏的是哪一个分类，在网站的什么位置。同时导航是相应式的，对付PC和移动端可以或许自顺应；以是利用了bootstrap 4.4和联合dedecms主动添加current的功效，之前分享过一篇子栏目标技能文章，本次是导航栏的全部代码，可以直接利用哦。
如上图所示，此时在内容详情页，对应的一级分类导航也处于高亮状态，这个对用户体验很好，一眼就可以看到本身在网站的哪一个分类下面。假如用户的当前位置在一级分类下面的某一个二级分类也是一样的结果。
一、HTML相应式代码
我的这端代码是整个导航，只调用了dedecms体系的一级分类，可以放在head.htm中直接用，为了不太会dedecms体系标签的利用，以是全部都贴出来吧。
1.
2.
{dede:global.c南通fg_webname/}
3.
4.
5.
6.{dede:channel type='top' row='10' currentstyle="
7.
~typename~
"}
8.
[field:typename/]
9.{/dede:channel}
10.
11.
12.
13.
14.
15.搜刮
16.
此中第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演示，由于我的首页模板还没有做出来，当前只是完成了部门栏目和详情页的计划制作，移动端在背面，处于栏目标分类下时也是有用果的，详细可以拷贝代码在当地测试。
本文由岑辉宇博客整剃头布，微信搜刮微信民众号“岑辉宇 ”可检察更多内容。