• 资源介绍
  • 这个效果很多站点多有,不是小伙伴在问是怎么做到的,今天我们就来学习一下这个效果是怎么完成的,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、导航前面添加小圆点,在后台-菜单里设置,如下图:

    <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(绿色)四款样式,望大家按自己喜欢样式进行修改!

     

     

    喜欢 0
    1. 本站所有源码、模板、插件等其他资源,都不包含免费技术服务请大家谅解!
    2. 本站提供的所有资源不免费提供个人需要的资源修改、美化、功能定制!
    3. 如遇需要解压密码,则解压密码为"www.360mb.net"!
    4. 由于源码属于可复制性产品,发货后禁止买家以各种理由退款!!
    5. 本站提供资源如遇源码失效,功能异常等等可提供退款服务,可参考《退款规则》!
    6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
    7. 如用于商业或者非法用途,与本站无关,一切后果请用户自负!

    360模板吧 » RiPro主题美化:添加文章数量统计和美化二级导航菜单小圆点

    发表评论