Move Dreieck Pfeil Sideways

Question

Ich habe ein Hauptmenü auf der Kopfzeile mit Links, und ich habe ein Dreieck, das sich bewegt, wie der Benutzer von einer Seite zu einer anderen schwebt. Ich will es in Bewegung bleiben, aber ich mag der Übergang wie auf dieser Seite zeigt, um zu sehen: harris-active.co.uk

CSS-Code:

/* 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; 
} 

dies ist, wie es zur Zeit zeigt auf meine Live-Website: tradey-lb.com

Answer 1

mit einem hTML wie folgt aus:

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

Sie absolute Position verwenden könnte das Dreieck welcher Position auch immer wie zu platzieren:

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

Dann einige Klassen für jede unterschiedliche Hover hinzufügen:

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

Und mit einer einfachen Funktion, wenn Sie auf Ihrem Menü schweben Sie jede Klasse entfernen bereits dort auf „Pfeil“ und fügen Sie dann die Position Klasse benötigt ... wie:

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

Voll Beispiel:

$(".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>

war ich versuche, meine Antwort zu löschen, sobald ich Ihren unhöflich Kommentar an einem anderen Benutzer sah aber jemand anderes um so helfen kann, ist es für mich jetzt halten würde. Aber versuchen Sie, einige Manieren zu lernen.