最新公告
  • 欢迎您光临都潮汇,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入我们
  • 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演示,因为我的首页模板还没有做出来,当前只是完成了部分栏目和详情页的设计制作,移动端在后面,处于栏目的分类下时也是有效果的,具体可以拷贝代码在本地测试。

    本文由岑辉宇博客整理发布,微信搜索微信公众号“岑辉宇 ”可查看更多内容。

    本网站所有源码和软件均为作者提供和网友推荐收集整理而来!
    本站提供的所有模块、软件等资源,均不提供任何技术服务,请悉知!
    如您需要商用,请支持正版,本站提供的程序仅供学习和研究使用!
    资源每天实时更新,如遇压缩包解压密码,一律为:www.dch888.cn
    如有侵犯你版权的,请来信(邮箱:i@dch888.cn)指出,本站将立即改正。
    都潮汇 » bootstrap响应式导航激活高亮,dedecms导航代码分享_搜索优化

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    站壳网
    一个高级程序员模板开发平台