How To Change Dropdown Menu From Hover To Onclick

July 31, 2023 Post a Comment

Need to change the menu dropdown from hover to onclick: i have attached the css and the html code i have also attached the working fiddle https://jsfiddle.net/prabashanash/wafp2

Solution 1:

So let's take this apart a little bit. For starters, I assume you have jquery referenced already.

Lets start by changing the :hover selector for the sub list to it's own selector.

Old CSS:

#navContainerulli:hoverul {
        /*width: 19%;*/position: static;
        display: block;
        right: 244px;
        top: 50px;
        float: right;   
    }

New CSS:

.active {
        /*width: 19%;*/position: static !important;
        display: block !important;
        right: 244px;
        top: 50px;
        float: right;
    }

I added a couple !important statements because you need these to override any other setting. It might be necessary to add !important to each of the other, but not necessarily needed.

Now we want to make the JQuery selector. In your JS file (or inside script tags on your html doc), we need to find the elements and bind the event to them. We can do that by using the JQuery .on function.

First we need the base container which is identified by the id #navContainer. Then we can make bind the event as such:

$("#navContainer").on("click", "li", function(){

});

From there on we simply have to add or remove the class on click. We can do that by using the toggleClass JQuery function. Edit: We also will need to remove the active component on any other drop down lists in case multiple are open.

$("#navContainer").on("click", "li", function(){ 
   $(this).children("ul").toggleClass("active");
   $("#navContainer li").not(this).children("ul").removeClass("active");
});

This works because the .on bind is to every unordered list inside a list item in the container Since we changed the :hover selector to be for the active class, it becomes simply toggling the class on and off on click.

Hope this helps!

Edit: Embedded Snippet

$("#navContainer").on("click", "li", function(){
   $(this).children("ul").toggleClass("active");
   $("#navContainer li").not(this).children("ul").removeClass("active");
});

#navContainer {
  margin: 41px000px;
  padding: 0;
  background: #424445;
  /* border: 1px solid #7398ba; */text-align: center;
  width: 100%;
}

#navContainerul {
  margin: 0;
  padding: 0;
  list-style: none;
}

#navContainerulli {
  position: relative;
}

#navContainerullispan {
  display: block;
}

#navContainerullia {
  text-decoration: none;
  color: white;
  display: block;
  padding: 8px;
}

#navContainerullispan:hover {
  /*background: pink;*/
}

#navContainerullia:hover {
  background: black;
}

#navContainerulul {
  position: absolute;
  display: none;
}

#navContainerulullia {
  background: #bec8cb;
}

.active {
        /*width: 19%;*/position: static !important;
        display: block !important;
        right: 244px;
        top: 50px;
        float: right;
    }

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divid="navContainer"><ul><li><span><ahref="#">Home</a></span></li><li><span><ahref="#">About </a></span><ul><li><ahref="#">Our business</a></li><li><ahref="#">Our History </a></li></ul></li><li><span><ahref="#">Services</a></span><ul><li><ahref="#">Web Design</a></li><li><ahref="#">Web templates </a></li><li><ahref="#">Tutorials </a></li></ul></li><li><span><ahref="#">Contact</a></span></li><li><span><ahref="#">News</a></span></li><li><span><ahref="#">Services</a></span><ul><li><ahref="#">Web Design</a></li><li><ahref="#">Web templates </a></li><li><ahref="#">Tutorials </a></li></ul></li></ul></div>

Solution 2:

I think You Need This.

$( "#navContainer ul li" ).click(function() {
  $(this).siblings().removeClass('open');
  $( this ).toggleClass("open")
});

#navContainer {
    margin: 41px000px;
    padding: 0;
    background: #424445;
    /* border: 1px solid #7398ba; */text-align: center;
    width: 100%;
}
#navContainerul {
    margin: 0;
    padding: 0;
    list-style: none;
}
#navContainerulli {
    position: relative;
}
#navContainerullispan {
    display: block;
}
#navContainerullia {
    text-decoration: none;
    color: white;
    display: block;
    padding: 8px;
}
#navContainerullispan:hover {
    /*background: pink;*/
}
#navContainerullia:hover {
    background: black;
}
#navContainerulul {
    position: absolute;
    display: none;
}
#navContainerulullia {
    background: #bec8cb;
}
#navContainerulli.openul {
    position: inherit;
    display: block;
    right: 0px;
    top: 50px;
    z-index: 121;
    float: right;
    top: 0;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divid="navContainer"><ul><li><span><ahref="#">Home</a></span></li><li><span><ahref="#">About </a></span><ul><li><ahref="#">Our business</a></li><li><ahref="#">Our History </a></li></ul></li><li><span><ahref="#">Services</a></span><ul><li><ahref="#">Web Design</a></li><li><ahref="#">Web templates </a></li><li><ahref="#">Tutorials </a></li></ul></li><li><span><ahref="#">Contact</a></span></li><li><span><ahref="#">News</a></span></li><li><span><ahref="#">Services</a></span><ul><li><ahref="#">Web Design</a></li><li><ahref="#">Web templates </a></li><li><ahref="#">Tutorials </a></li></ul></li></ul></div>

Solution 3:

With a few lines of jquery you can achieve it:

$(document).ready(function(){
    $("#navContainer ul li a").click(function(){
    	$("#navContainer ul li a").not(this).removeClass("activeA")
        $(this).toggleClass("activeA")
    });
    $("#navContainer ul li").click(function(){
        var current = $(this).children("ul")
    	$("ul li ul.activeUl").not(current).removeClass("activeUl")
        current.toggleClass("activeUl")
    });
});

#navContainer {
    margin: 41px000px;
    padding: 0;
    background: #424445;
    /* border: 1px solid #7398ba; */text-align: center;
    width: 100%;
}
#navContainerul {
    margin: 0;
    padding: 0;
    list-style: none;
}
#navContainerulli {
    position: relative;
}
#navContainerullispan {
    display: block;
}
#navContainerullia {
    text-decoration: none;
    color: white;
    display: block;
    padding: 8px;
}
#navContainerullispan:hover {
    /*background: pink;*/
}
#navContainerullia.activeA {
    background: black;
}
#navContainerulul {
    position: absolute;
    display: none;
}
#navContainerulullia {
    background: #bec8cb;
}
#navContainerulliul.activeUl {
    /*width: 19%;*/position: static;
    display: block;
    right: 244px;
    top: 50px;
    float: right;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divid="navContainer"><ul><li><span><ahref="#">Home</a></span></li><li><span><ahref="#">About </a></span><ul><li><ahref="#">Our business</a></li><li><ahref="#">Our History </a></li></ul></li><li><span><ahref="#">Services</a></span><ul><li><ahref="#">Web Design</a></li><li><ahref="#">Web templates </a></li><li><ahref="#">Tutorials </a></li></ul></li><li><span><ahref="#">Contact</a></span></li><li><span><ahref="#">News</a></span></li><li><span><ahref="#">Services</a></span><ul><li><ahref="#">Web Design</a></li><li><ahref="#">Web templates </a></li><li><ahref="#">Tutorials </a></li></ul></li></ul></div>

Solution 4:

You could make it easily using jQuery with toggleClass, you will add

$( "#navContainer ul li" ).click(function() {
  $( this ).toggleClass("open")
});

then below change :hover to .open (or change ".open" to whatever you want)

#navContainerulli.openul {
    position: static;
    display: block;
    right: 244px;
    top: 50px;
    float: right;
}

now onclick will toggle class .open so it will give you the same result but onclick instead of onhover.

See the updated JSfiddle.

Note

Make sure to add jQuery reference inside your <head>.

Example

<head><scriptsrc="https://code.jquery.com/jquery-3.2.1.min.js"integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="crossorigin="anonymous"></script></head>

Solution 5:

You need to use jquery click event instead of using hover in css. Remove CSS Code of hover and then apply css on click event of ul through jquery. Add jquery Code:-

$('#navContainer').on('click','ul li',function(){
            $(this).siblings().find('ul').css('display','none');
            $(this).find('ul').css({"position": "static",
            "display": "block",
            "right": "244px",
            "top": "50px",
            "float": "right"});
        });

And Remove this css code:-

#navContainerulli:hoverul {
  /*width: 19%;*/position: static;
  display: block;
  right: 244px;
  top: 50px;
  float: right;
}

You can check updated code here

Html5 Learning