drop down menu - bootstrap3 - caret reverse on click in navbar-nav -
i'm using bootstrap 3, , found few lines of css, work great, making caret reverse (upside-down) on click.
.navbar-nav .open > > b.caret { border-top: none; border-bottom: 4px solid; }
for reference, (pretty standard) dropdown:
<ul class="nav navbar-nav navbar-right"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> title text <b class="caret"></b> </a> <ul class="dropdown-menu"> <li>some submenu text</li> <li>some submenu text</li> </ul> </li> </ul>
why happening? understand it. thank you!
bootstrap caret
uses popular trick draw triangle in css.
you can see here
css code top , bottom arrows (triangles):
.arrow-up { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid black; } .arrow-down { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid black; }
Comments
Post a Comment