:target とは
:target疑似クラスは、ターゲットとなるアンカーリンク先の要素を表します。
アンカーリンクは、同じページにある項目や、別のページにうつるものです。
「URLのフラグメント」
URLの「https://mapletc.net/archives/948/#mein」のように、URLの最後につく「＃」に続くものです。
ページ内の特定の場所に飛ぶことができます。
「https://mapletc.net/archives/948/#mein」でいえば
main の id をもつ場所に飛べるのです。
「:target」を使用するとタイトル部分が強調されるようにするなどの装飾を行えます。
ハンバーガーメニュを表示
スマホなどで、上にある「三」のようなアイコンをクリックすると、メニューが出てくるようなものです。
「:target」を使用して実装することができます。
<nav id="nav">
<a href="#" aria-label="Close Navigation"><i class="fa fa-times"></i></a>
<ul>
<li><a href="#">Link One</a></li>
<li><a href="#">Link Two</a></li>
<li><a href="#">Link Three</a></li>
<li><a href="#">Link Four</a></li>
</ul>
</nav>#nav {
position: fixed;
top: 0;
height: 100%;
width: 80%;
max-width: 400px;
}
#nav:not(:target) {
right: -100%;
transition: right 1.5s;
}
#nav:target {
right: 0;
transition: right 1s;
}aria-label=”Close Navigation はBootstrapの✖のアイコン
コメント