Commit 491680be authored by Laura Kalbag's avatar Laura Kalbag

Improve active navigation highlighting

Using the code I’ve recently added on my own blog, this means any sub-page of videos, events and news will also have nav highlighting, and that all active navigation highlighting is also given the correct aria attribute so the active navigation highlighting is also valuable for those who can’t see the coloured tab.
parent 26b66aeb
......@@ -2,8 +2,14 @@
{{- $currentPage := . -}}
{{ if .Site.Menus.main }}
<ul>
{{ range .Site.Menus.main -}}
<li {{if or ($currentPage.IsMenuCurrent "main" .) ($currentPage.HasMenuCurrent "main" .) }} class= 'active'{{ end }}>
{{ $current := . }}
{{ range .Site.Menus.main }}
{{ $active := or ($current.IsMenuCurrent "main" .) ($current.HasMenuCurrent "main" .) }}
{{ $active = or $active (eq .Name $current.Title) }}
{{ $active = or $active (and (eq .Name "News") (eq $current.Section "news")) }}
{{ $active = or $active (and (eq .Name "Videos") (eq $current.Section "videos")) }}
{{ $active = or $active (and (eq .Name "Events") (eq $current.Section "events")) }}
<li {{ if $active }}class="active" aria-current="true" {{ end }}>
<a href='{{ .URL }}'>
<span class="highlight"><span class='inner'>
{{- .Name -}}
......
......@@ -616,7 +616,6 @@ nav ul li a:active .highlight {
}
nav ul li.active a .highlight,
body.videos nav ul li a[href='/videos/'] .highlight,
body.dynamic-template nav ul li a[href='/fund-us/'] .highlight,
body.fund-us nav ul li a[href='/fund-us/'] .highlight {
background-color: #FFF697;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment