CODEWITHSUNDEEP
jquerycssmmenu
chicky
chicky

Reputation: 135

How to style the arrow that opens submenus in jQuery mmenu?

does anyone know how the arrow in mmenu that opens (vertical) submenus is generated and how i can possibly style it via css? Any hint is appreciated. Thanks.

Link to mmenu website

Upvotes: 0

Views: 702

Answers (1)

Afshin
Afshin

Reputation: 2437

The css styles for these arrows are the following ones:

.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);
}

if you apply this css to an anchor, you will have a 45 degree rotated box with a 2 pixel border line. Then you can remove the border of each sides you want like the following code to have a right sided arrow:

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

and below code to have a left sided arrow: 

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

Upvotes: 1

Related Questions