bootstrap相应式导航激活高亮，dedecms导航代码分享

实现需求是：当处于某个分类下，可能在内容详情页时，上一级分类及一级分类，地址导航的分类要实现自动高亮，有点相同当前位置，对用户起到提醒浸染，汇报用户当前赏识的是哪一个分类，在网站的什么位置。同时导航是相应式的，对付PC和移动端可以或许自顺应；以是行使了bootstrap 4.4和团结dedecms自动添加current的成果，之前分享过一篇子栏目标技能文章，本次是导航栏的所有代码，可以直接行使哦。

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

一、HTML相应式代码

我的这端代码是整个导航，只挪用了dedecms体系的一级分类，可以放在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的一级分类挪用标签，其他的是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演示，由于我的首页模板还没有做出来，当前只是完成了部门栏目和详情页的计划建造，移动端在后头，处于栏目标分类下时也是有结果的，详细可以拷贝代码在当地测试。

（编辑：河北网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!