RiProV2顶部菜单栏添加美化角标及二级分类圆圈

[ri-alerts color=”danger”]一、菜单栏角变美化[/ri-alerts]

[rihide]1、打开后台以此选择→外观→自定义→额外CSS、复制以下代码粘贴发布

/*NEW标签开始*/
.icon_new {
    display: block;
    animation: hot 1s infinite linear;
    -moz-animation: hot 1s infinite linear;
    -webkit-animation: hot 1s infinite linear;
    -o-animation: hot 1s infinite linear;
    width: 25px;
    height: 54px;
    background: url(https://www.mubanke.com/wp-content/themes/ceomax/static/images/ceo-new.png) no-repeat center;
    position: absolute;
    top: -8px;
    left: 50%;
    margin-left: -12.5px;
}
/*NEW标签结束*/
/*HTO标签开始*/
.icon_hot {
    display: block;
    animation: hot 1s infinite linear;
    -moz-animation: hot 1s infinite linear;
    -webkit-animation: hot 1s infinite linear;
    -o-animation: hot 1s infinite linear;
    width: 25px;
    height: 54px;
    background: url(https://www.mubanke.com/wp-content/themes/ceomax/static/images/ceo-hot.png) no-repeat center;
    position: absolute;
    top: -8px;
    left: 50%;
    margin-left: -12.5px;
}
/*HTO标签结束*/
/*自定义标签开始*/
.vip {
display: inline-block;
transform: translateY(-12px);
    font-size: .75rem;
    letter-spacing: 0.05em;
background: linear-gradient(to top, #efd3b0 0%, #3cb371 0%);
    color: #ffffff;
    border-radius: 1rem;
    padding: .15rem .275rem;
    line-height: 1;
    font-weight: bold;
}

.new {
    display: inline-block;
    transform: translateY(-12px);
    font-size: .75rem;
    letter-spacing: 0.05em;
    background: linear-gradient(to top, #f308a0 0%, #fb0655 100%);
    color: #ffffff;
    border-radius: 1rem;
    padding: .15rem .275rem;
    line-height: 1;
    font-weight: bold;
}

.label {
display: inline-block;
transform: translateY(-12px);
    font-size: .75rem;
    letter-spacing: 0.05em;
background: linear-gradient(to right, #6454ef 0%, #3021ec 100%);
    color: #ffffff;
    border-radius: 1rem;
    padding: .15rem .275rem;
    line-height: 1;
    font-weight: bold;
}
/*自定义标签结束*/

2、打开后台以此选择→外观→菜单→菜单名称、导航标签、复制以下代码粘贴至名称后边。

<span class="new">更新中</span>

<span class="label">精品</span>

<span class="vip">纯净版</span>

<span class="icon_new"></span>

<span class="icon_hot"></span>

前三个是文字自定义修改、后两个是图片。[/rihide]

[ri-alerts color=”danger”]二、添加二级导航四种颜色圆圈圈[/ri-alerts]

[rihide]1、打开后台以此选择→外观→自定义→额外CSS、复制以下代码粘贴发布

/*二级导航样式*/
.lanse {
    box-sizing: border-box;
    content: '';
    width: 12px;
    height: 12px;
    border-radius: 50%;
    position: absolute;
    top: 50%;
	margin-left: -20px;
    margin-top: -6px;
    left: -1;
	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: -20px;
    margin-top: -6px;
    left: -1;
	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: -20px;
    margin-top: -6px;
    left: -1;
	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: -20px;
    margin-top: -6px;
    left: -1;
	border-color: #61e1b9;
	border: 3px solid #f1787f;
}
/*二级导航样式*/

2、打开后台以此选择→外观→菜单→菜单名称、导航标签、复制以下代码粘贴至名称前边。

<i class="lanse"></i>

<i class="lvse"></i>

<i class="hongse"></i>

<i class="huangse"></i>

[/rihide]

[ri-alerts color=”danger”]样式与本站顶部菜单栏样式一致、喜欢的话按照上边教程自己搞一下！[/ri-alerts]