我正在尝试在标题顶部创建一个滑动箭头,该箭头根据当前活动的菜单项水平滑动。
编辑 - 我所指的网站不再有效。当页面加载时(即直接位于活动菜单项上方),箭头应位于正确的位置。目前,我的努力是从屏幕的左侧滑入,然后在页面加载/刷新时在活动按钮上方停下来。
我目前正在我的网站上使用jQuery 1.8.3,Modernizr和Cycle Lite来执行各种其他功能。
答案 0 :(得分:5)
以下小提琴,尽可能多地展示您正在寻找:
以下是jsfiddle javascript。在这里,我使用边距调整了nav_arrow,但你可以很容易地将它定位,并根据选项的offsetLeft移动它。
安排函数arr()被添加到mouseover和mouseout事件中,这意味着可以计算nav_arrow的新位置,并相应地调整边距,默认选项由mouseout发送,以便箭头默认回弹。
每个菜单项都添加了属性默认值,以便onclick事件更改哪个项目成为默认值返回 - 虽然这假设您的链接是动态的并且页面不会重新加载/更改到另一个页面,如果是这样的情况那么你应该只改变哪个div具有id =“d”到不同页面的html上的相应项目并相应地调整代码。
我还添加了一个微调阵列,因此您可以将箭头放在每个div上,直到您想要的精确点。这些值被添加到每个菜单项的左侧位置,因此对于link1来说,它的宽度为60ish,并且使用填充/边距等进行微调,将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>
并像以前一样使用过渡等。