added inaccessible tree menu

assets/ik_treemenu.js

@@ -0,0 +1,196 @@
+;(function ( $, window, document, undefined ) {
+
+	var pluginName = 'ik_treemenu',
+		defaults = {
+			'menuTitle': 'Breakfast Menu',
+			'expandAll': true
+		};
+
+	/**
+	 * @constructs Plugin
+	 * @param {Object} element - Current DOM element from selected collection.
+	 * @param {Object} [options] - Configuration options.
+	 * @param {number} [options.menuTitle] - Menu title appers above the tree.
+	 * @param {number} [options.expandAll] - Expands all tree branches when true.
+	 */
+	function Plugin( element, options ) {
+
+		this._name = pluginName;
+		this._defaults = defaults;
+		this.element = $(element);
+		this.options = $.extend( {}, defaults, options) ;
+
+		this.init();
+	}
+
+	/** Initializes plugin. */
+	Plugin.prototype.init = function () {
+
+		var id, $elem, plugin;
+
+		plugin = this;
+		$elem = plugin.element;
+		id = 'tree' + $('.ik_treemenu').length; // create unique id
+
+		$elem.addClass('ik_treemenu');
+
+		$('<div/>') // add div element to be used with aria-labelledby attribute of the menu
+			.text(plugin.options.instructions) // get instruction text from plugin options
+			.addClass('ik_readersonly') // hide element from visual display
+			.attr({
+				'id': id + '_instructions', 
+			})
+			.appendTo($elem);
+
+		$('<div/>') // add menu title
+			.addClass('title')
+			.text( this.options.menuTitle )
+			.attr({ 
+				'id': id + '_title'
+			})
+			.prependTo($elem);
+
+		$elem 
+			.find('ul:first')  // set topmost ul element as a tree container
+			.attr({
+				'id': id
+			});
+
+		$elem // set all li elements as tree folders and items
+			.find('li')
+			.css({ 'list-style': 'none' })
+			.each(function(i, el) {
+
+				var $me;
+
+				$me = $(el);
+
+				$me.attr({
+					'id': id + '_menuitem_' + i
+					});
+
+				$($me.contents()[0]).wrap('<span></span>'); // wrap text element of each treitem with span element
+
+				if ($me.children('ul').length) {  // if the current treeitem has submenu
+
+					if (plugin.options.expandAll) { // expand or collapse all tree levels based on configuration
+              // don't do anything
+					} else {
+						$me.addClass('collapsed');
+					}
+
+					$me
+						.children('span')
+						.addClass('folder')
+            ;
+
+				} else {
+
+					//aria-selected goes here
+
+				}
+
+			})
+			.on('click', {'plugin': plugin}, plugin.onClick);
+
+	};
+
+	/** 
+	 * Selects treeitem.
+	 * 
+	 * @param {object} $item - jQuery object containing treeitem to select.
+	 * @param {object} plugin - reference to plugin.
+	 */
+	Plugin.prototype.selectItem = function($item, plugin) {
+		var $elem = plugin.element;
+
+		$elem.find('.focused') // remove highlight form previousely selected treeitem
+			.removeClass('focused');
+
+		if ($item.children('ul').length) { // highlight selected treeitem
+			$item.children('span').addClass('focused');
+		} else {
+			$item.addClass('focused');
+		}
+
+		$item.focus();
+	};
+
+	/** 
+	 * Toggles submenu.
+	 * 
+	 * @param {object} $item - jQuery object containing treeitem with submenu.
+	 */
+	Plugin.prototype.toggleSubmenu = function($item) {
+
+		if($item.children('ul').length) { // check if the treeitem contains submenu
+
+			if ($item.hasClass('collapsed')) {  // expand if collapsed
+
+				$item.removeClass('collapsed');
+
+			} else { 							// otherwise collapse
+
+				$item.addClass('collapsed');
+
+			}
+
+		}
+	}
+
+	/** 
+	 * Handles mouseover event on header button.
+	 * 
+	 * @param {Object} event - Event object.
+	 * @param {object} event.data - Event data.
+	 * @param {object} event.data.plugin - Reference to plugin.
+	 */
+	Plugin.prototype.onMouseOver = function (event) {
+
+		var plugin = event.data.plugin,
+			$me = $(event.currentTarget);
+
+		event.stopPropagation();
+
+		plugin.element // remove highlight form previous treeitem
+			.find('.mouseover')
+			.removeClass('mouseover');
+
+		$me.children('span') // add highlight to currently selected treeitem
+			.addClass('mouseover'); 
+
+	}
+
+	/** 
+	 * Handles click event on header button.
+	 * 
+	 * @param {Object} event - Event object.
+	 * @param {object} event.data - Event data.
+	 * @param {object} event.data.plugin - Reference to plugin.
+	 */
+	Plugin.prototype.onClick = function (event) {
+
+		var plugin = event.data.plugin,
+			$me = $(event.currentTarget);
+
+		event.preventDefault();
+		event.stopPropagation();
+
+		plugin.toggleSubmenu($me);
+		plugin.selectItem($me, plugin);
+	};
+
+	$.fn[pluginName] = function ( options ) {
+
+		return this.each(function () {
+
+			if ( !$.data(this, pluginName )) {
+				$.data( this, pluginName,
+				new Plugin( this, options ));
+			}
+
+		});
+
+	}
+
+})( jQuery, window, document );

tree.html

@@ -0,0 +1,60 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+		<title>IK Library: Tree Menu</title>
+		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
+		<link href="assets/ik_lib.css" rel="stylesheet" type="text/css">
+		<script src="assets/ik_utils.js"></script>
+		<script src="assets/ik_treemenu.js"></script>
+		<script>
+
+			$(document).ready(function() {
+
+				$(".tree").ik_treemenu( {'expandAll': false} ); 
+
+			});
+
+		</script>
+	</head>
+	<body>
+		<main>
+			<a href="index.html">&larr; Index</a>
+			<h1>Tree Menu</h1>
+			<div class="flexrow">
+				<nav class="tree">
+					<ul>
+						<li>Bread</li>
+						<li>Cereal</li>
+						<li>Fruit
+							<ul>
+								<li>Bananas</li>
+								<li>Oranges</li>
+								<li>Apples
+									<ul>
+										<li>Macintosh</li>
+										<li>Red Delicious</li>
+										<li>Granny Smith</li>
+									</ul>
+								</li>
+								<li>Pears</li>
+							</ul>
+						</li>
+						<li>Vegetables
+							<ul>
+								<li>Tomatos</li>
+								<li>Latice</li>
+							</ul>
+						</li>
+						<li>Yogurt</li>
+					</ul>
+				</nav>
+				<div class="content">
+					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla a mi at enim scelerisque laoreet. In hac habitasse platea dictumst. Sed eu sodales sapien, sed venenatis ex. Curabitur non condimentum tellus. Ut quis sapien tempus nunc vehicula suscipit sit amet non neque. Nullam pellentesque at metus et tristique. Praesent et ligula orci. Vestibulum mattis vel lacus quis pulvinar.</p>
+					<p>Curabitur elementum at quam varius fermentum. Duis ut bibendum ex. Suspendisse potenti. Aenean massa erat, tempor eu erat eu, tempus viverra lectus. Sed efficitur, ligula in cursus vulputate, lacus odio volutpat mauris, ac pulvinar ex velit id neque. Praesent ultricies augue vel eros suscipit convallis. Etiam aliquet tristique convallis. Vestibulum eu fringilla leo, ut ultrices metus. Integer mattis tempus auctor. Integer nec magna at metus suscipit sagittis at non risus. Vestibulum tincidunt, sem et suscipit pellentesque, metus nisl varius arcu, sed finibus felis purus ac nisi. Aliquam sollicitudin, lectus non sollicitudin consectetur, nibh mi porta mi, eget vestibulum magna ipsum sed elit. Duis sapien dolor, auctor non nunc vitae, convallis pretium felis. Sed consectetur at ligula a pulvinar. Nulla et felis a augue rutrum elementum vitae id nisl.</p>
+				</div>
+			</div>
+		</main>
+	</body>
+</html>