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

(1)
上一篇 2021年02月18日 19:42
下一篇 2021年02月19日 19:21

相关推荐

  • 一段访问网站自动弹窗的js代码

    文章目录(展开/隐藏→) 展开自动弹窗代码解释后续说明 3 (5) 今天,有个Q群问如何实现用户访问网站,自动弹窗图片广告,然后几秒钟自动消失或者点击关闭,作为一个扒站魔改主题的站…

    2020年10月11日
    072
  • WordPress更新:鲜活色彩的5.7版本

    文章目录(展开/隐藏→) 展开走进WordPress5.7。编辑器现在更易于使用您无需编写自定义代码即可完成更多工作更简单的默认调色盘。 4.3 (6) 今天,收到了WordPre…

    2021年03月10日 网站建设
    017
  • 网站加载中的TTFB时间太长解决办法

    文章目录(展开/隐藏→) 展开加快PHP解析过程数据库查询缓存页面优化整合动静分离静态页面缓存服务器开启BBR,防止请求阻塞终极优化 4.3 (15) 不知道各位有没有好奇过,为啥…

    2021年02月01日
    9125
  • 为你的网站加入鼠标滑过抖动样式

    文章目录(展开/隐藏→) 展开代码说明 4 (2) 又是旧站的文章,再搬运一篇过来。本文属于CSS动画特效,短短的几行代码就可以实现鼠标滑过某区域,特定元素抖动的特效。 站长闲下来…

    2020年11月01日
    08
  • Apache ModSecurity防火墙白名单设置

    4.5 (4) 建站初期,我就使用了Apache的ModSecurity模块,来保证服务器的安全运行。它可以自定义规则,而且可以直接套用owasp-modsecurity-crs现…

    2021年03月03日 电脑技巧
    077
  • WordPress从速度方面考虑重新设计首页

    3.8 (6) 是的,没错,本站又换了首页排版方式,为的是在速度上更快一点,还要更加注重内容体现等方面。因此去除了之前的卡片列表文章,重新更换为左侧缩略图右侧文章标题描述的默认列表…

    2021年02月17日
    038

发表回复

登录后才能评论

评论列表(9条)

    本站APP