Jump to content

  • CSS Accessible Dropdown Menu

       (2 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>
/********************************
* CSS Dropdown with keyboard support
* by kjSage @ ATF, CTTW, RPGD, RPGI, ShadowPlay, Sourced & WeCode
********************************/
/* 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>
    Go to codes Other

    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
    Arasnia

    Arasnia 0

    · Edited by Arasnia

      

    Hey
    the idea is nice, but i would suggest to add maybe a background color on the dropdown menue itself too. Since its overlapping the info under it, it could made it hard to read the dropdown options.  if this nav is on top of the Headerpicture and overlap it, it would mostly problematic if the picture has light colors on it - so a background could help to bring it more into the front and avoid read problems. 

    Good Work!

    Share this review

    Link to review
    reda

    reda 0

      

    Thank muy bonito maravilloso 🥰

    Share this review

    Link to review

Search In
  • More options...
Find results that contain...
Find results in...
×
×
  • 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.

  I accept