Accessible Vertical Tabbed Menu

HTML

              
                <p class="top-links">
	<a href="#" id="some-link-1" tabindex="0" >Link 1</a> 
	<a href="#" id="some-link-2" tabindex="0">Link 2</a> 
	<a href="#" id="some-link-3" tabindex="0">Link 3</a> 
	<a href="#" id="some-link-4" tabindex="0">Link 4</a> 
	<a href="#" id="some-link-5" tabindex="0">Link 5</a> 
</p>

<div id="grid-container">
	<ul role="tablist" aria-orientation="vertical" id="navigation-container" tabindex="-1">
		<li role="tab" aria-controls="mammals-panel" aria-selected="false">
						<a href="#" id="mammals-anchor" class="navigation-links mammals" tabindex="0"><span class="screen-reader-text">Learn more about</span>Mammals<span class="screen-reader-text">as pets</span> </a>
		</li>
		<li role="tab" aria-controls="amphibians-panel" aria-selected="false">
						<a href="#" id="amphibians-anchor" class="navigation-links amphibians" tabindex="0"><span class="screen-reader-text">Learn more about</span>Amphibians<span class="screen-reader-text">as pets</span> </a>
		</li>
		<li role="tab" aria-controls="reptiles-panel" aria-selected="false">
						<a href="#" id="reptiles-anchor" class="navigation-links reptiles" tabindex="0"><span class="screen-reader-text">Learn more about</span>Reptiles<span class="screen-reader-text">as pets</span> </a>
		</li>
		<li role="tab" aria-controls="birds-panel" aria-selected="false">
						<a href="#" id="birds-anchor" class="navigation-links birds" tabindex="0"><span class="screen-reader-text">Learn more about</span>Birds<span class="screen-reader-text">as pets</span> </a>
		</li>
		<li role="tab" aria-controls="fish-panel" aria-selected="false">
						<a href="#" id="fish-anchor" class="navigation-links fish" tabindex="0"><span class="screen-reader-text">Learn more about</span>Fish<span class="screen-reader-text">as pets</span> </a>
		</li>
		<li role="tab" aria-controls="insects-panel" aria-selected="false">
						<a href="#" id="insects-anchor" class="navigation-links insects" tabindex="0"><span class="screen-reader-text">Learn more about</span>Insects<span class="screen-reader-text">as pets</span> </a>
		</li>
		<li role="tab" aria-controls="arachnids-panel" aria-selected="false">
						<a href="#" id="arachnids-anchor" class="navigation-links arachnids" tabindex="0"><span class="screen-reader-text">Learn more about</span>Arachnids<span class="screen-reader-text">as pets</span> </a>
		</li>
		<li role="tab" aria-controls="invertibrates-panel" aria-selected="false">
						<a href="#" id="invertibrates-anchor" class="navigation-links invertibrates" tabindex="0"><span class="screen-reader-text">Learn more about</span>Invertebrates<span class="screen-reader-text">as pets</span> </a>
		</li>
	</ul><!-- #navigation-container -->
	<div id="content-container">
		<div role="tabpanel" id="mammals-panel" class="panel-content" aria-labelledby="mammals-anchor" style="display:none;">
			<h1><label for="mammals-textarea">Mammals</label></h1>
			<p><textarea id="mammals-textarea" name="textarea-mammals" tabindex="0">A textarea input for mammals</textarea></p>
		</div><!-- #mammals-panel .panel-content -->
		<div role="tabpanel" id="amphibians-panel" class="panel-content" aria-labelledby="amphibians-anchor" style="display:none;">
			<h1><label for="amphibians-textarea">Amphibians</label></h1>
			<p><textarea id="amphibians-textarea" name="textarea-amphibians" tabindex="0">A textarea input for amphibians</textarea></p>
		</div><!-- #amphibians-panel .panel-content -->
		<div role="tabpanel" id="reptiles-panel" class="panel-content" aria-labelledby="reptiles-anchor" style="display:none;">
			<h1><label for="reptiles-textarea">Reptiles</label></h1>
			<p><textarea id="reptiles-textarea" name="textarea-reptiles" tabindex="0">A textarea input for reptiles</textarea></p>
		</div><!-- #reptiles-panel .panel-content -->
		<div role="tabpanel" id="birds-panel" class="panel-content" aria-labelledby="birds-anchor" style="display:none;">
			<h1><label for="birds-textarea">Birds</label></h1>
			<p><textarea id="birds-textarea" name="textarea-birds" tabindex="0">A textarea input for birds</textarea></p>
		</div><!-- #birds-panel .panel-content -->
		<div role="tabpanel" id="fish-panel" class="panel-content" aria-labelledby="fish-anchor" style="display:none;">
			<h1><label for="fish-textarea">Fish</label></h1>
			<p><textarea id="fish-textarea" name="textarea-fish" tabindex="0">A textarea input for fish</textarea></p>
		</div><!-- #fish-panel .panel-content -->
		<div role="tabpanel" id="insects-panel" class="panel-content" aria-labelledby="insects-anchor" style="display:none;">
			<h1><label for="insects-textarea">Insects</label></h1>
			<p><textarea id="insects-textarea" name="textarea-insects" tabindex="0">A textarea input for insects</textarea></p>
		</div><!-- #insects-panel .panel-content -->
		<div role="tabpanel" id="arachnids-panel" class="panel-content" aria-labelledby="arachnids-anchor" style="display:none;">
			<h1><label for="arachnids-textarea">Arachnids</label></h1>
			<p><textarea id="arachnids-textarea" name="textarea-arachnids" tabindex="0">A textarea input for arachnids</textarea></p>
		</div><!-- #arachnids-panel .panel-content -->
		<div role="tabpanel" id="invertibrates-panel" class="panel-content" aria-labelledby="invertibrates-anchor" style="display:none;">
			<h1><label for="invertibrates-textarea">Invertebrates</label></h1>
			<p><textarea id="invertibrates-textarea" name="textarea-invertibrates" tabindex="0">A textarea input for invertibrates</textarea></p>
		</div><!-- #invertibrates-panel .panel-content -->
	</div><!-- #content-container -->
</div><!-- #grid-container -->
<p class="bottom-links">
	<a href="#" tabindex="0">Link 6</a>
	<a href="#" tabindex="0">Link 7</a> 
	<a href="#" tabindex="0">Link 8</a> 
	<a href="#" tabindex="0">Link 9</a> 
	<a href="#" tabindex="0">Link 10</a> 
</p>

CSS

              
                body, html, p {
	margin:0;
	padding:0;
	}
#grid-container {
	display: grid;
	grid-template-columns: 175px 1fr;
	grid-gap:20px;
	margin:0 20px;
	}
#navigation-container {
	margin-top:40px;
	grid-area: 1 / 1 / 2 / 2;
	}
#content-container {
	grid-area: 1 / 2 / 2 / 6;
	background:#fff;
	}
h1 {
	margin:0;
	padding:0;
	font-size:30px;
	font-weight:bold;
	line-height:40px;
	}
a, a:active, a:focus, a:visited {
	text-decoration:none;
	color:#1f77be;
	}
ul {
	margin:0;
	padding:0;
	list-style-type:none;
	}
ul li {
	margin:0;
	padding:0;
	}
ul li a {
	display:block;
	margin-top:-1px;
	padding:0 10px;
	height:30px;
	line-height:30px;
	border:1px solid #337dc1;
	background:#fafafa;
	color:#337dc1;
	}
ul li a:hover {
	background:#e0e0e0;
	}
ul li a:focus {
	border:1px solid #337dc1;
	}
ul li a.active {
	background:#fff;
	}

textarea {
	margin:0;
	width: 100%;
	height: 250px;
	border:1px solid #ccc;
	padding:10px;
	}
textarea::placeholder {
	color:#ccc;
	}

.top-links {
	margin:0 25px 0 0;
	line-height:40px;
	text-align:right;
	}

.bottom-links {
	margin:10px 0 0 217px;
	}
.top-links a:not(:last-child), .bottom-links a {
	margin-right:25px;
	}
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal;
	}

:focus {
	border:1px solid #337dc1;
	color: #124964;
	box-shadow:
		0 0 0 1px #5b9dd9,
		0 0 2px 1px rgba(30, 140, 190, .8) !important;
	}

JS

              
                function invert_object(obj) {
	new_obj = {};
	rev_obj = Object.keys(obj).reverse();
	rev_obj.forEach(function(i) {
		new_obj[i] = obj[i];
	})
	return new_obj;
}

function get_supported_keycodes() {
	return [35, 36, 37, 38, 39, 40, 9];
}

function map_menu_items(menu) {
	var i, prev, curr, next;
 	var item_classes = {
		'forward': {},
		'reverse': {},
	};
 	for (i=0; i<menu.length; i++) {
		curr = menu[i].classList[1];
		if (i === 0) {
			prev = menu[menu.length-1].classList[1];
			next = menu[i+1].classList[1];
		} else if (i === menu.length-1) {
			prev = menu[i-1].classList[1];
			next = menu[0].classList[1];
		} else {
			prev = menu[i-1].classList[1];
			next = menu[i+1].classList[1];
		}
		item_classes.forward[curr] = next;
		item_classes.reverse[curr] = prev;
	}
	return item_classes;
}

function get_menu() {
	return document.getElementsByClassName("navigation-links");
}

function  get_next_destination(menu, event) {
	var map = map_menu_items(menu);
	var self = event.target.id;
	if (!get_supported_keycodes().includes(event.keyCode)) {
		return self;
	} else if (event.keyCode===35) {
		return menu[menu.length-1].classList[1]+'-anchor';
	} else if (event.keyCode===36) {
		return menu[0].classList[1]+'-anchor';
	} else if (event.keyCode===37) {
		return map.reverse[event.target.classList[1]]+'-anchor';
	} else if (event.keyCode===38) {
		return map.reverse[event.target.classList[1]]+'-anchor';
	} else if (event.keyCode===39) {
		return map.forward[event.target.classList[1]]+'-anchor';
	} else if (event.keyCode===40) {
		return map.forward[event.target.classList[1]]+'-anchor';
	} else if (event.keyCode===32) {
		return self;
	} else if (event.keyCode===13) {
		return self;
	} else if (event.keyCode===9) {
		var self_element = document.getElementById(self);
		self_element.classList.add('active');
		var tabbable = get_tabbable_items();
		var tabstops = find_previous_tabbable_item(event);
		if (event.shiftKey) {
			var focus_element = tabbable[tabstops.next];
		} else {
			var focus_element = tabbable[tabstops.prev];
		}
		return focus_element.id;
	}
}

function get_tabbable_items() {
	var raw_elements = document.querySelectorAll('a:not([disabled]), button:not([disabled]), input[type=text]:not([disabled]), [tabindex]:not([disabled]):not([tabindex="-1"]');
	var visible_elements = [];
	for (i=0; i<raw_elements.length; i++) {
		if (raw_elements[i].offsetWidth === 0 && raw_elements[i].offsetHeight === 0) {
			continue;
		}
		visible_elements.unshift(raw_elements[i]);
	}
	return visible_elements;
}

function find_previous_tabbable_item(event) {
	var elements = get_tabbable_items();
	var i, prev, curr, next;
	var tabstops = {
		prev: 0,
		next: elements.length-1
	};
	for (i=0; i<elements.length; i++) {
		if (elements[i].id !== event.target.id) {
			continue;
		}
		curr = i;
		break;
	}
	if (elements[curr-1]) {
		tabstops.prev = curr-1;
	} else {
		tabstops.prev = elements.length-1;
	}
	if (elements[curr+1]) {
		tabstops.next = curr+1;
	} else {
		tabstops.next = 0;
	}
	return tabstops;
}

var el = document.getElementById("navigation-container");
el.onkeydown = function(event) {
	event = event || window.event;
	event.preventDefault();
	var menu = get_menu();
	if (!event.shiftKey) {
		for (var i = 0; i < menu.length; i++) {
			menu[i].className = menu[i].className.replace(" active", "");
		}
	}
	if (get_supported_keycodes().includes(event.keyCode)) {
		var chosen_item = document.getElementById(get_next_destination(menu, event));
	} else {
		var chosen_item = document.getElementById(event.target.id);
	}
	if (chosen_item) {
		chosen_item.click();
		chosen_item.focus();
	}
};

document.addEventListener("click", function (event) {
	if (event.target.classList[0] !== "navigation-links") {
		return;
	}
	event.preventDefault();
	var i, menu, panel_content;
	menu = get_menu();//document.getElementsByClassName("navigation-links");
	for (i=0; i<menu.length; i++) {
		menu[i].className = menu[i].className.replace(" active", "");
		menu[i].parentElement.setAttribute('aria-selected', 'false');
	}
	event.target.classList.add("active");
	event.target.parentNode.setAttribute('aria-selected', 'true');
	panel_content = document.getElementsByClassName("panel-content");
	for (i = 0; i < panel_content.length; i++) {
		panel_content[i].style.display = "none";
	}
	document.getElementById(event.target.classList[1]+'-panel').style.display = "block";

}, false);
menu = get_menu(); //document.getElementsByClassName("navigation-links");
document.getElementById(menu[0].id).click();

999px

Insecure Resource

About JavaScript Preprocessors

About External Resources

About Packages

HTML

CSS

JS

Console

HTML

HTML Preprocessor

About HTML Preprocessors

Add Class(es) to <html>

Adding Classes

Stuff for <head>

About the <head>

Insecure Resource

CSS

CSS Preprocessor

About CSS Preprocessors

CSS Base

About CSS Base

Vendor Prefixing

About Vendor Prefixing

Add External Stylesheets/Pens

About External Resources

JavaScript

JavaScript Preprocessor

About JavaScript Preprocessors

Add External Scripts/Pens

About External Resources

Packages

Add Packages

About Packages

Behavior

Auto Save

Auto-Updating Preview

Format on Save

Editor Settings

Code Indentation

Code Indent width

Want to change your Syntax Highlighting theme, Fonts and more?

HTML

CSS

JS

Console

Editor Commands

Editor Focus

Misc

HTML Specific

Pen Actions