最新公告
  • 欢迎您光临搜资源,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入我们
  • 怎么给菜单添加角标?- WordPress美化

    总感觉菜单栏好单调怎么办?或是自己有一些很有趣的菜单想要突出展示给网站的访客,

    那么这个时候就可以给你的wordpress菜单增添一些角标,让你的菜单更加吸引访客的注意力。

    添加角标

    我们以最新的wordpress 2021主题为准,在你的菜单中添加如下代码:

    怎么给菜单添加角标?- WordPress美化-搜资源

    <li class="n-mark-red">Demo One</li>
    

    怎么给菜单添加角标?- WordPress美化-搜资源

    在你的主题根目录下的style.css文件底部添加以下代码:

    红色

    .n-mark-red {
        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;
    }
    

    保存后刷新浏览器本地缓存(或开隐私模式),查看前端页面即可看到效果。

    效果预览

    怎么给菜单添加角标?- WordPress美化-搜资源

    更多颜色

    黄色

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

    怎么给菜单添加角标?- WordPress美化-搜资源

    蓝色

    .n-mark-blue {
        display: inline-block;
        -webkit-transform: translateY(-12px);
        -ms-transform: translateY(-12px);
        transform: translateY(-12px);
        font-size: .75rem;
        letter-spacing: 0.05em;
        background: #188ef4;
        background: -webkit-linear-gradient(legacy-direction(to right), #6454ef 0%, #316ce8 100%);
        background: -webkit-gradient(linear, left top, right top, from(#6454ef), to(#316ce8));
        background: -webkit-linear-gradient(left, #6454ef 0%, #316ce8 100%);
        background: -o-linear-gradient(left, #6454ef 0%, #3021ec 100%);
        background: linear-gradient(to right, #6454ef 0%, #3021ec 100%);
        color: #ffffff;
        border-radius: 1rem;
        padding: .15rem .275rem;
        line-height: 1;
        font-weight: bold;
    }
    

    怎么给菜单添加角标?- WordPress美化-搜资源

    黄色

    .n-mark-yellos {
         display: inline-block;
        -webkit-transform: translateY(-12px);
        -ms-transform: translateY(-12px);
        transform: translateY(-12px);
        font-size: .75rem;
        letter-spacing: 0.05em;
        background: #f9e1be;
        background: -webkit-linear-gradient(legacy-direction(to right), #efd3b0 0%, #f9e1be 100%);
        background: -webkit-gradient(linear, left top, right top, from(#efd3b0), to(#f9e1be));
        background: -webkit-linear-gradient(left, #efd3b0 0%, #f9e1be 100%);
        background: -o-linear-gradient(left, #efd3b0 0%, #f9e1be 100%);
        background: linear-gradient(to top, #efd3b0 0%, #f9e1be 100%);
        color: #ffffff;
        border-radius: 1rem;
        padding: .15rem .275rem;
        line-height: 1;
        font-weight: bold;
    }
    

    怎么给菜单添加角标?- WordPress美化-搜资源

    黄色渐变

    .n-mark-yelloss {
        display: inline-block;
        transform: translateY(-12px);
        font-size: .75rem;
        letter-spacing: 0.05em;
        background: linear-gradient(to top, #efd3b0 0%, #f9e1be 100%);
        background: -webkit-gradient(linear,left top,right top,from(#ff4949),to(#ff7849));
        background: -webkit-linear-gradient(left,#ff4949,#ff7849);
        background: linear-gradient(90deg,#ff4949,#ff7849);
        text-shadow: 0 -1px #ff4949;
        -webkit-box-shadow: 0 10px 10px -2px rgba(255,73,73,.5);
        box-shadow: 0 5px 5px -2px rgba(255, 73, 73, 0.34);
        color: #ffffff;
        border-radius: 1rem;
        padding: .2rem .575rem;
        line-height: 1;
        font-weight: bold;
    }
    

    怎么给菜单添加角标?- WordPress美化-搜资源

    绿色

    .n-mark-green {
        display: inline-block;
        transform: translateY(-8px);
        font-size: .6rem;
        letter-spacing: .05em;
        background: linear-gradient(to right,#02bb9b 0%,#02bac3 100%);
        color: #fff;
        border-radius: 1rem;
        padding: .18rem .5rem;
        line-height: 1;
        font-weight: 700;
    }
    

    怎么给菜单添加角标?- WordPress美化-搜资源

    极简版

    如果你不想弄这么复杂,没关系,你可以这样做。在填写菜单的时候,将以下代码添加进菜单即可。

    帮助<span style="XXX">Help</span>
    

    怎么给菜单添加角标?- WordPress美化-搜资源

    然后将“XXX”替换为上面.primary-menu small {}之间的内容即可。

    例如这样:

    帮助<span style="display: inline-block;
        -webkit-transform: translateY(-12px);
        -ms-transform: translateY(-12px);
        transform: translateY(-12px);
        font-size: .75rem;
        letter-spacing: 0.05em;
        background: #f9e1be;
        background: -webkit-linear-gradient(legacy-direction(to right), #efd3b0 0%, #f9e1be 100%);
        background: -webkit-gradient(linear, left top, right top, from(#efd3b0), to(#f9e1be));
        background: -webkit-linear-gradient(left, #efd3b0 0%, #f9e1be 100%);
        background: -o-linear-gradient(left, #efd3b0 0%, #f9e1be 100%);
        background: linear-gradient(to top, #efd3b0 0%, #f9e1be 100%);
        color: #ffffff;
        border-radius: 1rem;
        padding: .15rem .275rem;
        line-height: 1;
        font-weight: bold;">Help</span>
    

    怎么给菜单添加角标?- WordPress美化-搜资源

    怎么给菜单添加角标?- WordPress美化-搜资源

    小圆点

    代码参考:

    怎么给菜单添加角标?- WordPress美化-搜资源

    代码部署

    在主题根目录下的style.css底部添加以下代码

    .n-mark{
    	position: absolute;
        background-color: #f16b6f;
        top: 20px;
        left: 1px;
        width: 10px;
        height: 10px;
        border-radius: 100%;
    }
    
    • background-color:背景颜色
    • top:离顶部距离
    • left:离左边距离

    可自行调整相关参数。

    调用

    在菜单中依据如下方法调用

    1. 示例页面<i class="n-mark"></i>
    免责声明:
    本内容由用户共同创建和维护,不代表本站立场。
    如侵犯到您的合法权益,请您联系本站删除资源!
    如您遇到资源链接失效,请您前往工单方式通知!
    未经搜资源网许可,不得转载。

    搜资源 » 怎么给菜单添加角标?- WordPress美化

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或工单联络我们.。
    下载链接失效
    如碰到链接失效,请您到个人中心以工单的形式像客服反馈,我们将尽快24小时之内处理解决。
    架设失败怎么处理?
    1.请使用和安装说明里要求一致的架设环境;2.认真阅读网站文字说明和压缩包内的安装说明,逐步进行安装,特别注意有些需要运行目录和伪静态;3.如果在本地环境中架设失败请使用服务器环境,不要问我为什么,很多程序在本地环境架设不起在服务器liunx环境下直接起飞

    发表评论

    • 90会员总数(位)
    • 1298资源总数(个)
    • 0本周发布(个)
    • 0 今日发布(个)
    • 381稳定运行(天)

    提供最优质的资源集合

    立即查看 了解详情