Question

我在标题上有一个带链接的主菜单，我有一个三角形，当用户从一个页面悬停到另一个页面时移动。我想继续保持这种状态，但我希望看到这个转变显示在这个网站上：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>

您可以使用绝对位置将三角形放置在以下位置：

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

一旦我看到你对其他用户的粗鲁评论，我很想删除我的答案，但这可能会帮助其他人，所以我现在就保留它。但试着去学习一些礼仪。

向侧面移动三角箭头

1 个答案: