首页 > 搜索优化 >

实现需求是:当处于某个分类下,大概在内容详情页时,上一级分类及一级分类,地点导航的分类要实现主动高亮,有点雷同当前位置,对用户起到提示作用,报告用户当前欣赏的是哪一个分类,在网站的什么位置。同时导航是相应式的,对付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演示,由于我的首页模板还没有做出来,当前只是完成了部门栏目和详情页的计划制作,移动端在背面,处于栏目标分类下时也是有用果的,详细可以拷贝代码在当地测试。

本文由岑辉宇博客整剃头布,微信搜刮微信民众号“岑辉宇 ”可检察更多内容。

TAG:bootstrap 响应 免费 软件 SEO
上一篇:影响网站SEO排名上不去因素有哪些呢? 下一篇:SEO优化网站诊断的几个技巧 你知道多少