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

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

    1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
    2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
    3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
    4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
    5. 如有链接无法下载、失效或广告,请联系管理员处理!
    6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!

    源码资源库 » bootstrap响应式导航激活高亮,dedecms导航代码分享_搜索优化