Skip to content
Snippets Groups Projects
Commit 89d4be53 authored by Ken Hawkins's avatar Ken Hawkins
Browse files

Add patern for dynamic menu highlighting

Documents https://github.com/ebiwd/EBI-Framework/issues/136
parent 0198ecfc
No related branches found
No related tags found
No related merge requests found
{{#markdown}}
### Notes
- The JS tries to automatically detect active menu item and append class `.active`.
- It's currently used a bit of jQuery, but this could be coded as vanilla JS.
- This pattern is likely of most help for JS-powered pages.
{{/markdown}}
{{> menu-auto-highlight}}
<header id="masthead" class="masthead">
<div class="masthead-inner row">
<!-- local-title -->
<div class="columns medium-12" id="local-title">
<h1><a href="../../" title="Back to [service-name] homepage">Detect active menu item</a></h1>
</div>
<!-- /local-title -->
<!-- local-nav -->
<nav>
<ul id="local-nav" class="dropdown menu float-left" data-description="navigational">
<li><a href="/">Current page (relative)</a></li>
<li><a href="/some-other-page">Not current page</a></li>
</ul>
</nav>
<!-- /local-nav -->
</div>
</header>
// Currently this uses jQuery, but could be done without
// Pull Requests welcome! :P
function setNavigation() {
var path = window.location.pathname;
console.log('current path:', path)
path = path.replace(/\/$/, "");
path = decodeURIComponent(path);
$("#local-nav a").each(function () {
var href = $(this).attr('href');
if (path.substring(0, href.length) === href) {
$(this).closest('li').addClass('active');
}
});
}
$(function () {
// when jquery is ready...
setNavigation();
});
content/websites/patterns/menu-auto-highlight/menu-auto-highlight.png

21.5 KiB

name: 'Detect and highlight active menu item'
tags:
- navigation
- layout
- menus
- 'JS Framework'
category: navigation
description: Use this pattern to automatically highlight the current menu item depending on path.
versions:
- 1.2.0
- 1.3.0
author:
name: Ken Hawkins
github: khawkins98
twitter: khawkins98
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