how to change dropdown menu from hover to onclick

Question

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/wafp2bae/

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

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

#navContainer ul li {
  position: relative;
}

#navContainer ul li span {
  display: block;
}

#navContainer ul li a {
  text-decoration: none;
  color: white;
  display: block;
  padding: 8px;
}

#navContainer ul li span:hover {
  /*background: pink;*/
}

#navContainer ul li a:hover {
  background: black;
}

#navContainer ul ul {
  position: absolute;
  display: none;
}

#navContainer ul ul li a {
  background: #bec8cb;
}

#navContainer ul li:hover ul {
  /*width: 19%;*/
  position: static;
  display: block;
  right: 244px;
  top: 50px;
  float: right;
}

<div id="navContainer">
  <ul>
    <li><span><a href="#">Home</a></span></li>
    <li>
      <span><a href="#">About </a></span>
      <ul>
        <li><a href="#">Our business</a></li>
        <li><a href="#">Our History </a></li>
      </ul>
    </li>
    <li>
      <span><a href="#">Services</a></span>
      <ul>
        <li><a href="#">Web Design</a></li>
        <li><a href="#">Web templates </a></li>
        <li><a href="#">Tutorials </a></li>
      </ul>
    </li>
    <li><span><a href="#">Contact</a></span></li>
    <li><span><a href="#">News</a></span></li>

    <li>
      <span><a href="#">Services</a></span>
      <ul>
        <li><a href="#">Web Design</a></li>
        <li><a href="#">Web templates </a></li>
        <li><a href="#">Tutorials </a></li>
      </ul>
    </li>
  </ul>
</div>

how to change the dropdown from hover to mouse click no idea on how to get this done

Attached the fiddle : https://jsfiddle.net/prabashanash/wafp2bae/

<div id="navContainer">
                                    <ul>
                                        <li><span><a href="#">Home</a></span></li>
                                        <li>
                                            <span><a href="#">About </a></span>
                                            <ul>
                                                <li><a href="#">Our business</a></li>
                                                <li><a href="#">Our History </a></li>
                                            </ul>
                                        </li>
                                        <li>
                                            <span><a href="#">Services</a></span>
                                            <ul>
                                                <li><a href="#">Web Design</a></li>
                                                <li><a href="#">Web templates </a></li>
                                                <li><a href="#">Tutorials </a></li>
                                            </ul>
                                        </li>
                                        <li><span><a href="#">Contact</a></span></li>
                                        <li><span><a href="#">News</a></span></li>

                                        <li > 
                                            <span><a href="#">Services</a></span>
                                            <ul >
                                                <li><a href="#">Web Design</a></li>
                                                <li><a href="#">Web templates </a></li>
                                                <li><a href="#">Tutorials </a></li>
                                            </ul>
                                        </li>
                                    </ul>
                                </div>

At the moment it's on hover. So start there. Have you tried any changes or jquery? — Gezzasa, Nov 30 '17 at 08:20
i guess using css the closest you can get to is by changing hover to active. or u could acheive the exact by using jquery. — Hrishikesh, Nov 30 '17 at 08:25
Try searching for "Show div on click jquery", should get around 3,5 million results. Try it first and if you don't succeed I'll help you out. But please provide the code you've tried. — Gezzasa, Nov 30 '17 at 08:28
Try this: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_js_dropdown — Kannan K, Nov 30 '17 at 08:30

Memedon · Accepted Answer · 2017-11-30T19:44:56.207

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:

#navContainer ul li:hover ul {
        /*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: 41px 0 0 0px;
  padding: 0;
  background: #424445;
  /* border: 1px solid #7398ba; */
  text-align: center;
  width: 100%;
}

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

#navContainer ul li {
  position: relative;
}

#navContainer ul li span {
  display: block;
}

#navContainer ul li a {
  text-decoration: none;
  color: white;
  display: block;
  padding: 8px;
}

#navContainer ul li span:hover {
  /*background: pink;*/
}

#navContainer ul li a:hover {
  background: black;
}

#navContainer ul ul {
  position: absolute;
  display: none;
}

#navContainer ul ul li a {
  background: #bec8cb;
}

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

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

    <li>
      <span><a href="#">Services</a></span>
      <ul>
        <li><a href="#">Web Design</a></li>
        <li><a href="#">Web templates </a></li>
        <li><a href="#">Tutorials </a></li>
      </ul>
    </li>
  </ul>
</div>

A thorough answer. Although, where is the `event` type (e.g: `click`) on the `.on()` method? It appears the selector string should only filter down to the list item (`li`) descendants to the call the handler to toggle the class on the nested `ul` element. But delegating selectors in this way is usually not necessary unless the element in question isn't present on page load for the event to bind to. Could you demonstrate this solution in an embedded code snippet? — UncaughtTypeError, Nov 30 '17 at 08:54
Ah whoops. You're right I forgot the 'click'. If I can, I'll put together a snippet later. — Memedon, Nov 30 '17 at 16:01
@UncaughtTypeError I added the snippet and made a few changes I realized. I didn't have an editor to use last night, but now it'll work. Thanks! — Memedon, Nov 30 '17 at 16:14
Nice! If you account for any dropdown menus that might already be opened as well, then you'll have yourself a complete answer (*something like this:* `$("#navContainer li").not(this).children("ul").removeClass("active");`) — UncaughtTypeError, Nov 30 '17 at 19:08

SilverSurfer · Answer 2 · 2017-11-30T09:08:23.493

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: 41px 0 0 0px;
    padding: 0;
    background: #424445;
    /* border: 1px solid #7398ba; */
    
    text-align: center;
    width: 100%;
}
#navContainer ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
#navContainer ul li {
    position: relative;
}
#navContainer ul li span {
    display: block;
}
#navContainer ul li a {
    text-decoration: none;
    color: white;
    display: block;
    padding: 8px;
}
#navContainer ul li span:hover {
    /*background: pink;*/
}
#navContainer ul li a.activeA {
    background: black;
}
#navContainer ul ul {
    position: absolute;
    display: none;
}
#navContainer ul ul li a {
    background: #bec8cb;
}
#navContainer ul li ul.activeUl {
    /*width: 19%;*/
    
    position: static;
    display: block;
    right: 244px;
    top: 50px;
    float: right;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="navContainer">
    <ul>
        <li><span><a href="#">Home</a></span></li>
        <li>
            <span><a href="#">About </a></span>
            <ul>
                <li><a href="#">Our business</a></li>
                <li><a href="#">Our History </a></li>
            </ul>
        </li>
        <li>
            <span><a href="#">Services</a></span>
            <ul>
                <li><a href="#">Web Design</a></li>
                <li><a href="#">Web templates </a></li>
                <li><a href="#">Tutorials </a></li>
            </ul>
        </li>
        <li><span><a href="#">Contact</a></span></li>
        <li><span><a href="#">News</a></span></li>

        <li>
            <span><a href="#">Services</a></span>
            <ul>
                <li><a href="#">Web Design</a></li>
                <li><a href="#">Web templates </a></li>
                <li><a href="#">Tutorials </a></li>
            </ul>
        </li>
    </ul>
</div>

@Prabashanash Check my answer please. – SilverSurfer Nov 30 '17 at 08:56 — SilverSurfer, Nov 30 '17 at 08:56

score 1 · Answer 3 · answered Nov 30 '17 at 09:08

I think You Need This.

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

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

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

        <li>
            <span><a href="#">Services</a></span>
            <ul>
                <li><a href="#">Web Design</a>
                </li>
                <li><a href="#">Web templates </a>
                </li>
                <li><a href="#">Tutorials </a>
                </li>
            </ul>
        </li>
    </ul>
</div>

Mhd Alaa Alhaj · Answer 4 · 2017-11-30T08:48:12.777

0

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)

#navContainer ul li.open ul {
    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>
    <script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>
</head>

edited Nov 30 '17 at 08:48

answered Nov 30 '17 at 08:38

Mhd Alaa Alhaj

2,438
1
11
18

you should remove class `open` to the others which not clicked https://jsfiddle.net/wafp2bae/5/ – plonknimbuzz Nov 30 '17 at 08:45
Updated, Thanks! – Mhd Alaa Alhaj Nov 30 '17 at 08:48

Rupal · Answer 5 · 2017-11-30T09:03:04.100

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:-

#navContainer ul li:hover ul {
  /*width: 19%;*/
  position: static;
  display: block;
  right: 244px;
  top: 50px;
  float: right;
}

You can check updated code here

score 0 · Answer 6 · answered Nov 30 '17 at 09:49

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

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

#navContainer ul li {
  position: relative;
}

#navContainer ul li span {
  display: block;
}

#navContainer ul li a {
  text-decoration: none;
  color: white;
  display: block;
  padding: 8px;
}

#navContainer ul li span:hover {
  /*background: pink;*/
}

#navContainer ul li a:hover {
  background: black;
}

#navContainer ul ul {
  position: absolute;
  display: none;
}

#navContainer ul ul li a {
  background: #bec8cb;
}

#navContainer ul li:hover ul {
  /*width: 19%;*/
  position: static;
  display: block;
  right: 244px;
  top: 50px;
  float: right;
}
#navContainer ul li ul {
  width: 100%;
}

<div id="navContainer">
  <ul>
    <li><span><a href="#">Home</a></span></li>
    <li>
      <span><a href="#">About </a></span>
      <ul>
        <li><a href="#">Our business</a></li>
        <li><a href="#">Our History </a></li>
      </ul>
    </li>
    <li>
      <span><a href="#">Services</a></span>
      <ul>
        <li><a href="#">Web Design</a></li>
        <li><a href="#">Web templates </a></li>
        <li><a href="#">Tutorials </a></li>
      </ul>
    </li>
    <li><span><a href="#">Contact</a></span></li>
    <li><span><a href="#">News</a></span></li>

    <li>
      <span><a href="#">Services</a></span>
      <ul>
        <li><a href="#">Web Design</a></li>
        <li><a href="#">Web templates </a></li>
        <li><a href="#">Tutorials </a></li>
      </ul>
    </li>
  </ul>
</div>

score -1 · Answer 7 · answered Nov 30 '17 at 08:26

-1

You could try to assign the hover css propertys to a class and onclick, to give or take the class from the <li>

answered Nov 30 '17 at 08:26

felix9607

329
5
14

This should be a comment – Gezzasa Nov 30 '17 at 08:28
sorry not enough reputation and now i got even less, last attempt to help somenone... – felix9607 Nov 30 '17 at 11:59
Don't give up, you only need 50 rep to earn the commenting privilege and you are so close - all you need is one upvote on one good answer. – UncaughtTypeError Nov 30 '17 at 12:05
@felix9607 I went through the same :). Also tried commenting with answers and got slaughtered. It will come and feels good when it does. Stick with it. – Gezzasa Dec 01 '17 at 07:30

how to change dropdown menu from hover to onclick

7 Answers7

Linked