Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
  • Sign in to follow this  

    CSS Accessible Dropdown Menu

       (0 reviews)

    CSS dropdown menu that is accessible to screen readers and keyboard users. Tab through the dropdown link and the links will show up as if hovered over. Shift-tabbing will always tab to the previous top-level link if already focusing a top-level link.

     

    I've only coded in support for the first level of a dropdown, though duplicating the structure of the nested list and adding appropriate CSS should be fairly straightforward as the CSS is labeled. Too lazy to code in a specific mobile style for this, may update later.

     

    The dropdown will work in all major browsers. IE lacks :focus-within support, but the hover will still work. Edge will need the dropdown links hovered over in order to tab through them, otherwise it will skip to the next top-level link. Nothing to be done about either case except to use a modern browser that supports the newest CSS standards.

     

    Working example and code can also be found on my codepen, here.


    Actual Template Not Responsive

    Template code

    <style>
    /* The Dropdown Menu */
    #menu {
        width: 100%;
        text-align: center;
        padding: 0;
        background: #000;
        display: block;
        z-index: 2;
    }
    
    /*  List element styles */
    #menu ul, #menu li {
      list-style: none;
      padding: 0;
      margin: 0;
      display: inline-block;
    }
    #menu li {
        padding: 5px 0px;
    }
    
    /* Main menu links */
    #menu a:link, #menu a:visited, #menu a:active { 
        text-decoration: none;
        color: #fff; 
        padding: 5px 7px;
        font-weight: bold;
        position: relative;
        z-index: 2;
    }
    
    #menu a:hover, #menu a:focus { 
        background-color: #374c5d;
        color: #fff; 
        text-decoration: underline; 
    }
    
    /* The submenu links container*/
    .subdrop { 
        background: var(--bg-color);
        height: 0;
        border-top: 0;
        min-width: 100%;
        left: 0;
        margin: 0;
        position: absolute;
        text-align: left;
        top: 100%;
        visibility: hidden;
        height: 1px;
        overflow: hidden;
        z-index: 10;
    }
    
    /* Dropdown Parent Link Style */
    .droplink {
        display: inline-block;
        min-width: fit-content;
        position: relative;
    }
    
    /* List elements within the dropdown */
    .subdrop li {
        display: block!important;
        padding: 0!important;
    }
    
    /* Links within the dropdown list */
    .subdrop a {
        display: block;
        padding: 12px 20px;
        white-space: nowrap;
    }
    
    /* Allows links to show on hover/focus and through keyboard navigation via focus-within */
    .droplink:hover .subdrop { 
        visibility: visible;
        height: auto;
        z-index: 11;
    }
    /* Separate these to avoid IE completely ignoring the css above */
    .droplink:focus-within .subdrop { 
        visibility: visible;
        height: auto;
        z-index: 11;
    }
    </style>
    
    <nav role="navigation" id="menu" aria-label="Main menu">
        <ul>
            <li class="droplink"><a href="" aria-haspopup="true">Dropdown 1</a>
              <ul class="subdrop" aria-label="Main Links Sub Navigation">
                <li><a href="">Sub Link 1</a></li>
                <li><a href="">Sub Link 2</a></li>
                <li><a href="">Sub Link 3</a></li>
                <li><a href="">Sub Link 4</a></li>
              </ul>
          </li>
          <li><a href="">Test Link 1</a></li>
          <li><a href="">Test Link 2</a></li>
          <li><a href="">Test Link 3</a></li>
      </ul>
    </nav>
    Sign in to follow this  


    User Feedback

    Join the conversation

    You can post now and register later. If you have an account, sign in now to post with your account.

    Guest



×
×
  • Create New...

Important Information

By using this site, you agree to our Terms of Use, Guidelines and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.