CODEWITHSUNDEEP
jqueryhtmlcss
tadywankenobi
tadywankenobi

Reputation: 765

Add keyboard support to website dropdown navigation

I know Suckerfish does this very well, but I don't like the javascript in Suckerfish and figured there must be an easier way to do this using jQuery. I've done up the following page:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
      "http://www.w3.org/TR/html4/loose.dtd">
    <html lang="en">
    <head>
    <title>Test nav page</title>
    <style type="text/css">

        html {margin:0;padding:0;text-align:center;font-size:62.5%}
        body {margin:0 auto;padding:0;width:600px;text-align:left;}

        ul#nav {display:inline-block;width:260px;border:0;float:right;list-style:none;position:relative;}
            ul#nav li {display:inline-block;float:left;width:130px;font-family:arial;color:#444;font-size:1.2em;font-weight:bold;text-align:center;position:relative;}
            ul#nav li.t1, ul#nav li.t1 ul li a {background-color:#aad;}
            ul#nav li.t2, ul#nav li.t2 ul li a {background-color:#daa;}
                ul#nav li ul {position:absolute;left:-9999px;display:block;width:130px}
                    ul#nav li:hover ul,ul#nav li.hover ul, ul#nav li:focus ul {left:-40px;}

                ul#nav li a {display:block;width:120px;padding:7px 5px;}
                    ul#nav li ul li a {border-top:solid 1px #ddd;font-size:0.9em;padding:7px 0;width:130px;display:inline-block}


    </style>
    </head>
    <body>
        <ul id="nav">
            <li class="t1"><a href="#top1" tabindex="1">Top one</a>
            <ul>
                <li><a href="#first" tabindex="2">First</a></li>
                <li><a href="#second" tabindex="3">Second</a></li>
            </ul></li>
            <li class="t2"><a href="#top2" tabindex="4">Top two</a>
            <ul>
                <li><a href="#third" tabindex="5">Third</a></li>
                <li><a href="#fourth" tabindex="6">Fourth</a></li>
            </ul></li>
        </ul>
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript" >
        $(document).ready(function(){
            $('ul#nav li').hover(
                function(){
                    $(this).toggleClass('hover');
                });
// Updated with the following jQuery Function...
            $('ul#nav li a').focus(
            function(){
                $(this).parent().addClass('hover');
        });
// Just need a way of closing the dropdown when the key focus moves out of the li, not the anchor...
        });
        </script>
    </body>
    </html>

And it all works great EXCEPT that it's inaccessible with the keyboard. Can anyone point out what I'm missing!? It's just baffling me, been at it for the past 2 hours and getting nowhere fast.

Cheers,

T

Update: I'm really close! I've added another jQuery function which applies the "hover" class to the parent LI if the focus is on the anchor tag. I've added it in the code above. This will allow me to tab onto the link and shows the dropdown links, but once I tab past that (I've also updated the tabindex) they won't disappear.

T

Upvotes: 1

Views: 1461

Answers (1)

troynt
troynt

Reputation: 1912

Try the following

        <script type="text/javascript" >
    $(function(){
      //for ie6
      $('#nav li').hover(function(){ $(this).addClass('hover') }, function(){$(this).removeClass('hover')});

      $('#nav a').focus(function(){
        $(this).parents('li').addClass('hover');
      });

      $('#nav a').blur(function(){
        $(this).parents('li').removeClass('hover');
      });
    })
    </script>

NOTE: I changed the toggleClass because I don't trust it. I think you should specify what you want to happen with the class otherwise you risk getting stuck in a state that you didn't expect.

Upvotes: 1

Related Questions