Google SEO“零基础”入门学习:入门Google SEO:零基础在线云学习
2019 Google SEO培训课:玩转Google SEO:谷歌SEO从入门到精通

仿大前端给wordpress博客的菜单栏增加下拉小箭头

分类: wordpress DIY 作者: 为主的祥助 630次浏览 2评论

众所周知,大前端主题的样式和设计挺受到wordpress博客站长们的青睐,市面上也有一些参考和吸取大前端优秀之处开发的主题,比如跨境E站使用的CUI 1.0主题(翠竹林1.0),整体风格上很有大前端的影子。而菜单小图标也是博客样式美化的重点之一,如何给自己的博客增加大前端那种二级菜单下拉翻转的动态菜单小箭头呢?

首先这段css代码是从大前端主题的博客上参考的,为主的祥助给跨境e站调试好后发布上线的预览效果如下:

给wordpress博客的菜单增加下拉小箭头

鼠标悬浮上去菜单下拉小箭头后,展开其sub二级菜单的同时,小箭头会翻转180度箭头朝上。

CSS样式代码

将下列CSS代码复制,添加到主题-自定义-额外CSS,点击发布按钮,前台刷新页面即可看到效果

css代码:

#site-nav .down-menu >li.menu-item-has-children>a::after {
    content: "\f107";
    font-family: "FontAwesome";
    font-weight: 900;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: absolute;
    top: 50%;
    right: 0;
    margin-top: -18px;
    font-size: 13px;
    -webkit-transition: all 0.25s;
    -moz-transition: all 0.25s;
    -ms-transition: all 0.25s;
    -o-transition: all 0.25s;
    transition: all 0.25s;
}
#site-nav .down-menu >li.menu-item-has-children:hover a::after{
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
margin-top: -10px;
} 

如果主题是官方后续不会更新,也可以将上述css代码添加到主题的主css文件(如style.css),这里祥助还是建议添加到额外css区域,不会因主题更新而覆盖掉数据。

调试css样式代码

每个人使用的主题不同可能会导致小箭头的位置变化,发布后可以看到小箭头出现的位置可能会考上或靠下,需要自行通过F12审查元素工具进行调试:

  • 定位到css区域,调整margin-top: -18px;这一行自己进行调试,再修改回去额外css即可。
  • #site-nav .down-menu 通过F12审查元素,根据自己的实际class name进行修改
  • 需要注意的一点,如果wordpress博客主题没有自带font awesome的支持,需要自行去搜索font awesome插件(目前比较流行的有官方的Font Awesome和第三方的Font Awesome 4 Menus两种插件,前者是font awesome 5版本,因主题兼容问题跨境e站使用的是后者的4版本。不想安装插件也可以自行前往Awesome官方参考官方给出的本地化配置的方法。
  • 根据你网站配置的版本修改css代码: 
    Font Awesome 4版本:保持代码中的font-family: "FontAwesome";不变Font Awesome 5版本:将font-family: "FontAwesome";这一行修改为: font-family: Font Awesome 5 Free";
版权申明:跨境E站,版权所有丨如未注明,均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明本文作者和来源地址: https://www.yunglobe.com/menu-drop-menu-arrow.html

转载请注明:跨境E站 » 仿大前端给wordpress博客的菜单栏增加下拉小箭头

微信 OR 支付宝 扫描二维码
为本文作者 打个赏
pay_weixinpay_weixin
知识付费,金额随意 亲的支持是我更新的动力!~
喜欢 (2)or分享 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(2)个小伙伴在吐槽
  1. 挺好看的!
    台球俱乐部2019-09-17 20:31 回复
QQ交流
  • 为主的祥助 点击这里给我发消息
旺旺
  • Vincent 点这里给我发消息
QQ群
  • 阿里巴巴国际站数据化运营 阿里巴巴国际站数据化运营
关注微信
  • 扫一扫,有惊喜
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册