Working in Bootstrap-Knockout environment, I had to find the way to implement movable arrow for mobile menu.
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>
No comments:
Post a Comment