Menu with hover, how to do it work in mobile? - css

Question

I'm using Bootstrap 3. I have this menu which works ok only when is not a touch (mobile) device:
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Inicio</li>
<li>Ayuda</li>
<li>Metodología<span></span>
<div class="nav-sub-menu">
<ul class="text-submenu">
<li style="padding-left=0px">Guía Metodológica</li>
<li style="padding-left=0px">Modelos y Resultados</li>
</ul>
</div>
</li>
<li>Glosario</li>
<!--<li>Link de Interés</li>-->
<li>Contacto</li>
</ul>
</div>
In the css, the hover that give the style to the elements have this code:
.nav li > a {
display: table-cell;
}
.nav>li>a:hover {
background: none;
color: #ff7113;
}
.nav > li > ul {
display:none;
list-style:none;
position:relative;
}
.nav > li:hover > ul {
display:block;
}
I've read some posts about making menus for both desktop and touch without hover, with javascript or even using external libraries. Is there are more simple way to use this menu in mobiles devices?
I made a Jsfiddle with the menú working:
https://jsfiddle.net/esqkx349/
You have to open it in a wide screen to see it, like this:

Answer 1

in case, anyone still finding solution to this problem,
Add onclick="void(0)" in <div class="navbar-collapse collapse"> to make mobile device recognise an element as an element with a hover.
like <div class="navbar-collapse collapse" onclick="void(0)">

Answer 2

Well, I made it:
https://jsfiddle.net/pmiranda/bwkyocpa/1/
I had to put some javascript and css:
function isTouchDevice(){
return typeof window.ontouchstart !== 'undefined';
}
$(document).ready(function(){
/* If mobile browser, prevent click on parent nav item from redirecting to URL */
if(isTouchDevice()) {
// 1st click, add "clicked" class, preventing the location change. 2nd click will go through.
$(".navbar-nav > li > a").click(function(event) {
// Perform a reset - Remove the "clicked" class on all other menu items
$(".navbar-nav > li > a").not(this).removeClass("clicked");
$(this).toggleClass("clicked");
if ($(this).hasClass("clicked")) {
event.preventDefault();
}
});
}
});
CSS:
.hover-hack {
position: fixed !important;
background-color: rgba(0, 0, 0, 0.7) !important;
}
#media only screen and (max-width:1024px) {
.hover-hack {
background: rgba(0, 0, 0, 1) !important;
z-index: 10;
}
}
And the html:
<li>Metodología<span></span>
<ul class="text-submenu hover-hack">
<li style="padding-left=0px">Guía Metodológica</li>
<li style="padding-left=0px">Modelos y Resultados</li>
</ul>
</li>
<li>Glosario</li>

Answer 3

It's possible to make a clickable dropdown without Js.
The hover method is sketchy because some touch devices will treat the first click like a hover action.
It can be done using a checkbox html element. Then, css can detect wether or not the checkbox is current checked.
I created a component that does the job using this link. It works fairly well on mobile because click events work just fine.
Pure CSS clickable dropdown?
Problem is, this solution is slightly hacky and pure HTML, CSS implementations can't work outside of the HTML heirarchy.(so if your button and your dropdown menu exist in different branches of the html heirarchy it won't work.)
I think the most appropriate solution is to use a little bit of JS and handle the element on click.