Simple Accessible And Enhanced Clickable Navigation Submenus

Clicky Menus allows you to create a progressively optimized and accessible one-level dropdown menu that opens when activated by clicking, touching, or ENTER / SPACE. The menu is gradually improved, supporting hover and keyboard navigation (in modern browsers) if JS is not enabled.

Clicky Menus is a fast, responsive, progressive, touch support, a dropdown menu that is fully accessible for the web.

clickable dropdown menus, responsive drop down menu with submenu, keyboard accessible dropdown menu javascript, responsive drop down menu with submenu free download

Main Features:

Supports mouse, touch, and keyboard interactions
Converts key elements from links into buttons
Expanded tune, aria-controls, and aria-hidden support
Close the opened submenu with the ESC key
Close the open submenu with a tap outside the open menu
The basic prevention of the menu outside the screen

Responsive Fancy Sidebar Navigation Menu With Icons

How to make use of it:

1. Import the Clicky Menus into the HTML.

<link rel="stylesheet" href="./clicky-menus.css" />
<script src="./clicky-menus.js"></script>

2. Create a dropdown menu from a nested nav checklist as follows.

<!-- for use with <use> -->
<svg xmlns="http://www.w3.org/2000/svg"  hidden>
  <symbol id="arrow" viewbox="0 0 16 16" >
    <polyline points="4 6, 8 10, 12 6" stroke="#000" stroke-width="2" fill="transparent" stroke-linecap="round" />
  </symbol>
</svg>
<!-- In the real world, all hrefs would have go to real, unique URLs, not a "#" -->
<nav id="site-navigation" class="site-navigation" aria-label="Clickable Menu Demonstration">
  <ul class="main-menu clicky-menu no-js">
    <li>
      <a href="#">Home</a>
    </li>
    <li>
      <a href="#">
        Category
        <svg aria-hidden="true" width="16" height="16">
          <use xlink:href="#arrow" />
        </svg>
      </a>
      <ul>
        <li><a href="#">Accordion</a></li>
        <li><a href="#">Carousel</a></li>
        <li><a href="#">Dropdown</a></li>
        <li><a href="#">Menu</a></li>
        <li><a href="#">Navigation</a></li>
      </ul>
    </li>
    <li>
      <a href="#">
        Social
        <svg aria-hidden="true" width="16" height="16">
          <use xlink:href="#arrow" />
        </svg>
      </a>
      <ul>
        <li><a href="#">Facebook</a></li>
        <li><a href="#">Twitter</a></li>
        <li><a href="#">Linkedin</a></li>
        <li><a href="#">Instagram</a></li>
      </ul>
    </li>
    <li>
      <a href="#">
        About
        <svg aria-hidden="true" width="16" height="16">
          <use xlink:href="#arrow" />
        </svg>
      </a>
      <ul>
        <li><a href="#">About</a></li>
        <li><a href="#">Policy</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </li>
  </ul>
</nav>

Accessible Dropdown Nav, Clicky Menus Plugin/Github, accessible responsive dropdown menu, drop down navigation menu html, javascript dropdown menu