arrow under menu item

Question

I made a menu with an arrow below which slides under the clicked item. The arrow is the div with the class "marker".

HTML:

<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">Consultanță IT</a></li>
          <li><a href="javascript:rudrSwitchTab('tb_2', 'content_2');" id="tb_2" class="tabmenu">Managementul Relațiilor cu Clienții</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">Turism și Ospitalitate</a></li>
          <li><a href="javascript:rudrSwitchTab('tb_5', 'content_5');" id="tb_5" class="tabmenu">Finanțe și Bănci</a></li>
          <li><a class="right carousel-control" href="#services-carousel" role="button" data-slide="next">Mai multe <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-->

jQuery:

  $("#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();
  })

So, when the page is loaded, the marker is moved 14% to left in order to be below the center of the item. I remove this style in jQuery because when another item is clicked, those 14% are added and the marker doesen't slide to the center of the next item. And here is the problem, when I click on the following item, the attribute left is being set to auto, which makes the arrow slide to left, near the left margin of the div with the id 'services' which has the width 100%, and then it slides below the center of the clicked idem. So, I want the arrow to move to the next item without sliding first to the left. Has anyone any idea how can I solve this?

CSS:

#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;}

Web pundit Web pundit · Accepted Answer · 2015-08-05T14:14:05

just modify the script as below, and add css transition effect if you want the marker to move smoothly. I created a working example HERE with your code and some random css

$("#services ul > li").click(function(event){
    var position = $(this).position().left;
    var width = Math.round($(this).width()/2) - 5;
    var arrowPos = position + width;
    $('#marker').css('left', arrowPos);
    event.preventDefault();
  });

arrow under menu item

1 Answers