3

At the moment my dropdown menus only appear when the user rolls over them.

I would like it so if you pressed the TAB key the drop down would appear in the same way

My menu is based on the following tutroial:

http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-a-kick-butt-css3-mega-drop-down-menu/

The only thing I have updated code wise is the style in CSS

Below is a section of my menu:

HTML:

 <ul id="menu">

    <li><a href="about-us.php" class="drop">About us</a>
            <div class="dropdown_1column align_left">
                 <div class="col_1">
                      <ul class="simple">
                          <li><a href="why-choose-us.php">Why choose us</a></li>
                          <li><a href="our-office.php">Our office</a></li>
                       </ul>   
                  </div>
              </div>
    </li>

<li><a href="how-we-help.php" class="drop">How we help</a>
     <div class="dropdown_2columns align_left">
          <div class="col_2">
               <h3 class="link-menu-title"><a href="#">Technology</a></h3>
                   <ul>
                       <li><a href="dynamic-purchasing.php" style="width:270px;">Dynamic purchasing with Matrix</a></li>
                        <li><a href="process.php">Process</a></li>
                        <li><a href="interfacing.php">Interfacing</a></li>
                        <li><a href="implementation.php">Implementation</a></li>
                    </ul>   
             </div>

       <div class="col_2">
                 <h3 class="link-menu-title"><a href="#">Professional Support Services</a></h3>
                     <ul>
                         <li><a href="discovery.php">Discovery</a></li>
                         <li><a href="account-management.php">Account management</a></li>
                         <li><a href="business-management.php" style="width:270px;">Business management</a></li>
                         <li><a href="supplier-management.php"> Supplier management</a></li>
                        </ul>   
                    </div>
              </div>

            </li>

        </ul>

and the CSS

#menu li.menu-icon:hover {
    background-color:#212121;
    border:0px;
}


a#home span {
    position: absolute;
    top: -999em;
}

#menu {
    list-style:none;
    width:730px;
    margin:0px auto 0px auto;
    height:73px;


    /* Background color and gradients */



    /* Borders */

    border: 0px solid #002232;
}

#menu li {
    float:left;
    display:block;
    text-align:center;
    position:relative;
    padding: 4px 0px 4px 0px;
    margin-right:12px;
    margin-top:25px;
    border:none;


}

#menu li:hover {
    border: 1px solid #11A7E6;
    padding: 4px 0px 4px 0px;

    /* Background color and gradients */

    background: #11A7E6;


    /* Rounded corners */

    -moz-border-radius: 5px 5px 0px 0px;
    -webkit-border-radius: 5px 5px 0px 0px;
    border-radius: 5px 5px 0px 0px;

}

#menu li a {
    font-family:Arial, Helvetica, sans-serif;
    font-size:15px;
    font-weight:bold;
    color: #FFFFFF;
    display:block;
    outline:0;
    text-decoration:none;   
}

.medium #menu li a {
    font-size:16px;
}

.large #menu li a {
    font-size:20px;
}

.medium #menu li .drop, .large #menu li .drop {
    padding-right: 0px;
}

#menu li:hover a {
    color:#ffffff;
    text-shadow: 1px 1px 1px #000000;

}
#menu li .drop {
    padding-right:8px;
}
#menu li:hover .drop {
    padding-right:3px;
    padding-left:3px;
}

.dropdown_1column, 
.dropdown_2columns, 
.dropdown_3columns, 
.dropdown_4columns,
.dropdown_5columns {
    margin:4px auto;
    float:left;
    position:absolute;
    left:-999em; /* Hides the drop down */
    text-align:left;
    padding:10px 5px 10px 5px;
    border-top:10px solid #11A7E6;

    /* Gradient background */
    background:#2D2D2D;


    /* Rounded Corners */
    -moz-border-radius: 0px 5px 5px 5px;
    -webkit-border-radius: 0px 5px 5px 5px;
    border-radius: 0px 5px 5px 5px;

}

.dropdown_1column {width: 140px;}
.dropdown_2columns {width: 280px;}
.dropdown_3columns {width: 420px;}
.dropdown_4columns {width: 560px;}
.dropdown_5columns {width: 700px;}

#menu li:hover .dropdown_1column, 
#menu li:hover .dropdown_2columns, 
#menu li:hover .dropdown_3columns,
#menu li:hover .dropdown_4columns,
#menu li:hover .dropdown_5columns {
    left:-1px;
    top:auto;
}

.col_1,
.col_2,
.col_3,
.col_4,
.col_5 {
    display:inline;
    float: left;
    position: relative;
    margin-left: 5px;
    margin-right: 5px;
}
.col_1 {width:130px;}
.col_2 {width:270px;}
.col_3 {width:410px;}
.col_4 {width:550px;}
.col_5 {width:690px;}


#menu .menu_right {
    float:right;
    margin-right:0px;
}
#menu li .align_right {
    /* Rounded Corners */
    -moz-border-radius: 5px 0px 5px 5px;
    -webkit-border-radius: 5px 0px 5px 5px;
    border-radius: 5px 0px 5px 5px;
}

#menu li:hover .align_right {
    left:auto;
    right:-1px;
    top:auto;
}

#menu p, #menu h2, #menu h3, #menu ul li {
    font-family:Arial, Helvetica, sans-serif;
    color:#FFFFFF;
    line-height:21px;
    font-size:12px;
    text-align:left;
    text-shadow: 1px 1px 1px #000000;

}
#menu h2 {
    font-size:21px;
    font-weight:400;
    letter-spacing:-1px;
    margin:7px 0 3px 0;
    padding-bottom:3px;
    border-bottom:1px solid #666666;

}
#menu h3 {
    font-size:14px;
    margin:7px 0 3px 0;
    padding-bottom:3px;
    border-bottom:1px solid #666666;

}


#menu p {
    line-height:18px;
    margin:0 0 30px 0;

}

#menu li:hover div a {
    font-size:12px;
    color:#0ea4e3;
    padding-bottom:2px;
}

.medium #menu li:hover div a {
    font-size:15px;
}

.large #menu li:hover div a {
    font-size:19px;
}

#menu li:hover div h2.link-menu-title a{
    font-size:14px;
    font-weight:bold;
    color:#FFF;
}

#menu li:hover div h3.link-menu-title a{
    font-size:14px;
    font-weight:bold;
    color:#FFF;
}

.medium #menu li:hover div h3.link-menu-title a{
    font-size:17px;
}

.large #menu li:hover div h3.link-menu-title a{
    font-size:21px;
}


#menu li:hover div a:hover {
    color:#fff;
    background-color: #474747;


}

3 Answers 3

6

Looking at the tutorial, it is not really a good starting point to make fully keyboard accessible. Unfortunately it isn't just a matter of showing the drop-downs when pressing tab.

Once you get past a couple of items in each drop-down it it not a good thing for keyboard users to have to tab through every option.

There are two main ways to make this type of menu accessible:

  1. Traditional method: Make each top level link go through to a landing page that includes the links from the menu, and hide the drop-downs from keyboard use.

  2. HTML5 (new) method: Use WAI-ARIA markup and lots of scripting to enable full keyboard accessibility.

The traditional method if fairly easy to do, you just need to properly hide the menus that are off-screen using display: none; on the classes starting .dropdown_1column. The means keyboard users won't tab through the sub-menus.

And then use display: block to show the sub-menus on hover (not focus), where the CSS starts:

#menu li:hover .dropdown_1column

To achieve the HTML5/new method I would start with Adobe's open-sourced "Accessible Mega Menu". It would be a huge amount of work to do this from scratch, and unless you know how to test with a wide range of user-agents, it is unlikely to work as well as Adobe's.

6
  • I checked out the mega menu and it wasnt working properly in firefox. I have added my markup and style to the question if that helps, thank you!
    – Jason
    Oct 7, 2013 at 8:47
  • I tried the Adobe one in FF, seems to work fine. They use it on their main site, so I'd be surprised if there were browser issues. After a quick look at your markup, I can't see anything to change in my answer - either hide the sub-menus properly (display: none), or use a full WAI-ARIA version like the Adobe one.
    – AlastairC
    Oct 7, 2013 at 8:53
  • If you are saying that you have to focus li to display the submenu and then press the tab again, you are wrong. 'focus' event doesn't buble up. The moment you press tab after focusing the li, the li loses focus and the submenu disappears. Oct 9, 2013 at 12:22
  • Ah, apologies, I had tested it and it seemed to work, but I must have changed something else. I've removed that option and shifted emphasis to the things I would recommend.
    – AlastairC
    Oct 9, 2013 at 15:16
  • 1
    @Andreas The W3C example is intended to demonstrate the ARIA pattern for a menu bar. That's actually a slightly different things to a website navigation. If you are creating an web app that looks like Word, then a 'menu' is appropriate. If you are creating a website navigation, I'd use the Adobe one.
    – AlastairC
    May 14, 2021 at 18:21
0

please upload your markup and styles. Anyways here is a sample menu that works on tab.

  .dropdown {
       position: relative;
       display: inline-block;
       font-size: 110%;
  }

 .dropdown ul {
      position: absolute;
      top: -100%;
      left: 100%;
      display: none;
      background-color: inherit;
      padding: 0;
      list-style: none;
      border: 1px solid #ccc; 
 }

 .dropdown ul li {
      position: relative;
      list-style: none;
      margin: 5px 0;
      background-color: inherit;
 }

 .dropdown ul li a {
      display: block;
      padding: 3px 10px;
 }

 .dropdown ul li a:hover {
      background-color: #18b6f2 !important;
  }

  .dropdown ul li:hover > ul {
      display: block;
      top: 0;
      background-color: inherit; 
  }

  .dropdown ul li:hover > a {
      background-color: #85ddff;
  }

  .dropdown:focus > ul {
      display: block;
  }

// markup

    <div class="dropdown" style="background-color: white;" tabindex="1">
    <a>Menu</a>
    <ul>
        <li>
            <a>Fruits</a>
            <ul>
                <li><a>Apple</a></li>
                <li><a>Orange</a></li>
                <li><a>Grape</a></li>
                <li><a>Banana</a></li>
            </ul>
        </li>
        <li>
            <a>Vegetables</a>
            <ul>
                <li><a>Lemon</a></li>
                <li><a>Cucumber</a></li>
                <li><a>Melon</a></li>
            </ul>
        </li>

    </ul> 
</div>

you need to give a tabindex value to make an element focusible ( which is not focusible by default).. Then you css3 :focus selector to trigger when the element is in focus.

Might be able to help if you write down your exact requirement

4
  • Thank you for this, I have now updated my question to include the mark up and styles as requested
    – Jason
    Oct 7, 2013 at 8:44
  • You want the sub-menus to be accessible by tab?? Oct 7, 2013 at 8:51
  • Here i sthe site: matrix-scm.com you can see if you mouse over the top menus the dropdowns appear. However if you TAB accross them they dont. I would like it so as you TAB the dropdown menu appears and then you can carry on tabbing down them
    – Jason
    Oct 7, 2013 at 8:55
  • You cannot do a complete tabbed menu using pure css. The problem is that focus event do not bubble up. So when the child is focused the parent loses focus and becomes invisible. But you can do a near perfect one. Give me some time. Ill put up a demo. Oct 7, 2013 at 8:57
-1

Here is a demo. This is the closest you could with pure css.

<section class="header">
        <div class="dropdown">
            <ul>
                <li>
                    <input type="radio" name="dropdown" />
                    <a>Menu 1</a>
                    <ul>
                        <li>
                            <a tabindex="1">Submenu 1</a>
                        </li>
                        <li>
                            <a tabindex="1">Submenu 2</a>
                        </li>
                        <li>
                            <a tabindex="1">Submenu 3</a>
                        </li>
                        <li>
                            <a tabindex="1">Submenu 4</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <input type="radio" name="dropdown" />
                    <a>Menu 2</a>
                    <ul>
                        <li>
                            <a tabindex="1">Submenu 1</a>
                        </li>
                        <li>
                            <a tabindex="1">Submenu 2</a>
                        </li>
                        <li>
                            <a tabindex="1">Submenu 3</a>
                        </li>
                        <li>
                            <a tabindex="1">Submenu 4</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <input type="radio" name="dropdown" />
                    <a>Menu 3</a>
                    <ul>
                        <li>
                            <a tabindex="1">Submenu 1</a>
                        </li>
                        <li>
                            <a tabindex="1">Submenu 2</a>
                        </li>
                        <li>
                            <a tabindex="1">Submenu 3</a>
                        </li>
                        <li>
                            <a tabindex="1">Submenu 4</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <input type="radio" name="dropdown" />
                    <a>Menu 4</a>
                    <ul>
                        <li>
                            <a tabindex="1">Submenu 1</a>
                        </li>
                        <li>
                            <a tabindex="1">Submenu 2</a>
                        </li>
                        <li>
                            <a tabindex="1">Submenu 3</a>
                        </li>
                        <li>
                            <a tabindex="1">Submenu 4</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <input type="radio" name="dropdown" />
                    <a>Menu 5</a>
                    <ul>
                        <li>
                            <a tabindex="1">Submenu 1</a>
                        </li>
                        <li>
                            <a tabindex="1">Submenu 2</a>
                        </li>
                        <li>
                            <a tabindex="1">Submenu 3</a>
                        </li>
                        <li>
                            <a tabindex="1">Submenu 4</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>

    </section>

css

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  overflow: hidden;
}
.header {
  position: fixed;
  left: 0;
  top: 0;
  height: 100px;
  width: 100%;
  background-color: black;
}
.header .dropdown {
  margin: 50px 0 0 300px;
}
ul {
  margin: 0;
  padding: 0;
}
.dropdown {
  color: #fff;
  position: relative;
}
.dropdown > ul {
  display: block !important;
  background-color: black !important;
}
.dropdown > ul > li {
  display: inline-block;
  width: 100px;
  margin: 0 10px;
  position: relative;
}
.dropdown > ul > li input[type="radio"] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
}
.dropdown > ul > li input[type="radio"]:checked ~ ul {
  display: block;
}
.dropdown > ul > li input[type="radio"]:focus ~ a {
  border-bottom: 2px solid #ccc;
}
.dropdown ul {
  position: absolute;
  left: 0;
  display: none;
  z-index: 99;
  background-color: #2b2b2b;
  width: 200%;
}
.dropdown ul li {
  position: relative;
  list-style: none;
  cursor: pointer;
}
.dropdown ul li a {
  display: block;
  padding: 10px 15px;
}
.dropdown ul li a:focus {
  outline: none;
  background-color: #0bd2f6;
}
.dropdown ul li:hover > ul {
  display: block !important;
}
10
  • But this obviously have certain problems. 1) you have to press tab to get the menu into focus (indicated by a white border at the bottom). Oct 7, 2013 at 10:21
  • 2) You have to navigate the level-1 menu after focusing the first one using the left and right arrow keys. Oct 7, 2013 at 10:21
  • Then tab would move to each submenu. Another problem is that hiding the menu is a little bit complicated. Im trying. Oct 7, 2013 at 10:22
  • You fiddle around with this one. Oct 7, 2013 at 10:31
  • Applying tabindex of 1 to multiple items is not valid, I think you mean "0", or 1, 2, 3 etc. w3.org/WAI/PF/aria-practices/#focus_tabindex Also, you shouldn't need tabindex on links at all, they are focusable by default. Keyboard users would be better off with either of the options outlined in my answer.
    – AlastairC
    Oct 8, 2013 at 13:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.