实现要求是:当你在某个类别，或者你在内容宝贝详情的时候，下一级分类和第一级分类，你所属的导航类别都要充分突出，有点类似于位置，有提醒客户今天访问的是哪个类别，在网站的什么位置的功能。另外，导航是一个响应式网站，可以响应PC和手机。因此，bootstrap4.4和fuseddedecms完全自动加上电流的功能。之前我们分享了一个子渠道的技术文章内容。这一次，导航栏的所有代码都可以立即应用。
如图，此时内容细节弥足珍贵，匹配的一级分类导航也凸显出来。这一对客户的体验非常好，一眼就能看出他们属于哪一类。如果客户的位置在一级分类下面的二级分类中，也会达到同样的实际效果。
I.HTML响应式网站代码
我的代码是全导航，只启用DEDEDECMS系统的一级分类，可以放入head.htm中性使用。为了更好的理解DEDEDECMS系统logo的应用，请全部贴出。
1.
2.
{dede:global.cfg_webname/}
3.
4.
5.
6.{dede:channeltype='top'row='10'currentstyle="
7.
~键入名称~
"}
8.
[字段:typename/]
9.{/dede:channel}
10.
11.
12.
13.
14.
15.搜索
16.
其中第5~9行为DEDEDECMS的一级分类激活标志，其他为引导导航码。如果应用程序不是DEDEDECMS系统，可以将第5~9行改为匹配数据信息激活。
第二，定制css代码
因为默认设置bootstrap在激活状态下没有可以立即使用的代码，所以必须自己写两行css，这里是自定义样式代码。先拷贝到Dreamweaver等在线编辑器恢复出厂设置，看起来就新鲜了。
a.@media(最小宽度:992px)和(最大宽度:1201080x){。导航栏-折叠>。form-inline>；。输入组>。form-control{width:9rem！重要信息}}
b.@media(max-width:992px){。导航条-折叠。mr-auto{margin-top:.5rem}。导航条-折叠。mr-autoli:第n个类型(2n-1){背景:#eee}}
c.navbar-折叠。mr-auto阿利{color:rgba(0，0，0，0.9)；显示:块；填充:0.5雷姆0.5雷姆；}
d.导航条-折叠。阿利先生:盘旋。导航条-折叠。阿利先生:活跃。导航条-折叠。阿利先生:专注{color:#fff；背景:#c1962f文字-装饰:无；边框半径:.2rem}
f.导航条-折叠。汽车先生李>。当前{背景:#af8a33颜色:#fff边框半径:.2rem}
引导版本号是4.4。如果您立即复制应用程序，注意不要使它小于这个版本号。默认设置是移动版本。
视频录了一段gif试镜。由于我的主页模板还没做，今天只做了一部分频道和宝贝细节。手机在后面，渠道分类下也有效。其实它可以复制代码进行本地检测。
文章由岑于慧博客梳理发布，搜索微信微信公众平台“岑于慧”即可点击查看内容。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）