滑动导航箭头 [英] Sliding Nav Arrow
问题描述
我试图在标题顶部创建一个滑动箭头，根据当前活动的菜单项水平滑动。
编辑 - 网站我指的是一个例子，不再活动。
当页面加载时（即直接在活动菜单项上方），箭头应该在正确的位置。目前，我的努力是从页面左侧进入，在页面加载/刷新之前停留在活动按钮上方。
我目前使用jQuery 1.8.3，Modernizr和Cycle Lite在我的网站上的各种其他功能。
根据我的理解，您正在寻找：
http：/ /jsfiddle.net/8DZZQ/13/
以下是jsfiddle javascript。在这里，我已经调整了nav_arrow使用边距，但你可以很容易地定位绝对和移动它的选项的offsetLeft。
函数arr（）被添加到mouseover和mouseout事件，意味着可以计算nav_arrow的新位置，并相应地调整边距，默认选项由mouseout发送，以便箭头回弹默认值。
每个菜单项都已经添加了属性默认值，以便onclick事件更改哪个项目将成为默认值返回 - 虽然这假设你的链接是动态的，页面不会重新加载/更改到另一个页面，如果是这样的情况下，那么你应该更改哪个div具有id =d到不同的页面的html上的相应项目，并相应地调整代码。
我还添加了一个finetuning数组，所以你可以将箭头放在每个div到你想要的精确点。这些值被添加到每个菜单项的左侧位置，因此对于link1来说，其宽度为60，并且具有填充/边距等微调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 [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 =dclass =mitm>< a href =＃>默认< / 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;
/ *获取你的三角形，不需要图像* /
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;
/ *过渡到平滑运动* /
过渡：margin 1s;
-moz-transition：margin 1s; / * Firefox 4 * /
-webkit-transition：margin 1s; / * Safari和Chrome * /
-o-transition：margin 1s; / * Opera * /
/ * IE不支持直到ie10 * /
}
$ b b
由于IE还不支持css转换，我相信会有一个合适的jquery解决方案，使IE转换顺利。
Hope帮助！ / p>
编辑！
＃menuitem1：hover〜#nav_arrow {
margin：0px 0px 0px 185px;
}
假设menuitem1
< a id ='menuitem1'>< / a>
并使用之前的转换等。
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.
The following fiddle, demonstrates as much as I understand you are looking for:
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.
这篇关于滑动导航箭头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
