移動三角矢印サイドウェイ

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>

私は、私は他のユーザーにあなたの失礼なコメントを見たら、私の答えを削除するように誘惑されたが、これは他の誰かが周りので、私は今それをしておこう助けるかもしれません。しかし、いくつかのマナーを学ぼう。