Sliding Nav Arrow

问题:

I'm trying to create a sliding arrow at the very top of my header that slides horizontally in accordance with the currently active menu item.

EDIT - the website I was referring to as an example is no longer active.

The arrow should be in the correct position when the page loads up (i.e. directly above the active menu item). Currently, my effort has it sliding in from the left hand side of the screen before coming to rest above the active button when the page loads/refreshes.

I'm currently using jQuery 1.8.3, Modernizr and Cycle Lite on my site for various other functions.

回答1:

The following fiddle, demonstrates as much as I understand you are looking for:

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

The following is the jsfiddle javascript. In this, I've adjusted the nav_arrow using margins, but you could just as easily have it positioned absolutely and move it based on the offsetLeft of the options.

The arrangement function, arr(), is added to the mouseover and mouseout events, meaning that the new location of the nav_arrow can be calculated, and the margin adjusted accordingly, with the default option being sent by mouseout in order for the arrow to spring back by default.

Each menu item has had the property default added to it, in order for an onclick event to change which item becomes the default to come back to - though this assumes your links are dynamic and that the page doesn't reload/change to another page, if thats the case then you should just alter which div has the id="d" to the appropriate item on the different page's html and adjust the code accordingly.

I've also added a finetuning array, so you can position your arrow over each div to the precise point you like. The values are added onto the left position of each menu item, so for link1 say, its width is 60ish and with padding/margins etc a fine tuning of 34 placing the nav_arrow over the centre:

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

The html is similar to the example site you gave:

<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>

With the smooth transitions being covered by the 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 */
}

As IE doesn't yet support css transitions, I'm sure there will be an appropriate jquery solution for making IE transitions smooth.

Hope helps!

Edit!

This is also possible with simply css using the likes of:

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

assuming menuitem1 is

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

and using transitions as before etc.