如何设置在 jQuery mmenu 中打开子菜单的箭头的样式？答案

【问题标题】：How to style the arrow that opens submenus in jQuery mmenu?如何设置在 jQuery mmenu 中打开子菜单的箭头的样式？
【发布时间】：2015-08-19 13:30:38
【问题描述】：

有谁知道打开（垂直）子菜单的 mmenu 中的箭头是如何生成的，以及我如何通过 css 设置它的样式？任何提示表示赞赏。谢谢。

Link to mmenu website

【问题讨论】：

箭头是使用 CSS3 转换属性生成的。它基本上是一个带有两个灰色边框（底部和左侧）的块元素，旋转了 45 度。有一些可视化工具可以帮助您创建变换矩阵。阅读：useragentman.com/blog/2011/01/07/…
谢谢，这让我明白了。

标签： jquery css mmenu

【解决方案1】：

这些箭头的 css 样式如下：

.mm-prev:before, .mm-next:after, .mm-arrow:after {
    content: '';
    border: 2px solid transparent;
    display: inline-block;
    width: 8px;
    height: 8px;
    margin: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    border-color: rgba(0, 0, 0, 0.3);
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

如果您将此 css 应用于锚点，您将拥有一个 45 度旋转的框，其边框线为 2 像素。然后你可以像下面的代码一样删除你想要的每一边的边框有一个向右的箭头：

.mm-next:after, .mm-arrow:after {
    border-top: none;
    border-left: none;
    right: 20px;
}

下面的代码有一个左箭头：

.mm-next:after, .mm-arrow:after {
    border-bottom: none;
    border-right: none;
    right: 20px;
}

【讨论】：

谢谢你给我详细解释！