实现要求是：当你在某个类别或者在内容详情页上时，要自动突出显示导航类别，类似于当前位置，起到提示用户的作用，告诉用户当前浏览的是哪个类别，在网站上的什么位置。同时，导航对pC和移动终端具有响应性和适应性；因此，使用了bootstrap4.4和结合dedecms的自动添加电流功能。之前分享了一篇关于副主题的技术文章，这是导航栏的全部代码，可以直接使用。

如上图所示，在内容详情页中，对应的一级分类导航也是高亮显示，对用户体验非常好，一眼就能看出你所在的网站属于哪个分类。如果用户的当前位置在一级分类之下的二级分类中，将达到相同的效果。

1.HTML响应代码

我的代码是全导航，只调用DEdedecms系统的一级分类，在中直， head.htm可以访问。为了不知道如何使用DEDECMS系统标签，所有的标签都贴上了。

1.

2.

{dede:global.cfg_webname/}

3.

4.

5.

6.{ dede : channel type=\' top \' row=\' 10 \' current style=\'

7.

~typename~

\'}

8.

[field:typename/]

9.{/dede:channel}

10.

11.

12.

13.

14.

15.搜索

16.

其中5~9行为DEDEECMS的一级分类调用标签，其他为bootstrap导航码。如果不使用DEECMS系统，只需用相应的数据调用替换第5~9行即可。

第二，定制css代码

因为默认的引导没有直接可用的代码，比如激活状态下的颜色，所以你需要自己写几行css。这是自定义样式代码。复制到Dreamweaver等编辑器先格式化，看起来会很清爽。

a.@media(最小宽度：992px)和(最大宽度：1200px){。nav bar-collapse . form-inline . input-group . form-control { width :9 rem！重要}}

b.@media(最大宽度：992px){。nav bar-collapse . Mr-auto { margin-top :5 rem }。nav bar-collapse . Mr-autoli 3360n-of-type(2n-1){ background : eee；}}

c . nav bar-collapse . Mr-autolia { color : rgba(0，0，0，0.9)；显示：块；划水：0 . 5 rem 0 . 5 rem；}

d . nav bar-collapse . Mr-autolia : hover，nav bar-collapse . Mr-autolia : active，nav bar-collapse . Mr-auto lia : focus { color : fff；背景技术： c 1962 f；文本装饰： none；border-radius :2 rem；}

f . nav bar-collapse . Mr-autoli . current { background : af 8 a 33；color:fffborder-radius :2 rem；}

引导版本是4.4。如果直接复制，注意不要做得比这个版本低。默认情况下，实现移动样式。

我录制了一个gif演示，因为我的主页模板还没有做好，现在只完成了部分栏目和详情页的设计制作。移动终端在后面，列分类下也有效。我可以复制代码并在本地测试。

本文由岑辉宇博客整理发布，在微信官方账号搜索微信“岑辉宇”可以找到更多内容。

« 契约书|观远数据中显示“王府井集团”的数据大画面和敏捷BI项目 | RUSHMAIL：如何将企业应用系统与群发邮件平台 »