CODEWITHSUNDEEP
javascriptjqueryhtmlcss
ZiaUllahZia
ZiaUllahZia

Reputation: 1142

How to replace hover in to on click

I have a full-width menu, which currently works on hover. I want the exact same functionality but on click not on mouseover. I want to use some jQuery or JavaScript only to achieve this functionality.

Here is the code

HTML

<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Tutorials</a>
            <ul>
                <li><a href="#">Photoshop</a></li>
                <li><a href="#">Illustrator</a></li>
                <li><a href="#">Web Design</a>
                    <ul>
                        <li><a href="#">HTML</a></li>
                        <li><a href="#">CSS</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="#">Articles</a>
            <ul>
                <li><a href="#">Web Design</a></li>
                <li><a href="#">User Experience</a></li>
            </ul>
        </li>
        <li><a href="#">Inspiration</a></li>
    </ul>
</nav>

CSS

nav {
  text-align:center;
  width: 100%;
  background: #bebebe;
  padding: 0;
  margin: 0;
  height: 60px;
  position:relative;
}
nav ul {
  background: #bebebe;
  list-style:none;
  padding:0 20px;
  margin: 0;
  height: 60px;
}
nav ul li {
  display: inline-block;
}
nav ul li a {
  color:#333333;
  display:block;
  padding:0px 40px;
  text-decoration:none;
  float: left;
  height: 60px;
   line-height: 60px;
}
nav ul li:hover {
  background: #333333;
}
nav ul li:hover > a{
    color:#FFFFFF;
}
nav ul li:hover > ul {
  display:block;
}
nav ul ul {
  background: #BEBEBE;
  padding:0;
  text-align: center;
  display:none;
    width: 100%;
  position: absolute;
  top: 60px;
  left: 0px;
}

If you want to see this in action here is the link. Please click here to see the menu in action

Upvotes: 1

Views: 1524

Answers (4)

Gosha_Fighten
Gosha_Fighten

Reputation: 3868

Replace the following CSS rules

nav ul li:hover > ul {
  display:block;
}

with

nav ul li.expanded > ul {
  display:block;
}

Now, you can handle a click on a menu item and remove/add the expanded CSS class to expand the item:

function handle(){
    $("nav ul li").on("click", function(e) {
            e.stopPropagation();
        var parent = $(this).parent("li");
        if (parent.length)
            $(this).parent().siblings().removeClass("expanded");
        else
            $(this).siblings().removeClass("expanded");
        $(this).addClass("expanded")
  });
}

See the updated fiddle.

Upvotes: 1

Himanshu Upadhyay
Himanshu Upadhyay

Reputation: 6565

Here is your solution:

I have fork your jsfiddle with updated code. Please take a look

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Tutorials</a>
            <ul>
                <li><a href="#">Photoshop</a></li>
                <li><a href="#">Illustrator</a></li>
                <li><a href="#">Web Design</a>
                    <ul>
                        <li><a href="#">HTML</a></li>
                        <li><a href="#">CSS</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="#">Articles</a>
            <ul>
                <li><a href="#">Web Design</a></li>
                <li><a href="#">User Experience</a></li>
            </ul>
        </li>
        <li><a href="#">Inspiration</a></li>
    </ul>
</nav>

nav {
  text-align:center;
  width: 100%;
  background: #bebebe;
  padding: 0;
  margin: 0;
  height: 60px;
  position:relative;
}
nav ul {
  background: #bebebe;
  list-style:none;
  padding:0 20px;
  margin: 0;
  height: 60px;
}
nav ul li {
  display: inline-block;
}
nav ul li a {
  color:#333333;
  display:block;
  padding:0px 40px;
  text-decoration:none;
  float: left;
  height: 60px;
   line-height: 60px;
}
/*nav ul li:hover {
  background: #333333;
}
nav ul li:hover > a{
    color:#FFFFFF;
}
nav ul li:hover > ul {
  display:block;
}*/
nav ul ul {
  background: #BEBEBE;
  padding:0;
  text-align: center;
  display:none;
    width: 100%;
  position: absolute;
  top: 60px;
  left: 0px;
}

$(document).ready(function(){
    $('li').on('click',function(){
        $(this).siblings('li').not(this).find('a').css('color','#333333');
        $(this).siblings('li').not(this).find('ul').css('display','none');
        $(this).siblings('li').not(this).css('background','#BEBEBE');
        $(this).find('a').css('color','#FFFFFF');
        $(this).find('ul').css('display','block');
        $(this).css('background','#333333');
    });
});

JSFIDDLE

Upvotes: 1

wscourge
wscourge

Reputation: 11321

  1. Replace your :hover styles with .expanded,
  2. Add expanded class to your <li> elements containing the expandable <ul>
  3. Also, add close-expanded to not expandable menu items, so clicking them will close the last clicked expanded element.
  4. In your jQuery, add class expanded to the clicked expandable element.
  5. In your jQuery, remove class expanded from every expandable element when close-expandable is clicked.

$(".expandable").on("click", function(event) {

  $(".expanded").removeClass("expanded");
  $(this).addClass("expanded");

});

$(".close-expanded").on("click", function(event) {

  $(".expanded").removeClass("expanded");
  
});
nav {
  text-align:center;
  width: 100%;
  background: #bebebe;
  padding: 0;
  margin: 0;
  height: 60px;
  position:relative;
}
nav ul {
  background: #bebebe;
  list-style:none;
  padding:0 20px;
  margin: 0;
  height: 60px;
}
nav ul li {
  display: inline-block;
}
nav ul li a {
  color:#333333;
  display:block;
  padding:0px 40px;
  text-decoration:none;
  float: left;
  height: 60px;
   line-height: 60px;
}
nav ul li.expanded { /* replaced :hover with .expanded */
  background: #333333;
}
nav ul li.expanded > a{ /* replaced :hover with .expanded */
    color:#FFFFFF;
}
nav ul li.expanded > ul { /* replaced :hover with .expanded */
  display:block;
}
nav ul ul {
  background: #BEBEBE;
  padding:0;
  text-align: center;
  display:none;
    width: 100%;
  position: absolute;
  top: 60px;
  left: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
    <ul>
        <li class="close-expanded"><a href="#">Home</a></li>
        <li class="expandable"><a href="#">Tutorials</a>
            <ul>
                <li><a href="#">Photoshop</a></li>
                <li><a href="#">Illustrator</a></li>
                <li><a href="#">Web Design</a>
                    <ul>
                        <li><a href="#">HTML</a></li>
                        <li><a href="#">CSS</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li class="expandable"><a href="#">Articles</a>
            <ul>
                <li><a href="#">Web Design</a></li>
                <li><a href="#">User Experience</a></li>
            </ul>
        </li>
        <li class="close-expanded"><a href="#">Inspiration</a></li>
    </ul>
</nav>

Upvotes: 1

Zakaria Acharki
Zakaria Acharki

Reputation: 67525

Working fiddle.

You could combine children() and toggle() like :

$('ul>li').on('click',function(e){
  e.stopPropagation();

  $(this).children('ul').toggle();
})

Make sure to add e.stopPropagation() to stop event from bubbling.

Hope this helps.

Upvotes: 0

Related Questions