Move Triangle Arrow Sideways

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() { 
 
    \t \t $('#arrowid').attr('class', 'arrow'); 
 
    $('#arrowid').addClass("position1"); 
 
}); 
 
$(".m2").hover(function() { 
 
    \t \t $('#arrowid').attr('class', 'arrow'); 
 
    $('#arrowid').addClass("position2"); 
 
}); 
 
    $(".m3").hover(function() { 
 
    \t $('#arrowid').attr('class', 'arrow'); 
 
    $('#arrowid').addClass("position3"); 
 
}); 
 
    $(".m4").hover(function() { 
 
    \t $('#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>

我很想刪除我的回答只有一次我看見你給其他用戶粗魯的評論，但是這可能幫助別人身邊，所以我會保持它現在。但嘗試學習一些禮儀。