Sliding navigation

Question

I am trying to create a sliding arrow at the very top of my heading that slides horizontally according to the currently active menu item.

EDIT - The website I referred to as an example is no longer active.

The arrow should be in the correct position when the page loads (i.e., directly above the active menu item). Currently, my effort is accelerating on the left side of the screen before dropping above the active button when the page is loading / updating.

I am currently using jQuery 1.8.3, Modernizr and Cycle Lite on my site to perform other functions.

Answer 1

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

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

Below is jsfiddle javascript. In this I adjusted nav_arrow using fields, but you can also easily position it and move based on offsetLeft from the parameters.

The arr () link function is added to the mouseover and mouseout events, which means that the new nav_arrow location can be computed and the field adjusted accordingly, with the default option being sent with the mouse so that the arrow is up to spring back by default.

A default property has been added to each menu item so that the onclick event changes which item will return by default - although this assumes that your links are dynamic and that the page does not reload / does not change to another page, if so, then you should simply change which div has id = "d" to the corresponding element on another html page and adjust the code accordingly.

I also added a finetuning array, so you can position the arrow above each div to the point you need. Values ​​are added to the left position of each menu item, therefore for link 1 they say that its width is 60ish and with filling / fields, etc. Fine tune 34 center nav_arrow placement:

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

Since IE does not yet support css transitions, I am sure there will be a suitable jQuery solution for IE smooth transition.

Hope helps!

Edit

It is also possible with simple css using the following:

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

Assuming menuitem1

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

and using transitions still etc.