Sliding Nav Arrow

Question

Я пытаюсь создать скользящую стрелку на самой верхней части моего заголовка, которая скользит по горизонтали в соответствии с текущим активным пунктом меню.

EDIT - сайт, на который я ссылался как пример, больше неактивен.

Стрелка должна находиться в правильном положении, когда страница загружается (т. Е. Непосредственно над активным пунктом меню). В настоящее время мое усилие сдвигается с левой стороны экрана перед тем, как опуститься выше активной кнопки, когда страница загружается/обновляется.

В настоящее время я использую jQuery 1.8.3, Modernizr и Cycle Lite на своем сайте для выполнения других функций.

Answer 1

Следующая скрипку, демонстрирует, насколько я понимаю, вы ищете:

http://jsfiddle.net/8DZZQ/13/

Ниже приводится jsfiddle JavaScript. В этом я скорректировал nav_arrow с использованием полей, но вы могли бы просто полностью позиционировать его и переместить на основе offsetLeft из параметров.

Функция привязки, arr(), добавляется к событиям mouseover и mouseout, что означает, что новое местоположение nav_arrow может быть вычислено, и соответственно корректировка поля, при этом опция по умолчанию отправляется с помощью мыши, чтобы стрелка для возврата назад по умолчанию.

В каждом элементе меню добавлено свойство по умолчанию, чтобы событие onclick изменилось, какой элемент станет по умолчанию возвращаться - хотя это предполагает, что ваши ссылки являются динамическими и что страница не перезагружает/перейдите на другую страницу, если это так, тогда вы должны просто изменить, какой div имеет id = "d", на соответствующий элемент на html другой страницы и соответствующим образом скорректировать код.

Я также добавил массив finetuning, чтобы вы могли расположить свою стрелку над каждым div до нужной вам точки. Значения добавляются на левую позицию каждого пункта меню, так что для link1 сказать, его ширина 60ish и обивка/краями и т.д. тонкая настройка 34 размещения nav_arrow над центром:

window.onload = function() { 
    var fine = [36, 34, 34, 34]; 
    var mitms = document.getElementsByClassName('mitm'); 
    var l0 = (mitms[0].offsetLeft + fine[0]); 
    document.getElementById("nav_arrow").style.marginLeft = l0 + "px"; 

    for (var i = 0; i < mitms.length; i++) { 
     mitms[i].default = false; 
     mitms[i].fine = fine[i]; 
     mitms[i].onmouseover = function() {arr(this);}; 
     mitms[i].onmouseout = function() { 
      var tmp = document.getElementsByClassName('mitm'); 
      for (var j=0; j<tmp.length; j++) { 
       if (tmp[j].default === true) {arr(tmp[j]); break;} 
      } 
     }; 
     mitms[i].onclick = function() { 
      var tmp = document.getElementsByClassName('mitm'); 
      for (var j=0; j<tmp.length; j++) {tmp[j].default = false;} 
      this.default = true; 
     } 
    } 
    mitms[0].default = true; 
}; 

function arr(el) { 
    var mitms = document.getElementsByClassName('mitm'); 
    var l = el.offsetLeft + el.fine; 
    document.getElementById("nav_arrow").style.marginLeft = l + "px"; 
} 

HTML, является аналогично примеру вы дали:

<div id="nav"> 
    <div id="d" class="mitm"><a href="#">Default</a></div> 
    <div class="mitm"><a href="#">Link1</a></div> 
    <div class="mitm"><a href="#">Link2</a></div> 
    <div class="mitm"><a href="#">Link3</a></div> 
    <div id="nav_arrow"></div> 
</div> 

с плавными переходами прикрываясь в CSS:

#nav_arrow { 
    position: relative; 
    margin: 20px 0 0 0; 

    /* Gets you your triangle, no image needed */ 
    background: transparent; 
    border-left: 7px solid transparent; 
    border-right: 7px solid transparent; 
    border-top: 10px solid #000; 
    border-bottom: none; 
    width: 0px; 
    height: 0px; 
    font-size: 1px; 

    /* Transitions to give smooth movement*/ 
    transition: margin 1s; 
    -moz-transition: margin 1s; /* Firefox 4 */ 
    -webkit-transition: margin 1s; /* Safari and Chrome */ 
    -o-transition: margin 1s; /* Opera */ 
    /* IE doesn't support until ie10 */ 
} 

в IE не поддерживает CSS переходы, я уверен, будет подходящим решением jquery для того, чтобы сделать переходы IE плавными.

Надежды помогают!

Редактировать!

Это также возможно с помощью CSS просто любит из:

#menuitem1:hover ~ #nav_arrow { 
    margin: 0px 0px 0px 185px; 
} 

предполагающей menuitem1 является

<a id='menuitem1'></a> 

и используя переходы, как и раньше и т.д.