当前位置:首页 >  站长 >  搜索优化 >  正文

bootstrap响应式导航激活高亮,dedecms导航代码分享

 2020-06-04 10:30  来源: A5用户投稿   我来投稿   岑辉宇2的个人主页 撤稿纠错

  短视频,自媒体,达人种草一站服务

实现需求是:当处于某个分类下,或者在内容详情页时,上一级分类及一级分类,所在导航的分类要实现自动高亮,有点类似当前位置,对用户起到提示作用,告诉用户当前浏览的是哪一个分类,在网站的什么位置。同时导航是响应式的,对于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演示,因为我的首页模板还没有做出来,当前只是完成了部分栏目和详情页的设计制作,移动端在后面,处于栏目的分类下时也是有效果的,具体可以拷贝代码在本地测试。

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

申请创业报道,分享创业好点子。点击此处,共同探讨创业新机遇!

作者: 岑辉宇2    /    文章:71篇

相关标签
导航设计

相关文章

  • 给SEO新手学习优化的几个方向

    对于刚接触seo的萌新站长们,网站优化的过程非常的复杂,很多技巧和知识点也不是萌新一朝一夕就能学会的,其实针对seo小萌新们来说,把握住一下这几点简易的方法,其实网站优化对萌新也是很友好的

    标签:
    seo优化
  • 如何为小型企业定制SEO

    针对长尾短语或关键字优化内容是无需预算即可开发SEO的另一种方法。如果您的利基市场具有竞争力,那么这对您来说就显得尤为重要。您试图从人们那里得到的是关注,即使是在同一领域的大品牌中也是如此。您希望人们注意到您和您的网站出现在搜索的第一页上。

    标签:
    seo优化
  • 内容页关键词布局优化解析

    关键词是SEO的核心概念之一,SEO实践中很多工作都围绕关键词开展。本文尝试从搜索技术原理和网站优化实践结合,总结内容页关键词布局在SEO中的具体落地方法。

  • 网站SEO优化基本的四项规则

    title简短精炼,高度概括,含有关键词,而不是只有一个公司名。但关键词不宜过多,不要超过3个词组。企业网站的title通常以公司名+关键词为内容;前几个词对搜索引擎最重要,因此关键词位置尽量靠前;最好将title组织成符合语法结构和阅读习惯的短句或短语,避免无意义的词组罗列式title。

  • 内容页关键词布局优化解析

    关键词是SEO的核心概念之一,SEO实践中很多工作都围绕关键词开展。本文尝试从搜索技术原理和网站优化实践结合,总结内容页关键词布局在SEO中的具体落地方法。

  • 中小企业需求在改变:SEO从业者需要顺应潮流

    不管是SEO技术,还是其他推广方式,我们的目的都是为了订单。只是什么样的推广方式更适合自己,这点还要看具体什么产品和行业了。作为一个SEO从业者,必须努力学习新的推广方式,否则以后很难有更广阔的发展前景。

    标签:
    seo优化
  • 深度解析搜索引擎蜘蛛工作的原理

    更为网站完工的最后目地,提升总流量、提升百度收录、提升客户群体,因而而开展网站优化,那麼最先大家就需要掌握到蜘蛛拥有哪些的抓取习惯,如何下手,有句老话说的好,知彼知己才可以决战沙场无败

  • 百度不再支持sitemapXML地图文档

    Sitemap简单讲就是网站各页面列表的集合,站长可以自己编辑并提交Sitemap到百度搜索提升网站被百度蜘蛛的爬取率有助于百度蜘蛛发现并抓取网页信息提高网站收录,对于sitemap百度规定了三种形式包括XML,TXT和Sitemap索引格式,

    标签:
    百度搜索
  • 站群推广的优点,SEO站群爆炸流量

    互联网是一个非常巨大的平台,如何利用平台来更多地表达自己的产品信息,是站长追求的目标。因此,关键词排名、广泛的信息表现、话题的制造等。关键词排行,以SEO方式长期不懈的努力能够使排行稳定,但话题的制作能够通过新闻源、活动的普及等实现,信息的广泛展示能够通过站群的优化来实现。

  • 谷歌外链用自动化工具发,真的靠谱吗

    当我们做站外谷歌SEO推广,特别是外链建设的时候,经常想寻找一个快速自动发布SEO外链的工具,并且希望在SEO工作中可以利用更多的工具,来加快谷歌SEO优化的工作进度,这些想法是可以理解的,但我们真的需要这样做吗?

热门排行

信息推荐

扫一扫关注最新创业资讯