use javascript for active menu item highlighting

This commit is contained in:
Anton Keks 2016-03-02 21:21:51 +02:00
parent 554e696c59
commit ade832dbe9

View File

@ -21,13 +21,19 @@
<section id="menu">
<ul>
<li class="{%if page.url == '/about/'%}active{%endif%}"><a href="/about/">About</a></li>
<li class="{%if page.url == '/screenshots/'%}active{%endif%}"><a href="/screenshots/">Screenshots</a></li>
<li class="{%if page.url == '/download/'%}active{%endif%}"><a href="/download/">Download</a></li>
<li class="{%if page.url == '/faq/'%}active{%endif%}"><a href="/faq/">FAQ</a></li>
<li class="{%if page.url == '/contribute/'%}active{%endif%}"><a href="/contribute/">Contribute</a></li>
<li><a href="/about/">About</a></li>
<li><a href="/screenshots/">Screenshots</a></li>
<li><a href="/download/">Download</a></li>
<li><a href="/faq/">FAQ</a></li>
<li><a href="/contribute/">Contribute</a></li>
</ul>
</section>
<script>
var menuItems = document.querySelectorAll('#menu a');
for (var i = 0; i < menuItems.length; i++) {
if (location.href.indexOf(menuItems[i].href) == 0) menuItems[i].parentNode.classList.add('active');
}
</script>
</header>
</div>