3D Transform Flip Down CSS Sub Menu - css

Question

I used a tutorial on creating a 3D flip down sub-menu.
Files found here:
Flip Up Down Menu (Zip File)
http://www.webdesignermag.co.uk/tutorial-files/issue-217-tutorial-files/
I modified to my usage and works great.
Here is the fiddle:
http://jsfiddle.net/yx8qc/6/
Here is the code:
<div class="menu_holder">
<ul class="nav">
<li class="main_menu">MENU
<div class="sub">
<ul><li>Home</li>
<li>ONE</li>
<li>TWO</li>
<li>THREE</li>
</ul> </div>
</li>
</ul>
</div>
Here is the CSS
.menu_holder {
background-color: #bd4832;
text-align: center;
-moz-perspective: 80px;
-webkit-perspective: 80px;
-o-perspective: 80px;
perspective: 80px;
position: fixed;
right: 0;
top: 0;
height: 64px;
z-index: 900;
width: 100%;
}
.menu_holder ul {
padding: 0;
margin: 0;
}
.menu_holder a {
color: #fff;
font-family:'League Gothic', sans-serif;
font-size: 2em;
font-weight: normal;
}
.menu_holder ul li {
display: inline;
}
.main_menu {
width: 100%;
}
ul.nav li a {
display: inline-block;
padding: 0 1em;
letter-spacing: 2px;
}
.menu_holder ul.nav {
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.sub {
}
.menu_holder ul.nav div {
width: 100%;
position:absolute;
background-color: #d3634e;
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
-o-transition: 0.3s;
transition: 0.3s;
-moz-transform-origin: 0px 0px;
-moz-transform: rotateX(-90deg);
-webkit-transform-origin: 0px 0px;
-webkit-transform: rotateX(-90deg);
-o-transform-origin: 0px 0px;
-o-transform: rotateX(-90deg);
transform-origin: 0px 0px;
transform: rotateX(-90deg);
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
-moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .55);
/* inner shadow */
-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .55);
/* inner shadow */
box-shadow: inset 0 1px 3px rgba(0, 0, 0, .55);
/* inner shadow */
}
.menu_holder ul.nav li:hover div {
-moz-transform: rotateX(0deg);
-webkit-transform: rotateX(0deg);
-o-transform: rotateX(0deg);
transform: rotateX(0deg);
}
.menu_holder ul.nav li:hover > a {
color:#115b64;
}
.menu_holder ul.nav div.sub {
width: 100%;
display: block;
}
When hovered it flips down, when hovered out flips back up.
On desktop it works great.
On touch devices, the menu flips down, but in order for it to flip back up you have to touch outside the main link.
Goal:
To get it working with touch devices. Tapping "Menu" will drop sub-menu down. Tap SAME main "Menu" item will flip it back.
Any help or leads with touch devices is greatly appreciated.
Thank You.

Answer 1

Does this works? I don't have here any touch device.
HTML
<div class="menu_holder">
<ul class="nav">
<li class="main_menu"><label for="toggle-1">MENU</label>
<input type="checkbox" id="toggle-1">
<div class="sub">
<ul>
<li>Home
</li>
<li>ONE
</li>
<li>TWO
</li>
<li>THREE
</li>
</ul>
</div>
</li>
</ul>
</div>
CSS (Yours + this)
input[type=checkbox] {
position: absolute;
top: -9999px;
left: -9999px;
}
label {
cursor: pointer;
}
input[type=checkbox]:checked ~ div {
-moz-transform: rotateX(0deg);
-webkit-transform: rotateX(0deg);
-o-transform: rotateX(0deg);
transform: rotateX(0deg);
}
And here is demo: http://jsfiddle.net/yx8qc/7/
This will simply use label to activate checkbox, and in function of its state show or hide content.