本站设计-给导航菜单添加自定义徽章及多种样式菜单设置方法

本站的菜单显示其实是支持自定义Html代码的,那么就有很多的扩展性了!之前我们详细的讲解过如何在导航菜单添加图标的教程,如果不会添加图标的朋友可以复习一下下方文章!

本篇文章属于扩展功能,高级教程。需要有点点的Html基础,如果一点都不会,那也没关系。本篇教程会很详细,有基础的朋友一看就懂,没基础的朋友就一步一步对照着来,也能做出好看的效果!

效果预览

本站设计-给导航菜单添加自定义徽章及多种样式菜单设置方法 插图1

本站设计-给导航菜单添加自定义徽章及多种样式菜单设置方法 插图2

添加徽章

进入Wordpress后台-外观-菜单->修改导航标签

本站设计-给导航菜单添加自定义徽章及多种样式菜单设置方法 插图3

首先我们将上面预览图的相对应的HTML代码附上!

<!-- badge标签即为徽章 支持多项Class -->
主题购买<badge>折扣</badge>
网站建设<badge class="jb-yellow">NEW</badge>
最新优惠<badge class="badge-bw jb-vip2"><i>VIP</i></badge>
特惠资源<badge class="c-blue-2">NEW</badge>
示例页面<badge class="jb-red badge-bw">99</badge>
发布文章<badge class="b-blue"></badge>
友情链接<badge class="jb-green">+1</badge>
<!-- 徽章内也支持图标代码 -->

根据代码就很容易理解了,badge 便签也就是徽章了。如何控制标签的样式、颜色,也就是class来处理了!

本站设计-给导航菜单添加自定义徽章及多种样式菜单设置方法 插图4

WP官方支持的 class 列表

class样式class样式class样式
c-red红色文字b-theme主题背景色jb-red渐变红色背景
c-yellow橙色文字b-red红色背景jb-yellow渐变橙色背景
c-blue蓝色文字b-yellow橙色背景jb-blue渐变蓝色背景
c-blue-2深蓝色文字b-blue蓝色背景jb-green渐变绿色背景
c-green绿色文字b-green深蓝色背景jb-purple渐变紫色背景
c-purple紫色文字b-purple紫色背景jb-vip1渐变金色背景
jb-vip2渐变黑色背景

当然如果这些class的样式还满足不了你,你还可以直接添加style代码哦!

同时 badge 徽章的内容也是支持自定义图标的,例如 你可以试试这句代码:

<!-- 图标徽章示例 -->
特惠资源<badge class="c-blue-2"><i class="fa fa-bolt"></i></badge>

按钮样式

按照上面的方法举一反三,菜单还可以显示为按钮风格样式,先看看效果图吧!

本站设计-给导航菜单添加自定义徽章及多种样式菜单设置方法 插图5

本站设计-给导航菜单添加自定义徽章及多种样式菜单设置方法 插图6

对应的Html代码如下:

<!-- 按钮风格的菜单 -->
<span class="but jb-red">主题购买</span>
<span class="but c-blue">网站建设</span>
<span class="but c-yellow">科技资讯</span>
<span class="but b-purple radius">最新优惠</span><badge><i>VIP</i></badge>
<span class="but jb-vip2 radius">特惠资源</span><badge class="jb-red"><i class="fa fa-bolt"></i></badge>

我相信,细心的朋友已经完全看明白了!简单讲解一下:

  1. 将菜单的文字用span标签包围
  2. class仍然可以使用上面表格中的颜色、背景色class
  3. 最重要的就是class多了一个but,没错,这个就是代表按钮的 class
  4. class再增加一个radius,即可显示为两边圆角

到这里,整个教程就结束了!赶紧试一试,让您的网站导航菜单也变得丰富多彩吧!

温馨提示:
以上的class以及badge徽章是可以运用在整个网站的自定义代码位置的,比如主题设置的很多地方都是支持自定义代码的
另外,使用自定义Html代码请一定要注意标签闭合!代码使用不当还会引起网站显示错误!

温馨提示:本文最后更新于2022-12-14 19:28:55,某些文章具有时效性,若有错误或已失效,请在下方留言或联系云小叔叔
文章版权声明 1、本网站名称:元宇宙之家
2、本站永久网址:https://liboven.cn
3、本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长进行删除处理。
4、本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
6、本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。

© 版权声明
THE END
喜欢就支持一下吧
点赞6赞赏 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

夸夸
夸夸
还有吗!没看够!
取消
昵称常用语表情代码图片

    暂无评论内容