I am currently developing a small website that includes a simple drop down menu feature. When using a desktop, hovering over an item triggers the drop down list, which is straightforward. However, on touch screens, this functionality is not working properly. I can click on an item to generate the drop down, but I am unable to close it by clicking on the parent menu item.
Unfortunately, I lack expertise in JavaScript, so I am having trouble implementing the solutions I have come across on this platform.
Here is my website on jsfiddle: https://jsfiddle.net/y1v8zsc5/
You can also view a live version at: raihansharif.site90.com
The code is quite lengthy...
HTML:
<body>
<div id="wrapper">
...
</div><!-- wrapper -->
</body>
CSS:
/* CSS styles */
...
/* CSS styles continued */
...
/* Additional CSS styles */
...
JavaScript:
$('.hamburger').on('click', function(e) {
// Prevent link from jumping to the top of the page
e.preventDefault();
// Toggle slide down effect for the menu
$('.menu').toggleClass('slide-down');
});
document.addEventListener('touchmove', function(e) {
e.preventDefault();
var touch = e.touches[0];
alert(touch.pageX + " - " + touch.pageY);
}, false);