#togglenav がターゲットになっている場合、次のセレクターを使用して、クリック時にアイコン フォント アイコン (.toggler) を色付けしました。
.toggler {
color:orange;
}
body:not(:target) #togglenav:target .toggler {
color: lighten(orange, 25%);
}
そのため、ボタンがクリックされていないときはアイコンの色がオレンジ色で、クリックすると明るいオレンジ色のバリエーションに変わります。html は次のようになりました。
<nav role="navigation">
<ul class="navio" id="togglenav" tabindex="0">
<li><a href="#togglenav" class="icon-alone toggler" title="Menu open and close">
<span aria-hidden="true" data-icon="t"></span>
<span class="screen-reader-text">Menu open and close</span></a>
</li>
--><li><a class="navbase" href="#nav1">Menu 1</a></li><!--
--><li><a class="navbase" href="#nav2">Menu 2</a></li><!--
--><li><a class="navbase" href="#nav3">Menu 3</a></li><!--
--><li><a class="navbase" href="#nav4">Menu 4</a></li><!--
--><li><a class="navbase" href="#nav5">Menu 5</a></li><!--
--><li class="togglereset" aria-hidden="true"><a href="#top">Back to top</a></li>
</ul>
</nav>
ここで、.toggler クラスの「a」要素の位置を変更し、#togglenav 順不同リストと同じレベルに配置する必要がありました。
<nav role="navigation">
<a href="#togglenav" class="icon-alone toggler" title="Menu open and close">
<span aria-hidden="true" data-icon="t"></span>
<span class="screen-reader-text">Menu open and close</span>
</a>
<ul class="navio" id="togglenav" tabindex="0">
<li><a class="navbase" href="#nav1">Menu 1</a></li><!--
--><li><a class="navbase" href="#nav2">Menu 2</a></li><!--
--><li><a class="navbase" href="#nav3">Menu 3</a></li><!--
--><li><a class="navbase" href="#nav4">Menu 4</a></li><!--
--><li><a class="navbase" href="#nav5">Menu 5</a></li><!--
--><li class="togglereset" aria-hidden="true"><a href="#top">Back to top</a></li>
</ul>
</nav>
問題は、#togglenav がターゲット状態にあるときに、.toggler でフックを取得できないことです。#togglenav は .toggler の祖先ではないため、ボタンは常にオレンジ色のままです。とにかく#togglenavがターゲットになっている場合、.togglerをキャッチするエレガントな方法はありますか? よろしくラルフ