2016-04-15 7 views

答えて

0

このようなものが必要な場合は、純粋なCSSを使用して達成することができます(nav li.selected a:スタイル定義後に気付く)。

ここでの作業スニペットは

* { 
 
    background: #454545; 
 
} 
 
nav { 
 
    width: 500px; 
 
    height: 60px; 
 
    margin: 0 auto; 
 
} 
 
nav ul { 
 
    width: 100%; 
 
} 
 
nav li { 
 
    display: inline-block; 
 
    float: left; 
 
    margin-top: 12px; 
 
    position: relative; 
 
} 
 
nav li a { 
 
    color: #fff; 
 
    text-decoration: none; 
 
    padding: 11px 20px; 
 
    text-transform: uppercase; 
 
} 
 
nav li.selected a { 
 
    color: red; 
 
} 
 
nav li.selected a:after { 
 
    border-left: solid transparent 10px; 
 
    border-right: solid transparent 10px; 
 
    border-bottom: solid #fff 10px; 
 
    bottom: -12px; 
 
    content: " "; 
 
    left: 50%; 
 
    margin-left: -10px; 
 
    position: absolute; 
 
}
<nav> 
 
    <ul> 
 
    <li><a href="/page1/">Experience</a> 
 
    </li> 
 
    <li class="selected"><a href="/page2/">Visual Identity</a> 
 
    </li> 
 
    <li><a href="/page3/">tone of voice</a> 
 
    </li> 
 
    </ul> 
 
</nav>

です
関連する問題