I am fairly new to web development and currently I am stuck on making a drop down menu transition out of sight. At the moment I have an onclick="showMenu() and onclick="hideMenu() which links to the script:
function showMenu() {
navLinks.style.right = "0";
console.log("Show");
}
function hideMenu() {
navLinks.style.right = "-200px important";
console.log("Hide");
}
The hideMenu() function does nothing because it is being overwritten im not sure how or why it is being overwritten.
How can I overwrite this or disable it?
The reason here may be you have defined two function for same event onclick which make that only one is applied which is first used .
You can use toggle to hide/show menu by clicking on same button , like this :
JS
function showHideMenu(){
reed1 = document.getElementById("idOfYourMenu");
cardData.classList.toggle("showHide");
}
CSS
{
.showHide{
right: 0px;/*If menu has right:-200px as initial value*/
}