1

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

wscourge
  • 10,657
  • 14
  • 59
  • 80
ZiaUllahZia
  • 1,072
  • 2
  • 16
  • 30

4 Answers4

1

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.

Gosha_Fighten
  • 3,838
  • 1
  • 20
  • 31
  • Thank you, it is working on first child node but unfortunately not of sub-node on child nod. If you click on Subjects it show English, but if we click on English it does not show English A and English B. Here you can check http://jsfiddle.net/ziakhan/c5ghc80s/9/ – ZiaUllahZia Sep 19 '17 at 18:37
  • I've updated my answer. See the new JS code and fiddle. – Gosha_Fighten Sep 19 '17 at 19:21
1
  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>
wscourge
  • 10,657
  • 14
  • 59
  • 80
1

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

Himanshu Upadhyay
  • 6,558
  • 1
  • 20
  • 33
  • It stull have issue. If you apply it on this link http://jsfiddle.net/c5ghc80s/8/ , It did not work fine. – ZiaUllahZia Sep 19 '17 at 18:19
  • What is this @user3144924, this is not your code posted with question. – Himanshu Upadhyay Sep 19 '17 at 18:25
  • Bro this is dynamic menu generated from XML, That is wasy I can not add many classed. I need to do all with jquery or javascript. – ZiaUllahZia Sep 19 '17 at 18:27
  • Oh, in that case, how can we give solution if html code is not in a specific structure. – Himanshu Upadhyay Sep 19 '17 at 18:37
  • I edit everything for you. I used your logic and we are very near. Here you will see subject, if you click on subject it will show you English and Maths but if you click on English it not go to english details. Here is link to http://jsfiddle.net/ziakhan/c5ghc80s/9/ – ZiaUllahZia Sep 19 '17 at 18:40
  • Thanks, man. I used your logic and it works for me. Can you please check the jsfiddle. I used exactly your logic. I did little bit changes. $(this).children('ul').css('display','block'); added this/ Here is the updated link. http://jsfiddle.net/ziakhan/c5ghc80s/11/ – ZiaUllahZia Sep 19 '17 at 19:29
  • Your welcome @user3144924, happy to help. Thanks for up vote and accepting my answer. – Himanshu Upadhyay Sep 20 '17 at 04:52
0

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.

Zakaria Acharki
  • 66,747
  • 15
  • 75
  • 101