0
I created a dropdown menu using HTML and CSS and made a configuration with Jquery, for when I pass the mouse over, this dropdown menu opens. But on mobile this doesn’t work, how to set up to have a touch sensor?
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Semana Paulo Freire</title>
<style>
nav {
margin: 0 auto;
max-width: 800px;
background: #008fea;
box-shadow: 0 3px 15px rgba(0, 0, 0, 0.15);
}
nav::after {
display: block;
content: "";
clear: both;
}
nav ul {
padding: 0;
margin: 0;
list-style: none;
}
nav ul li {
float: left;
position: relative;
}
nav ul li a {
display: block;
color: rgba(255, 255, 255, 0.9);
text-decoration: none;
padding: 1rem 2rem;
border-top: 2px solid transparent;
border-bottom: 2px solid transparent;
transition: all 0.3s ease-in-out;
}
nav ul li a:hover,
nav ul li a:focus {
background: rgba(0, 0, 0, 0.15);
}
nav ul li a:focus {
color: white;
}
nav ul li a:not(:only-child)::after {
padding-left: 4px;
content: " ▾";
}
nav ul li ul li {
min-width: 190px;
}
nav ul li ul li a {
background: transparent;
color: #555;
border-bottom: 1px solid #dde0e7;
}
nav ul li ul li a:hover,
nav ul li ul li a:focus {
background: #eee;
color: #111;
}
.dropdown {
display: none;
position: absolute;
background: #fff;
box-shadow: 0 4px 10px rgba(10, 20, 30, 0.4);
}
</style>
</head>
<body>
<nav class="nav">
<ul>
<li><a href="index.html">Início</a></li>
<li class="drop">
<a href="#">Menu</a>
<ul class="dropdown">
<li><a href="#">Pré</a></li>
<li><a href="#">Durante</a></li>
<li><a href="posPandemia.html">Pós</a></li>
</ul>
</li>
</ul>
</nav>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"
type="text/javascript"
></script>
<script src="js/app.js" type="text/javascript">
$(".drop").mouseover(function() {
$(".dropdown").show(300);
});
$(".drop").mouseleave(function() {
$(".dropdown").hide(300);
});
</script>
</body>
</html>
In mobile Hover does not exist, you have to make a fallback to detect if the device is mobile, and if it is mobile you change the mouseover by click.
– hugocsl
@hugocsl only with this change to "click" the touch came to work. The problem is that once clicked, the dropdown menu is open and no longer closes, just by entering another link...
– rafaelpradoj
Put a button to close the menu, and/or if you prefer it makes an event that if you click outside the menu it closes, and also puts an event that if some action of the menu is clicked it also closes
– hugocsl
You’re the man! I figured it out!!!
– rafaelpradoj