Wednesday, February 26, 2014

Turn the arrow


Working in Bootstrap-Knockout environment, I had to find the way to implement movable arrow for mobile menu.

It's quite easy and interesting task, which I would like to document.

HTML:
 <nav>
        <div class="navbar navbar-inverse" role="navigation">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" id="caret-mobile">
                        <span class="sr-only">Toggle navigation</span>
                        <span id="caret-mobile" class="caret-down"></span>
                    </button>
                    <a class="navbar-brand" href="#">Menu</a>
                </div>
                <div class="collapse navbar-collapse">
                    <ul class="nav navbar-nav">
                        <li><a href='#'>About</a></li>
                        <li><a href='#'>Contact Us</a></li>
                        <li><a href='#'>FAQ</a></li>
                        <li><a href='#'>View Cart</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </nav>
CSS:
.caret-down {
display: inline-block;
width: 0px;
height: 0px;
margin-left: 2px;
vertical-align: middle;
border-bottom: none;
border-top: 10px solid #FFFFFF;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
content: "";
}

.caret-up {
display: inline-block;
width: 0px;
height: 0px;
margin-left: 2px;
vertical-align: middle;
border-top: none;
border-bottom: 10px solid #FFFFFF;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
border-top-width: 0px;
border-top-style: dotted;
content: "";
}
Javascript:
<script src="jquery-2.0.3.js"></script>
<script src="bootstrap.min.js"></script>
<script type='text/javascript'>
        jQuery(document).ready(function () {
            jQuery('#caret-mobile').click(function () {
                $(".caret-down").toggleClass('caret-up');
            });
         
        });
</script>