How to use a font-awesome icon for submenu

Montag, 6. Oktober 2014

Imagine you want to animate an arrow you used in a submenu. Just add a class .open when the submenu opens:

Html Fragment

<li aria-haspopup="true">
<a href="/url">
name
 </a><div class="submenu key_regional" aria-haspopup="false">submenuitems</div>
</li>

(aria-haspopup=true makes it work smooth on windows 8 touch!)

Less Fragment:

            > li {
                > a:after {
                    font-family: FontAwesome;
                    content: " \f078";
                    margin-right: 17px;
                    float: right;
                    font-size: 14px;
                    -moz-transform: rotate(0deg);
                    -ms-transform: rotate(0deg);
                    -o-transform: rotate(0deg);
                    -webkit-transform: rotate(0deg);
                    transform: rotate(0deg);
                    -moz-transition-property: all;
                    -o-transition-property: all;
                    -webkit-transition-property: all;
                    transition-property: all;
                    -moz-transition-duration: 0.5s;
                    -o-transition-duration: 0.5s;
                    -webkit-transition-duration: 0.5s;
                    transition-duration: 0.5s;
                }
            }

            > li.open {

                > a:after {                    
                    -moz-transform: rotate(180deg);
                    -ms-transform: rotate(180deg);
                    -o-transform: rotate(180deg);
                    -webkit-transform: rotate(180deg);
                    transform: rotate(180deg);
                    -moz-transition-property: all;
                    -o-transition-property: all;
                    -webkit-transition-property: all;
                    transition-property: all;
                    -moz-transition-duration: 0.5s;
                    -o-transition-duration: 0.5s;
                    -webkit-transition-duration: 0.5s;
                    transition-duration: 0.5s;
                }
            }