如何设置 jQuery mmenu 中打开子菜单的箭头的样式?
How to style the arrow that opens submenus in jQuery mmenu?
有谁知道打开(垂直)子菜单的 mmenu 中的箭头是如何生成的以及我如何通过 css 设置样式?任何提示表示赞赏。谢谢。
这些箭头的 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 应用于锚点,您将得到一个带有 2 像素边框线的 45 度旋转框。然后你可以删除你想要的每一边的边框,就像下面的代码有一个右箭头:
.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;
}
有谁知道打开(垂直)子菜单的 mmenu 中的箭头是如何生成的以及我如何通过 css 设置样式?任何提示表示赞赏。谢谢。
这些箭头的 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 应用于锚点,您将得到一个带有 2 像素边框线的 45 度旋转框。然后你可以删除你想要的每一边的边框,就像下面的代码有一个右箭头:
.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;
}