javascript - 向侧面移动三 Angular 箭头

Question

我在页眉上有一个带有链接的主菜单，并且我有一个三 Angular 形，它会随着用户从一个页面悬停到另一个页面而移动。我想让它继续前进，但我希望看到过渡显示在这个网站上:harris-active.co.uk

CSS 代码:

/* Navigation
--------------------------------------------------------------------------------*/

#nav-wrap .container {
clear: both;
overflow: hidden;
position: relative;
border:none;
}

#nav-wrap table {
width:100%;
border-collapse: collapse;
border-spacing: 0;
padding:0px;
}

#nav-wrap table td {
border-collapse: collapse;
border-spacing: 0;
}

#nav-wrap .container ul {
list-style: none;
float: right;
margin-right:40px;
}

#nav-wrap .container ul li {
list-style: none;
float: left;
margin-left:40px;
position:relative;
top:0px;
}

#nav-wrap .container ul li a {
display: block;
font-family: 'Open Sans', sans-serif;
font-weight: bold;
color: #999999;
text-decoration: none;
padding: 50px 0px;
border: 0;
outline: 0;
list-style-type: none;
font-size: 16px;
transition: 0.5s ease;
}

#nav-wrap .container ul li#active a,
#nav-wrap .container ul li a:hover {
color: #fff;
border: 0;
text-shadow: 0 0 3px rgba(255,255,255,0.5);
background: url(nav-hover.png) no-repeat center bottom;
transition: 0.5s ease;
}

这就是它目前在我的实时网站上的显示方式:tradey-lb.com

Answer 1

像这样的 html:

<ul>
  <li class="m1">menu1</li>
  <li class="m2">menu2</li>
  <li class="m3">menu3</li>
  <li class="m4">menu4</li>
  <li id="arrowid" class="arrow"></li>
</ul>

您可以使用绝对位置将三 Angular 形放置在任意位置，例如:

.arrow {  
  position:absolute;
  bottom:0px;
  left:85px;
}

然后为每个不同的悬停添加一些类，例如:

.position1 {
  left:85px;
}
.position2 {
  left:195px;
}
.position3 {
  left:300px;
}

还有一个简单的功能，当你将鼠标悬停在菜单上时，你会删除“箭头”上已经存在的任何类，然后添加所需的位置类......例如:

 $(".m1").hover(function () {
        $('#arrowid').attr('class', 'arrow');
    $('#arrowid').addClass("position1");
 });
 $(".m2").hover(function () {
        $('#arrowid').attr('class', 'arrow');
    $('#arrowid').addClass("position2");
 });

完整示例:

 $(".m1").hover(function () {
 		$('#arrowid').attr('class', 'arrow');
    $('#arrowid').addClass("position1");
 });
 $(".m2").hover(function () {
 		$('#arrowid').attr('class', 'arrow');
    $('#arrowid').addClass("position2");
 });
  $(".m3").hover(function () {
  	$('#arrowid').attr('class', 'arrow');
    $('#arrowid').addClass("position3");
 });
  $(".m4").hover(function () {
  	$('#arrowid').attr('class', 'arrow');
    $('#arrowid').addClass("position4");
 });

ul {position:relative; border-bottom:2px solid #000;}
li {display:inline-block;padding:12px 30px;overflow:visible;}
.arrow {
  width: 0; 
  height: 0; 
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;  
  border-bottom: 5px solid black;
  padding:0;
  position:absolute;
  bottom:0px;
  left:85px;
  transition: left 0.3s ease-in-out;
}
.position1 {
  left:85px;
}
.position2 {
  left:195px;
}
.position3 {
  left:300px;
}
.position4 {
  left:410px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul>
  <li class="m1">menu1</li>
  <li class="m2">menu2</li>
  <li class="m3">menu3</li>
  <li class="m4">menu4</li>
  <li id="arrowid" class="arrow"></li>
</ul>

一旦我看到您对其他用户的粗鲁评论，我很想删除我的回答，但这可能会对周围的其他人有所帮助，所以我暂时保留它。但请尝试学习一些礼仪。