这个效果很多站点多有,不是小伙伴在问是怎么做到的,今天我们就来学习一下这个效果是怎么完成的,RiPro主题美化:添加文章数量统计和美化二级导航菜单小圆点,下面我们先看看效果:

RiPro主题美化:添加文章数量统计和美化二级导航菜单小圆点插图

1.找到\ripro(或子主题)\functions.php 文件,在最下面添加下载包中的代码:

2.找到\ripro(或子主题)\assets\css\diy.css 在最下面添加以下CSS样式:

/**二级菜单文章统计**/
.num {
	position: absolute;
	top: 8px;
	left: 68%;
	color: #555;
	border-radius: 8px;
	text-align: center;
	font-family: Calibri;
	background: #eee;
	font-size: 12px;
	min-width: 32px;
}
/***二级导航前面小圆点***/
.lanse {
    box-sizing: border-box;
    content: '';
    width: 12px;
    height: 12px;
    border-radius: 50%;
    position: absolute;
    top: 50%;
	margin-left: 10px;
    margin-top: -6px;
    left: 0;
	border-color: #61e1b9;
	border: 3px solid #7a99f2;
}

.lvse {
    box-sizing: border-box;
    content: '';
    width: 12px;
    height: 12px;
    border-radius: 50%;
    position: absolute;
    top: 50%;
	margin-left: 10px;
    margin-top: -6px;
    left: 0;
	border-color: #61e1b9;
	border: 3px solid #70d7cf;
}
.huangse {
    box-sizing: border-box;
    content: '';
    width: 12px;
    height: 12px;
    border-radius: 50%;
    position: absolute;
    top: 50%;
	margin-left: 10px;
    margin-top: -6px;
    left: 0;
	border-color: #61e1b9;
	border: 3px solid #f5c745;
}
.hongse {
    box-sizing: border-box;
    content: '';
    width: 12px;
    height: 12px;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    margin-left: 10px;
    margin-top: -6px;
    left: 0;
    border-color: #61e1b9;
    border: 3px solid #f1787f;
}
/***二级导航前面小圆点结束***/

3、导航前面添加小圆点,在后台-菜单里设置,如下图:

RiPro主题美化:添加文章数量统计和美化二级导航菜单小圆点插图
<span><i class="hongse"></i>二级菜单</span>
<span><i class="lanse"></i> </i>二级菜单</span> 
<span><i class="huangse"></i></i> 二级菜单</span>
<span><i class="lvse"></i></i>二级菜单</span>

说明:hongse(红色) lanse(蓝色) huangse(黄色) lvse(绿色)四款样式,望大家按自己喜欢样式进行修改!

 

 

发表回复

后才能评论

本站部分资源需要解压密码,如需解压密码,解压密码则为“www.360mb.net”,如密码还是错误请联系客服。

本站提供的源码、模板、插件等等其他资源,除资源本身问题外,都不包含免费技术服务,如需技术支持需支付技术服务费100+/次,请大家谅解!

本站源码已经购买的后续都是免费更新,且资源更新都是在同一文章,不会新开一贴,不会重新收费,这一点我们和其他很多同行网站规则都不一样,望各位知晓!

如果您已经成功付款但是网站没有弹出成功提示,请联系站长提供付款信息为您处理

源码素材属于虚拟商品,具有可复制性,可传播性,一旦授予,不接受任何形式的退款、换货要求。请您在购买获取之前确认好 是您所需要的资源

本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。