jQuery accessible dropdown menu

Building a dropdown menu with jQuery is quite simple. Builiding an accessible dropdown menu, instead, requires some basic knowledge of web accessibility. First of all, we start with a basic markup like this:

<div id="navigation">

<ul>

<li><a href="#">Home</a></li>
<li><a href="#">Articles</a></li>
<li class="more"><a href="#">About</a>

<ul>

<li><a href="#">Portfolio</a></li>
<li><a href="#">Resumé</a></li>

</ul>

</li>

<li><a href="#">Contact</a></li>

</ul>

</div>

Our CSS styles are as follows:

body {
 
     margin: 0;
     padding: 0;
     font: 62.5%/1 Arial, sans-serif;
     background: #fff;
     color: #333;
 
 }
 
 #navigation {
 
     width: 100%;
     float: left;
     margin: 0;
     background: #666;
     color: #fff;
     font-size: 1.4em;
 
 
 }
 
 #navigation ul {
 
     
     margin: 0;
     padding: 0;
     list-style: none;
     width: 100%;
 
 
 }
 
 
 #navigation ul li {
 
     float: left;
     height: 5em;
     margin: 0;
 
 }
 
 #navigation ul li a {
 
     color: #fff;
     text-decoration: none;
     float: left;
     display: block;
     height: 100%;
     line-height: 5;
     padding: 0 1em; 
 }
 
 #navigation ul li a:hover {
 
     background: #333;
     text-decoration: underline;
 
 }
 
 #navigation ul li.more ul {
 
     width: 15em;
     background: #333;
     position: absolute;
     top: -1000em;
 
 }
 
 #navigation ul li.more ul li {
 
     float: none;
     height: 100%;
 
 }
 
 #navigation ul li.more ul li a {
 
     float: none;
     width: 100%;
     display: block;
     line-height: normal;
     padding: 0.5em 0;
     text-indent: 0.5em;
 
 }
 
 #navigation ul li.more ul li a:hover {
 
     background: #666;
 
 }
 
 span.plus {
 
     padding-left: 4px;
 
 }

We didn't use display: none to hide the submenu, because this declaration prevents screen readers from reading the content of the element. Instead, we used negative absolute positioning. Our jQuery code takes into account this solution:

$(document).ready(function() {

    $('<span class="plus"></span>').text('+').appendTo('#navigation ul li.more > a:first-child');

    var subMenuPos = $('#navigation ul li.more').position();
    var subMenuLeft = subMenuPos.left;
    var subMenuHeight = $('#navigation ul li.more').height();
    
    $('#navigation ul li.more').hover(function() {
    
        $('#navigation ul li.more ul').css({'top': subMenuHeight, 'left': subMenuLeft});    
    },
    
    function() {
    
        
        $('#navigation ul li.more ul').css({'top': '-1000em', 'left': '-1000em'});
    
    
    }
    
    
    
    );

});

Our submenu will be absolutely positioned using the coordinates of its parent element. When a user moves his/her mouse out of the submenu, the submenu itself is hidden again using negative absolute positioning. You can see the final result here.

This entry was posted in by Gabriele Romanato. Bookmark the permalink.

Leave a Reply

Note: Only a member of this blog may post a comment.