/home/mip/mip/public/template/AdminLTE/plugins/smartmenus-1.0.0/demo/keyboard-navigation.html
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>SmartMenus jQuery Website Menu - Keyboard Addon</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<!-- jQuery -->
<script type="text/javascript" src="../libs/jquery/jquery.js"></script>
<!-- SmartMenus jQuery plugin -->
<script type="text/javascript" src="../jquery.smartmenus.js"></script>
<!-- SmartMenus jQuery Keyboard Addon -->
<script type="text/javascript" src="../addons/keyboard/jquery.smartmenus.keyboard.js"></script>
<!-- SmartMenus jQuery init -->
<script type="text/javascript">
$(function() {
$('#main-menu').smartmenus({
subMenusSubOffsetX: 1,
subMenusSubOffsetY: -8
});
$('#main-menu').smartmenus('keyboardSetHotkey', '123', 'shiftKey');
});
</script>
<!-- SmartMenus core CSS (required) -->
<link href="../css/sm-core-css.css" rel="stylesheet" type="text/css" />
<!-- "sm-blue" menu theme (optional, you can use your own CSS, too) -->
<link href="../css/sm-blue/sm-blue.css" rel="stylesheet" type="text/css" />
<!-- #main-menu config - instance specific stuff not covered in the theme -->
<style type="text/css">
@media screen and (min-width: 768px) {
#main-menu {
position:relative;
z-index:9999;
width:auto;
}
#main-menu ul {
width:12em; /* fixed width only please - you can use the "subMenusMinWidth"/"subMenusMaxWidth" script options to override this if you like */
}
}
</style>
<!-- Respond.js for IE8 support of media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- YOU DO NOT NEED THIS - demo page content styles -->
<link href="../libs/demo-assets/demo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<nav role="navigation">
<!-- Sample menu definition -->
<ul id="main-menu" class="sm sm-blue">
<li><h2><a href="http://www.smartmenus.org/">Home</a></h2></li>
<li><h2><a href="http://www.smartmenus.org/about/">About</a></h2>
<ul>
<li><a href="http://www.smartmenus.org/about/introduction-to-smartmenus-jquery/">Introduction to SmartMenus jQuery</a></li>
<li><a href="http://www.smartmenus.org/about/themes/">Themes</a></li>
<li><a href="http://vadikom.com/about/#vasil-dinkov">The author</a></li>
<li><a href="http://www.smartmenus.org/about/vadikom/">The company</a>
<ul>
<li><a href="http://vadikom.com/about/">About Vadikom</a></li>
<li><a href="http://vadikom.com/projects/">Projects</a></li>
<li><a href="http://vadikom.com/services/">Services</a></li>
<li><a href="http://www.smartmenus.org/about/vadikom/privacy-policy/">Privacy policy</a></li>
</ul>
</li>
<li><a href="http://www.smartmenus.org/about/old-smartmenus-versions/">Old SmartMenus versions</a></li>
</ul>
</li>
<li><h2><a href="http://www.smartmenus.org/download/">Download</a></h2></li>
<li><h2><a href="http://www.smartmenus.org/support/">Support</a></h2>
<ul>
<li><a href="http://www.smartmenus.org/support/premium-support/">Premium support</a></li>
<li><a href="http://www.smartmenus.org/support/forums/">Forums</a></li>
</ul>
</li>
<li><h2><a href="http://www.smartmenus.org/docs/">Docs</a></h2></li>
<li><h2><a href="#">Sub test</a></h2>
<ul>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#" class="disabled">Disabled menu item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">more...</a>
<ul>
<li><a href="#">A pretty long text to test the default subMenusMaxWidth:20em setting for the sub menus</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">more...</a>
<ul>
<li><a href="#">Dummy item</a></li>
<li><a href="#" class="current">A 'current' class item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">more...</a>
<ul>
<li><a href="#">subMenusMinWidth</a></li>
<li><a href="#">10em</a></li>
<li><a href="#">forced.</a></li>
</ul>
</li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
</ul>
</li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">A pretty long text to test the default subMenusMaxWidth:20em setting for the sub menus</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">A pretty long text to test the default subMenusMaxWidth:20em setting for the sub menus</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">A pretty long text to test the default subMenusMaxWidth:20em setting for the sub menus</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">A pretty long text to test the default subMenusMaxWidth:20em setting for the sub menus</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">A pretty long text to test the default subMenusMaxWidth:20em setting for the sub menus</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
</ul>
</li>
</ul>
</li>
<li><h2><a href="#">Mega menu</a></h2>
<ul class="mega-menu">
<li>
<!-- The mega drop down contents -->
<div style="width:400px;max-width:100%;">
<div style="padding:5px 24px;">
<p>This is a mega drop down test. Just set the "mega-menu" class to the parent UL element to inform the SmartMenus script. It can contain <strong>any HTML</strong>.</p>
<p>Just style the contents as you like (you may need to reset some SmartMenus inherited styles - e.g. for lists, links, etc.)</p>
</div>
</div>
</li>
</ul>
</li>
</ul>
</nav>
<!-- =============================================================================== -->
<!-- ================= YOU DO NOT NEED ANYTHING AFTER THIS COMMENT ================= -->
<!-- =============================================================================== -->
<div class="columns">
<div class="left-column">
<div id="content">
<h1>SmartMenus Keyboard Addon</h1>
<p>This demo includes the SmartMenus jQuery Keyboard Addon which you can optionally include on your pages in addition to the SmartMenus jQuery plugin. It brings advanced keyboard navigation for all menu trees you may have on your pages.</p>
<p>By default without this addon the SmartMenus plugin includes basic keyboard navigation support - a user can use the <kbd>Tab</kbd> key to cycle through all main menu links, the <kbd>Enter</kbd> or <kbd>Space</kbd> key to activate the sub menus and also include their links in the tab order and the <kbd>Esc</kbd> key to deactivate the sub menus.</p>
<p>This addon takes keyboard navigation to a more advanced level by allowing the use of the keyboard <kbd>←</kbd> <kbd>→</kbd> <kbd>↑</kbd> <kbd>↓</kbd> arrow keys to browse the menu tree conveniently. Additionally a hotkey can be set too if needed - i.e. a keyboard shortcut that will send focus to any menu tree.</p>
<h2>Improving further accessibility</h2>
<p>You can consider improving even further accessibility for users of screen readers or text mode browsers by wrapping the main menu item links in headings - e.g. on this demo page <code><h2></code> tags are used. This would allow such users to skip from branch to branch more easily in certain scenarios.</p>
<h2>Demo</h2>
<p>Press <kbd>Shift</kbd> + <kbd>F12</kbd> to send focus to the first link in the main menu above (or press <kbd>Tab</kbd> as many times as need to focus some of the menu items). Then press <kbd>Enter</kbd>, <kbd>Space</kbd> or <kbd>↓</kbd> to activate some sub menu and then you can use the <kbd>←</kbd> <kbd>→</kbd> <kbd>↑</kbd> <kbd>↓</kbd> arrow keys to move the focus to other menu items. The script will automatically show/hide the sub menus as needed. You can press <kbd>Esc</kbd> at any time to deactivate the sub menus.</p>
<h2>Methods</h2>
<p>This addon introduces the following API method:</p>
<dl class="docs-terms">
<dt>keyboardSetHotkey</dt>
<dd>
<div>Sets a hotkey combination that will send focus to the menu tree.</div>
<div>Arguments:</div>
<dl class="docs-arguments">
<dt>keyCode</dt>
<dd>Type: Integer<br />The key code for the hotkey (<a href="http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes">a good char code reference</a>).</dd>
<dt>modifiers</dt>
<dd>Type: String, Array<br />The hotkey modifier key. None, one or multiple of <code>'ctrlKey'</code>, <code>'shiftKey'</code>, <code>'altKey'</code>, <code>'metaKey'</code>.</dd>
</dl>
<div>Code sample:</div>
<pre class="sh_javascript sh_sourceCode">// set Shift + F12 hotkey
$('#main-menu').smartmenus('keyboardSetHotkey', 123, 'shiftKey');
// set Ctrl + Alt + Shift + F12 hotkey
$('#main-menu').smartmenus('keyboardSetHotkey', 123, ['ctrlKey', 'altKey', 'shiftKey']);</pre>
<div>Note: It is recommended to always use a combination (i.e. modifier + key) rather than use just a single key to avoid preventing important default browser features from working. <code>'shiftKey'</code> is best supported and probably the safest modifier you could use. <code>'ctrlKey'</code> and <code>'altKey'</code> generally work well too, there were just some issues with older Opera versions. <code>'metaKey'</code> is the Mac <kbd title="Apple / Command">⌘</kbd> key and it only works on Macs so, unless you know what you are doing, you probably shouldn't use it.</div>
</dd>
</dl>
<p class="pagination"><a href="index.html">« Back to main demo</a></p>
</div>
</div>
<div class="right-column">
<script type="text/javascript">
addonScriptSrc = [ ['SmartMenus jQuery Keyboard Addon', '../addons/keyboard/jquery.smartmenus.keyboard.js'] ];
addonScriptInit = "\t\t$('#main-menu').smartmenus('keyboardSetHotkey', 123, 'shiftKey');\n";
</script>
<script type="text/javascript" src="../libs/demo-assets/themes-switcher.js"></script>
</div>
</div>
</body>
</html>