子比主题美化 导航菜单添加自定义徽章及多种样式菜单设置方法

今天分享的是子比主题首页导航的美化，可以用多种方式进行展现，这也是我非常喜欢的一个美化功能，喜欢的朋友记得收藏本文章。

效果：

添加徽章

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

<!-- 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>
<!-- 徽章内也支持图标代码 -->

子比主题官方支持的 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>

按钮样式

<!-- 按钮风格的菜单 -->
<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>

我相信，细心的朋友已经完全看明白了！简单讲解一下：

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

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

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

文章版权声明

1 本网站名称：忆路吧
2 本站永久网址：http://www.Yiluxb.cn
3 本网站的文章部分内容来源于网络，仅供大家学习与参考，如有侵权，请联系站长 QQ进行删除处理。
4 本站资源仅供学习和交流使用，版权归原作者所有，请在下载后24小时之内自觉删除。
5 本站大部分下载资源收集于网络，不保证其完整性以及安全性，不提供技术支持，请下载后自行研究。
6 若作商业用途，请购买正版，由于未及时购买和付费发生的侵权行为，使用者自行承担，概与本站无关。