How to use left and right arrow keys to navigate in bootstrap navbar
Question
Bootstrap 3 menu süstem is defined in html below. If menu pad is opened, pressing left and right arrow keys is ignored.
How to force left arrow to open previous menu and and right arrow to open next menu pad just like in regular windows menu? In jquery ui menu bar left and right arrows work in this way. How to make them work in bootstrap navbar also ?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<base href="http://localhost:52216/" />
<link rel="stylesheet" href="/admin/themes/redmond/jquery-ui.css" type="text/css" />
<link rel="stylesheet"
href="//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link href="/admin/Content/bootstrap.css" rel="stylesheet"/>
<link href="/admin/Content/bootstrap-theme.css" rel="stylesheet"/>
<link href="/admin/Content/Css/Site.css" rel="stylesheet"/>
<script src="/admin/Scripts/jquery-1.11.2.js"></script>
<script src="/admin/Scripts/i18n/jquery.ui.datepicker-et.js"></script>
<script src="/admin/Scripts/bootstrap.js"></script>
</head>
<body>
<a id="skippy" class="sr-only sr-only-focusable" href="#content">
<div class="container"><span class="skiplink-text">Skip to main content</span></div>
</a>
<header class="row">
<nav class="navbar navbar-default">
<div>
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class='dropdown'>
<a href='#' class='dropdown-toggle' data-toggle='dropdown' role='button'>Dropdown1
</a>
<ul class='dropdown-menu' role='menu'>
<li><a id='menu_OrderCenter' tabindex='-1' >Option1</a></li>
<li><a>Mobiilne tellimus</a></li><li><a >Ostukorv</a></li><li><a id='menu_Artomlii' tabindex='-1' entity='Artomlii' href='Artomlii?_user=admin&_company=1'>Tootepuu</a></li><li><a id='menu_Artomadu' tabindex='-1' entity='Artomadu' href='Artomadu?_user=admin&_company=1'>Tootepuu leht</a></li><li><a id='menu_Artpilt' tabindex='-1' entity='Artpilt' href='Artpilt?_user=admin&_company=1'>Toote pilt</a></li><li><a id='menu_Webconte' tabindex='-1' entity='Webconte' href='Webconte?_user=admin&_company=1'>Sisuhaldus</a></li>
</ul></li>
<li class='dropdown'>
<a href='#' class='dropdown-toggle' data-toggle='dropdown' role='button'>Dropdown2
</a>
<ul class='dropdown-menu' role='menu'>
<li><a id='menu_Klient' tabindex='-1' entity='Klient' href='Klient?_user=admin&_company=1' title='Ctrl+K'>Klient</a></li><li><a id='menu_ToodeL' tabindex='-1' entity='ToodeL' href='ToodeL?_user=admin&_company=1' title='Ctrl+D'>Artikkel</a></li><li><a id='menu_Konto' tabindex='-1' entity='Konto' href='Konto?_user=admin&_company=1'>Konto</a></li><li><a id='menu_ToodeS' tabindex='-1' entity='ToodeS' href='ToodeS?_user=admin&_company=1'>Summa</a></li><li><a id='menu_ToodeP' tabindex='-1' entity='ToodeP' href='ToodeP?_user=admin&_company=1'>Põhivara</a></li><li><a id='menu_ToodeV' tabindex='-1' entity='ToodeV' href='ToodeV?_user=admin&_company=1'>Väikevahend</a></li><li><div class='ui-widget-content ui-eeva-separator'></div></li><li><a id='menu_Klliik' tabindex='-1' entity='Klliik' href='Klliik?_user=admin&_company=1'>Kliendi liik</a></li><li><a id='menu_ArtliikL' tabindex='-1' entity='ArtliikL' href='ArtliikL?_user=admin&_company=1'>Artikli liik</a></li><li><a id='menu_Artryhm' tabindex='-1' entity='Artryhm' href='Artryhm?_user=admin&_company=1'>Artikli rühm</a></li><li><a id='menu_ArtliikP' tabindex='-1' entity='ArtliikP' href='ArtliikP?_user=admin&_company=1'>Põhivara liik</a></li><li><a id='menu_ArtliikV' tabindex='-1' entity='ArtliikV' href='ArtliikV?_user=admin&_company=1'>Väikevahendi liik</a></li><li><div class='ui-widget-content ui-eeva-separator'></div></li><li><a id='menu_Maksetin' tabindex='-1' entity='Maksetin' href='Maksetin?_user=admin&_company=1'>Maksetingimus</a></li><li><a id='menu_Myygikoo' tabindex='-1' entity='Myygikoo' href='Myygikoo?_user=admin&_company=1'>Müügikood</a></li><li><a id='menu_Kurss' tabindex='-1' entity='Kurss' href='Kurss?_user=admin&_company=1'>Rahakurss</a></li><li><a id='menu_Pank' tabindex='-1' entity='Pank' href='Pank?_user=admin&_company=1'>Pank</a></li><li><a id='menu_Raha' tabindex='-1' entity='Raha' href='Raha?_user=admin&_company=1'>Raha</a></li>
</ul></li>
<li class='dropdown'>
<a href='#' class='dropdown-toggle' data-toggle='dropdown' role='button'>Dropdown3
</a>
<ul class='dropdown-menu' role='menu'>
<li><a id='menu_DoklstlG' tabindex='-1' >Arve</a></li><li><a id='menu_DoklstlO' tabindex='-1' entity='DoklstlO' href='DoklstlO?_user=admin&_company=1'>Ostuarve</a></li><li><a href='http://localhost:52216/admin/Pay/Index/UnpaidG'>Arve laekumine</a></li><li><a href='http://localhost:52216/admin/Pay/Index/UnpaidO'>Ostuarve tasumine</a></li><li><div class='ui-widget-content ui-eeva-separator'></div></li><li><a id='menu_DoklstdM' tabindex='-1' entity='DoklstdM' href='DoklstdM?_user=admin&_company=1' title='Ctrl+M'>Maksekorraldus</a></li><li><a id='menu_DoklstdT' tabindex='-1' entity='DoklstdT' href='DoklstdT?_user=admin&_company=1'>Laekumine panka</a></li><li><a id='menu_DoklstdI' tabindex='-1' entity='DoklstdI' href='DoklstdI?_user=admin&_company=1'>Kassa sissetulek</a></li><li><a id='menu_DoklstdA' tabindex='-1' entity='DoklstdA' href='DoklstdA?_user=admin&_company=1'>Kassa väljaminek</a></li><li><div class='ui-widget-content ui-eeva-separator'></div></li><li><a id='menu_DoklstdK' tabindex='-1' entity='DoklstdK' href='DoklstdK?_user=admin&_company=1'>Kulu dokument</a></li><li><a id='menu_DoklstdJ' tabindex='-1' entity='DoklstdJ' href='DoklstdJ?_user=admin&_company=1'>Muu väljastatud</a></li><li><a id='menu_DoklstdU' tabindex='-1' entity='DoklstdU' href='DoklstdU?_user=admin&_company=1'>Muu sissetulnud</a></li><li><a id='menu_DoklstlE' tabindex='-1' entity='DoklstlE' href='DoklstlE?_user=admin&_company=1'>Leping</a></li><li><a id='menu_DoklstlR' tabindex='-1' entity='DoklstlR' href='DoklstlR?_user=admin&_company=1'>Realisatsiooniakt</a></li><li><a id='menu_DoklstdL' tabindex='-1' entity='DoklstdL' href='DoklstdL?_user=admin&_company=1'>Akt</a></li><li><div class='ui-widget-content ui-eeva-separator'></div></li><li><a id='menu_Hinnamtr' tabindex='-1' entity='Hinnamtr' href='Hinnamtr?_user=admin&_company=1'>Hinnamaatriks</a></li><li><a id='menu_Hkpais' tabindex='-1' entity='Hkpais' href='Hkpais?_user=admin&_company=1'>Hinnakujundus</a></li><li><a id='menu_Hkrid' tabindex='-1' entity='Hkrid' href='Hkrid?_user=admin&_company=1'>Hinnakiri</a></li>
</ul></li>
<li>
<a tabindex='-1' class='logout' href='/admin/Account/LogOff'
title='Unusta kasutajanimi ja parool'>
Log out
</a>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</header>
</body>
</html>
1 answers
solution1
1 ACCPTED 2015-05-01 14:28:29
Something like this will do the trick for your code:
$(document).ready(function () {
$('.dropdown').on('shown.bs.dropdown', function () {
var $dd = $(this);
$(document).on('keydown.dd', function (e) {
if (e.which == 39) {
$dd.next('.dropdown').find('.dropdown-toggle').focus().trigger('click');
} else if (e.which == 37) {
$dd.prev('.dropdown').find('.dropdown-toggle').focus().trigger('click');
}
});
}).on('hide.bs.dropdown', function () {
$(document).off('keydown.dd');
});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How can I use the left and right arrow keys to navigate between elements?
Navigate slideshow with right/left arrow keys using jQuery
How use keyboard arrow keys to move a div 100px left/right respectively
Bootstrap datetimepicker with left & right arrow
how to create image slider with left and right arrow buttons in bootstrap
how to disable left and right arrow in slide using bootstrap
Left and right arrow keys not registering onkeypress
What are the key codes for the right and left arrow keys?
Horizontal scroll bar with right and left arrow keys
Using left and right arrow keys for additional navigation
Related Tags