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

4.6
(5)

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

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

下面正式开始教程:

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

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

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

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

WordPress导航菜单添加个性文字特效
.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”,对应“热”。其他自定义字符,照猫画虎吧,就那么简单。

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

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

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

共计5人评分,平均4.6

到目前为止还没有投票~

很抱歉,这篇文章对您没有用!

让我们改善这篇文章!

告诉我们我们如何改善这篇文章?

原创文章,作者:古哥,转载需经过作者授权同意,并附上原文链接:https://iymark.com/website/wordpress-diy-menu.html

发表评论

登录后才能评论

评论列表(9条)

    本站APP
    本站APP
    分享本页
    返回顶部