I'm using SCSS to make a dropdown menu. Here is an excerpt of how it works:
li {
font: bold 12px/18px sans-serif;
display: inline-block;
margin-right: -4px;
position: relative;
padding: 15px 20px;
background: $menuBG;
color: $menuColor;
cursor: pointer;
transition: all 0.2s;
&:hover {
background: $hoverBG;
color: $hoverColor;
}
Now what I'd really like is for it to do the same thing while still allowing it to work for those without a mouse (people with accessibility clients and mobile phones.) Using jQuery is not impossible but not preferred.
First of all, I do not recommend using dropdown menus for anything that's intended to be used on touch (so nowhere, really). But if you want to try to make it work anyway, you could try:
touchstart
and close it ontouchstart
outside the menu:hover
and:focus
so the menu will open when clicked on (CSS only)anchor
elements with::after
pseudo elements and the:active
and+
selectors -- which will be quite tricky