完成要求是：当处在某个归类下，或在內容详细信息页时，上1级归类及1级归类，所属导航栏的归类要完成全自动高亮度，有点相近当今部位，对客户起到提醒功效，告知客户当今访问的是哪个归类，在网站的甚么部位。另外导航栏是回应式的，针对PC和挪动端可以自融入；因此应用了bootstrap 4.4和融合dedecms全自动加上current的作用，以前共享过1篇子栏目地技术性文章内容，本次是导航栏栏的所有编码，能够立即应用哦。

如上图所示，此时在內容详细信息页，对应的1级归类导航栏也处在高亮度情况，这个对客户体验很好，1眼便可以看到自身在网站的哪个归类下面。假如客户确当前部位在1级归类下面的某1个2级归类也是1样的实际效果。

1、HTML回应式编码

我的这端编码是全部导航栏，只启用了dedecms系统软件的1级归类，能够放在head.htm中立即用，以便不太会dedecms系统软件标识的应用，因此所有都贴出来吧。

1.

2.

{dede:global.cfg_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的1级归类启用标识，别的的是bootstrap导航栏编码，如应用的并不是dedecms系统软件，要是把5~9行更换成对应的数据信息启用便可。

2、自定css编码

由于默认设置bootstrap沒有激活情况下色调等立即能用的编码，必须自定写几行css，下面是自定款式编码，先将其复制到Dreamweaver等编写器里边文件格式化1下，看起来就会很清新了。

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⑴){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，立即拷贝应用的话留意不可以使低于此版本号，默认设置完成了挪动端款式。

录制了1个gif演试，由于我的主页模版都还没做出来，当今只是进行了一部分栏目和详细信息页的设计方案制作，挪动端在后边，处在栏目地归类下时也是合理果的，实际能够复制编码在当地检测。

本文由岑辉宇blog梳理公布，手机微信检索手机微信群众号 岑辉宇 可查询更多內容。