WordPress导航菜单添加个性文字特效

今天又去扒别人站的特效了,Wordpress Justnews官方群有人发了个好看的导航特效(suanding.com),就是几个导航菜单后面添加“热”、“新”、“预”等自己自定义的文字特效,看起来挺美观。顺手就扒了特效,分享出来大家一起用。特效使用很简单,用的是class的after,添加了一些css,再搭配Wordpress的菜单设置CSS类,就可以完美的达到每个单独菜单或者叫文章分类显示独特的样式了。

下面正式开始教程:

后台,外观,菜单,找到你想设置个性特效的那个项目,CSS类填入“new”,保存菜单

注:如果找不到CSS类,可以在菜单设置右上角找到显示选项,显示下CSS类!

主题设置,自定义CSS选项,插入如下代码:

.menu-item.hot:after {
    background-color: red;
    color: rgb(255, 255, 255);
    content: "热";
    font-size: 10px;
    line-height: 1;
    position: absolute;
    right: -1px;
    top: 12px;
    border-radius: 3px;
    padding: 1px 3px;
}
.menu-item.new:after {
    background-color: orange;
    color: rgb(255, 255, 255);
    content: "新";
    font-size: 10px;
    line-height: 1;
    position: absolute;
    right: -1px;
    top: 12px;
    border-radius: 3px;
    padding: 1px 3px;
}

上面的“new”,对应“新”;上面代码中的“hot”,对应“热”。其他自定义字符,照猫画虎吧,就那么简单。

实际的显示效果如下图所示,首页及论坛交流后面的文字就是本文所添加的特效!

如果你的后台菜单那里找不到CSS类,可以点击菜单设置页面右上角的显示选项,显示下CSS类!

    © 版权声明
    THE END
    喜欢就支持一下吧
    点赞0 分享
    评论 抢沙发

    请登录后发表评论

      暂无评论内容