I have created a menu that includes an arrow underneath which slides under the selected item. This arrow is identified by the class "marker".
Here is the HTML code:
<div class="services-block">
<div id="services-carousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner services" role="listbox" >
<div class="item active" id="services">
<ul class="tabbed-menu menu-list">
<li><a href="javascript:rudrSwitchTab('tb_1', 'content_1');" id="tb_1" class="tabmenu active">IT Consulting</a></li>
<li><a href="javascript:rudrSwitchTab('tb_2', 'content_2');" id="tb_2" class="tabmenu">Customer Relationship Management</a></li>
<li><a href="javascript:rudrSwitchTab('tb_3', 'content_3');" id="tb_3" class="tabmenu">Business Intelligence</a></li>
<li><a href="javascript:rudrSwitchTab('tb_4', 'content_4');" id="tb_4" class="tabmenu">Tourism and Hospitality</a></li>
<li><a href="javascript:rudrSwitchTab('tb_5', 'content_5');" id="tb_5" class="tabmenu">Finance and Banking</a></li>
<li><a class="right carousel-control" href="#services-carousel" role="button" data-slide="next">More <img src="images/right-arrow.png" alt=""></a></li>
</ul>
</div> <!--/.item active-->
</div> <!--/.carousel-inner-->
<div id="marker"></div>
</div> <!--/#services-carousel-->
</div> <!--services-block-->
Using jQuery, here is how I handle the marker movement:
$("#services ul > li").click(function(event){
var position = $(this).position();
var width = Math.round($(this).width()/2) - 5;
$("#marker").css('left', 'auto').transition({ x: position.left + width });
event.preventDefault();
})
Initially, the marker is positioned 14% to the left upon page load. However, I remove this styling in jQuery to prevent the marker from sliding to the left when clicking on another item. Is there any solution to make the arrow move smoothly to the next item without sliding to the left first?
CSS styling for the marker:
#marker {
background: transparent url("http://cdn7.unit4.com/images/theme/2014/icons/down.png") no-repeat scroll 50% 50%;
height: 16px;
left: 14%;
position: absolute;
z-index: 1;
width: 45px;}