CODEWITHSUNDEEP
jquerycsshtmltwitter-bootstrap
Ricardo
Ricardo

Reputation: 85

Dropdown menu not working (tab focus)

Im using a bootstrap example with a dropdown menu

Here the live example: http://jsfiddle.net/p73vc8Lv/

what im trying to do is to display the dropdown menu when the user tab on the link, Im tried with css and javascript

CSS: 

.dropdown-toggle a:focus > .dropdown-menu { display:block }

is there a way to do this? Thank you

Upvotes: 2

Views: 3379

Answers (2)

Sangrai
Sangrai

Reputation: 687

Try this no need to add custom JS:

EXAMPLE:

<link href="http://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script>
<nav class="navbar navbar-inverse ">
              <div class="container">
                <div class="navbar-header">
                  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                  </button>
                  <a class="navbar-brand" href="#">Bootstrap theme</a>
                </div>
                <div id="navbar" class="navbar-collapse collapse">
                  <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#about">About</a></li>
                    <li><a href="#contact">Contact</a></li>
                    <li class="dropdown">
                      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                      <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li class="dropdown-header">Nav header</li>
                        <li><a href="#">Separated link</a></li>
                        <li><a href="#">One more separated link</a></li>
                      </ul>
                    </li>
                  </ul>
                </div><!--/.nav-collapse -->
              </div>
            </nav>

Upvotes: 0

Claudio
Claudio

Reputation: 91

I'm not 100% sure I understand your question but, if you want the dropdown to toggle when you tab onto it, you can do the following using javascript,

$('.dropdown-toggle').keyup(function(e) {
    if (e.keyCode == 9) {
        $(this).dropdown('toggle');
    }
});

Here's an example, http://jsfiddle.net/p73vc8Lv/3/

Upvotes: 2

Related Questions