I am facing an issue with my responsive dropdown menu that has 4 buttons, one of which opens a submenu (portfolio). The problem occurs when I accidentally click the 'portfolio' button, although it should only be triggered by a hover function. This action closes the submenu, and it becomes unresponsive until the button is clicked again. While this is a common mistake, it disrupts the user experience.
$(document).ready(main);
var counter = 1;
function main () {
$('.bt-menu').click(function(){
if (counter == 1) {
$('nav').animate({
left: '0'
});
counter = 0;
} else {
counter = 1;
$('nav').animate({
left: '-100%'
});
}
});
// Show and hide submenus
$('.submenu').click(function(){
$(this).children('.children').slideToggle();
});
}* {
padding:0;
margin:0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.menu_bar {
display:none;
}
header {
width:100%;
}
header nav {
z-index:1000;
width:100%;
margin:0 auto;
}
header nav ul {
list-style:none;
}
header nav ul li {
display:inline-block;
position:relative;
}
... (CSS code continues) View the problem on the following links:
jsfiddle.net/9fdhefqc/
I discovered that changing the portfolio href from '#' to ' ' resolves the issue, but it affects the menu's functionality on mobile devices. Therefore, I am exploring alternative solutions to this problem.