アンダーラインアニメーションのレスポンシブメニュー

Question

私は、ターゲットと滑っているアンダーラインのメニューに取り組んでいます。私は本当に近いですが、レスポンシブにすることはできません。ウィンドウのサイズを変更するときに、リンクの中央に「下線」が付くことはありません。ここ

は、各要素が33.33パーセント広いJSFiddle

nav { 
    margin-top:30px; 
    font-size: 15pt; 
    background: #FFF; 
    position: relative; 
    width: 100%; 
    height:50px; 
} 
nav a { 
    text-align:center; 
    background: #FFF; 
    display: block; 
    float: left; 
    padding: 2% 0; 
    width: 33.33%; 
    text-decoration: none; 
    transition: .4s; 
    color: red; 
} 
.effect { 
    position: absolute; 
    left: 22.5%; 
    transition: 0.4s ease-in-out; 
} 
nav a:nth-child(1):target ~ .effect { 
    left: 22.5%; 
    /* the middle of the first <a> */ 
} 
nav a:nth-child(2):target~ .effect { 
    left: 56%; 
    /* the middle of the second <a> */ 
} 
nav a:nth-child(3):target ~ .effect { 
    left: 90%; 
    /* the middle of the third <a> */ 
} 
.ph-line-nav .effect { 
    width: 34px; 
    height: 2px; 
    bottom: 5px; 
    background: blue; 
    margin-left:-50px; 
} 

Answer 1

あります。それを半分に分けて16.66％なので、それが要素の中心になります。デフォルトの左値として16.66％を使用すると、.effectの左端が最初の要素の中央に置かれます。 .effectを真の中心の中心に置くには、translateX()を使用してそれを自分の50％戻します。

したがって、最初の要素の左端は16.66％になります。

2番目の要素は49.99パーセントであろう（99.99/2）

第三の要素は83.33パーセントであろう（99.99から16.6または66.66 + 16.66）

nav { 
 
    margin-top:30px; 
 
    font-size: 15pt; 
 
    background: #FFF; 
 
    position: relative; 
 
    height:50px; 
 
    display: flex; 
 
} 
 
nav a { 
 
    text-align:center; 
 
    background: #FFF; 
 
    display: block; 
 
    padding: 2% 0; 
 
    flex-basis: 33.33%; 
 
    text-decoration: none; 
 
    transition: .4s; 
 
    color: red; 
 
} 
 
.effect { 
 
    position: absolute; 
 
    left: 16.66%; 
 
    transition: 0.4s ease-in-out; 
 
    transform: translateX(-50%); 
 
} 
 
nav a:nth-child(1):target ~ .effect { 
 
    left: 16.66%; 
 
    /* the middle of the first <a> */ 
 
} 
 
nav a:nth-child(2):target~ .effect { 
 
    left: 49.99%; 
 
    /* the middle of the second <a> */ 
 
} 
 
nav a:nth-child(3):target ~ .effect { 
 
    left: 83.33%; 
 
    /* the middle of the third <a> */ 
 
} 
 
.ph-line-nav .effect { 
 
    width: 34px; 
 
    height: 2px; 
 
    bottom: 5px; 
 
    background: blue; 
 
}

<nav class="ph-line-nav"> 
 
    <a href="#A1" id="A1">AA</a> 
 
    <a href="#A2" id="A2">AA</a> 
 
    <a href="#A3" id="A3">AA</a> 
 
    <div class="effect"></div> 
 
</nav>