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

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

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

鼠标悬浮上去菜单下拉小箭头后，展开其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协议进行授权