I need help to open menu on click on a href link in html?-CodePudding

i have tried from last few days but unable to open megamenu on click of ahref link, after done some code checkup, i have found some hint in css, in that if i make visibility value to visible then megamenu shows otherwise not, i want that menu to be open only on click right now it's opening on hover event and below code to be executed only onclick of ahref tag

.menu-subs, .menu-column-4 
{
    visibility: hidden!important;   
}

below is ref. screenshot for menu

menu-screen

CodePudding user response：

You will need to include some JavaScript to your code. Here are some examples on how to use it.

 <button onclick="myFunction()">Click me</button> 
 <element onclick="myScript"> 
 object.onclick = function(){myScript}; 
 object.addEventListener("click", myScript);

I would also recommend using technologies like bootsrap or angular to deal with menus and navigation bars. They make life easier and is good to know how to use them.

CodePudding user response：

If you want to make it so that when you click something them menu is visible, you could use the onclick function in the href and toggle the visibility of the menu using css display: non or block.

HTML: you are creating a div with the css properties of that class and assigning it an id. you are also creating a link that will call the javascript function when clicked

<div  id="menu">
// the menu
</div>

<h1 onclick="openMenu()">Open menu</h1>

CSS: the class which is not displayed currently

.menu-subs, .menu-column-4 
{
    display: none; 
}

Javascript:

function openMneu(){
    //get the menu element in the html
    elem = document.getElementById("menu");

   // set the styling of the menu to visible
   elem.style.display = "block"; //or inline block depending on your other css
}

when openmenu is called by the clicking of the heading open link. You could also use element.addeventlistender, bit that would be a bit harder, so i suggest you try this. This should work, lmk if it does

(this is my second stackoverflow answer :|)