Accessible Navigation Menu with Tailwind

Accessible Navigation Menu with Tailwind

/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
README
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
This is not fully Tailwind because it uses pseudo classes.


/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
HTML / Craft CMS
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/

      {% set entries = craft.entries
      .section('navigation')
      .level('<= 2')
      .slug('not ' ~ 'home')
      .all()
      %}

{# ? Desktop nav #}
<nav>
    <ul id="nav" class="relative z-50 hidden font-bold md:flex text-red-500">
        {% nav entry in entries %}
        <li class="dropdown">
            <a class="block px-6 py-1 font-bold {% if entry.hasDescendants() %} is-disabled{% endif %}" href="{{ entry.url }}">{{ entry.title }}</a>
            {% ifchildren %}
            <ul class="absolute z-50 py-2 text-left text-gray-700 bg-white rounded has-shadow dropdown-menu text-16">
                {% children %}
            </ul>
            {% endifchildren %}
        </li>
        {% endnav %}
    </ul>
</nav>

/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
CSS
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/

/* START main nav dropdowns */

/* This approach yeilds smoother animated box shadows (https://tobiasahlin.com/blog/how-to-animate-box-shadow/) */
.has-shadow {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  -webkit-transition: all 0.6s cubic-bezier(.19, 1, .22, 1);
  transition: all 0.6s cubic-bezier(.19, 1, .22, 1);
}

.has-shadow::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  -webkit-transition: all 0.6s cubic-bezier(.19, 1, .22, 1);
  transition: all 0.6s cubic-bezier(.19, 1, .22, 1);
}

.dropdown-menu {
  z-index: 20;
  margin: 1rem 0 0;
  visibility: hidden;
  opacity: 0;
  transform: scale(0.9);
  transition:
    visibility 0s,
    opacity 0.3s cubic-bezier(.19, 1, .22, 1),
    margin 0.3s cubic-bezier(.19, 1, .22, 1),
    transform 0.3s cubic-bezier(.19, 1, .22, 1);
}

.dropdown ul li a {
  background: #fff;
  display: block;
  transition:
    all 0.3s cubic-bezier(.19, 1, .22, 1);
}

.dropdown ul li a:hover {
  @apply text-hbred-500;

}
/* Below, we show the dropdown menu if the user hovers over its parent 'dropdown' element, or tabs to its parent 'dropdown' element (focuses on it) with the keyboard. Focus-within selects an element if that element contains any children that have :focus. This lets you tab through the items in the dropdown menu while keeping the dropdown menu open. Accessibility FTW! */
.dropdown:hover .dropdown-menu,
.dropdown a:focus + .dropdown-menu,
.dropdown-menu:focus-within{
  transform: scale(1);
  margin: 0;
  visibility: visible;
  opacity: 1;
}
a.is-disabled {
  pointer-events: none;
  cursor: default;
}

/* END main nav dropdowns */