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

4.5
(4)

今天又去扒别人站的特效了,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类!

共计4人评分,平均4.5

到目前为止还没有投票~

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

让我们改善这篇文章!

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

原创文章,作者:古哥,如若转载,请注明出处:https://iymark.com/website/wordpress-diy-menu.html

发表评论

登录后才能评论
本站APP
本站APP
京东好物
分享本页
返回顶部
如果觉得文章对你有帮助,请在文末点赞支持本站