CODEWITHSUNDEEP
jqueryhtmlcss
Prabashanash
Prabashanash

Reputation: 3

how to change dropdown menu from hover to onclick

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>

Upvotes: 0

Views: 2557

Answers (7)

Memedon
Memedon

Reputation: 927

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>

Upvotes: 2

Muhammad Usman
Muhammad Usman

Reputation: 357

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

Upvotes: 0

SilverSurfer
SilverSurfer

Reputation: 4366

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>

Upvotes: 1

Karan Mehta
Karan Mehta

Reputation: 415

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>

Upvotes: 1

Rupal
Rupal

Reputation: 1109

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

Upvotes: 0

MHD Alaa Alhaj
MHD Alaa Alhaj

Reputation: 3163

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>

Upvotes: 0

felix9607
felix9607

Reputation: 327

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

Upvotes: -1

Related Questions