I want to make adjustments to a CSS-only menu that has a horizontal flyout effect triggered by hovering. I am looking to achieve the same effect on touch or tap - meaning, one tap to open the menu and another tap to close it.
Is it possible to accomplish this using solely CSS?
Below is the code snippet, but for optimal viewing, please refer to the Codepen link provided. Currently, my challenge lies in having to keep the tap pressed for the menu to display - how can I create a toggle without relying on JavaScript?
The Codepen Link: http://codepen.io/pliablepixels/pen/WwPgwg
/*
Forked from http://codepen.io/IanLunn/pen/NPapxy */
/*
sass flyout.scss >flyout.css (sudo gem install sass)
or sass flyout.scss --style compressed >flyout.min.css
"IL" logo Copyright (c) Ian Lunn Design Limited 2015
Modified by pliable pixels
*/
.drawer {
position: absolute;
z-index: 10;
top: 0;
left: 0;
/*height: 100%;*/
padding: .4em 0;
background: #7D294E;
color: white;
text-align: center;
/* Remove 4px gap between <li> */
font-size: 0;
}
.drawer li {
pointer-events: none;
position: relative;
display: inline-block;
vertical-align: middle;
list-style: none;
transform: translateZ(0);
}
.drawer a {
pointer-events: auto;
position: relative;
display: block;
min-width: 5em;
margin-bottom: .4em;
padding: .4em;
line-height: 100%;
/* Reset font-size */
font-size: 16px;
text-decoration: none;
color: white;
transition: background 0.2s;
}
.drawer a:active, .drawer a:focus {
background: #B44659;
}
.drawer i {
display: block;
margin-bottom: .2em;
font-size: 2em;
}
.drawer span {
font-size: .625em;
font-family: sans-serif;
text-transform: uppercase;
}
.drawer li:active ul {
/* Open the fly-out menu */
transform: translateX(0);
background: #B44659;
/* Enable this if you wish to replicate hoverIntent */
}
.drawer > li {
display: block;
/* Fly out menus */
}
.drawer > li > a {
background: #7D294E;
}
.drawer > li:active, .drawer > li:focus {
z-index: 100;
}
.drawer > li:active, .drawer > li:focus a {
background: #B44659;
}
.drawer > li a:active {
background: #F56356;
}
.drawer > li ul {
position: absolute;
/* Stack below the top level */
z-index: -1;
top: 0;
left: 100%;
/* height: 100%;*/
width: auto;
white-space: nowrap;
/* Close the menus */
transform: translateX(-100%);
background: #B44659;
transition: 0.2s transform;
}<ul class="drawer">
<li>
<a href="">
<span>Info</span>
</a>
<ul>
<li>
<a href="http://www.google.com">
<span>Item 1</span>
</a>
</li>
<li>
<a href="http://www.google.com" >
<span>Item 2</span>
</a>
</li>
<li>
<a href="http://www.google.com">
<span>Item 3</span>
</a>
</li>
</ul>
</li>
</ul>