0
SharePointページのトップナビゲーションで選択したリンクを指すimgを設定しようとしています。誰かがCSSで私を助けてくれますか?Sharepointトップナビゲーション選択したリンクのimg
ビジュアルアイデンティティの下で三角形。
SharePointページのトップナビゲーションで選択したリンクを指すimgを設定しようとしています。誰かがCSSで私を助けてくれますか?Sharepointトップナビゲーション選択したリンクのimg
ビジュアルアイデンティティの下で三角形。
このようなものが必要な場合は、純粋な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>