-3

My menu is working on hover. When I hover first level, it shows the second level menu.

I would like to change this so that when I click first level, it shows the second level and it stays visible.

This is my code on jsfiddle

<ul class="mainNav">
    <li><a href="rpm.php">Cours collectifs</a>
        <ul class="dropDown">
            <li><a href="rpm.php">RPM</a></li>
            <li><a href="bodypump.php">Bodypump</a></li>
            <li><a href="bodyattack.php">Bodyattack</a></li>
            <li><a href="bodycombat.php">Bodycombat</a></li>
            <li><a href="bodyJam.php">Bodyjam</a></li>
            <li><a href="bodybalance.php">Bodybalance</a></li>
            <li><a href="cxworx.php">Cxworx</a></li>
        </ul>
    </li>
</ul>
$(function () {

    var url = window.location.pathname;
    var urlRegExp = new RegExp(url.replace(/\/$/, ''));
    $('.mainNav li a').each(function () {
        // and test its href against the url pathname regexp
        if (urlRegExp.test(this.href)) {
            $(this).addClass('active');
            $(this).closest('.mainNav>li').children('a').addClass("active");
        }
    });

});

$("ul.mainNav li").hover(function () {
    $(this).find("ul.dropDown").css({ "display": "block" }).fadeTo('500', '1.0');
}, function () {
    $(this).find("ul.dropDown").fadeTo('200', '0.0').css({ "display": "none" });
});

My css

@import url(http://fonts.googleapis.com/css?family=Raleway:600,800);

ul.mainNav {
    margin:0;
    padding:0;
    list-style-type:none;
    background-color: #f0eff0;
    height: 28px;
    font-family: 'Raleway', sans-serif;
    color: #606060;
    float: right;
    margin-right: 100px;

}
.menu-wrapper{
    background-color: #f0eff0;
    height: 3.4em;
}


.mainNav li {
    margin:0;
    padding:0;
    list-style-type:none;
    height: 28px;
    line-height:28px;
    float: left;
    color: #606060;
    font-size: 14px;
}
.mainNav li a {
    padding: 0 20px;
    line-height: 3.8em;
    display:block;
    color: #606060;
    text-decoration:none;
    font-family: 'Raleway', sans-serif;
    font-weight: 800;
    text-transform: uppercase;
}

.mainNav li:hover > a {
    color: #ffc102;
}

.mainNav li a:hover{
    color: #ffc102;
}

.mainNav li ul.dropDown {
    margin:0;
    padding:0;
    position: absolute;
    display: none;
    background: #fff;
    opacity: 0.0;
    height: 3em;
}
.mainNav li ul.dropDown li {
    float: left;
    height: 28px;
    line-height: 28px;
    margin: 0;
    padding: 0;
    font-size: 12px;
    color: #606060;
    /*font-weight: normal;*/

}
.mainNav li ul.dropDown li a {
    font-family: 'Raleway', sans-serif;
    font-weight: 400;
    line-height: 4em;
    height: 28px;
    display:block;
    padding: 0 20px;
    color: #606060;
    text-transform: uppercase;
}
.mainNav li ul.dropDown li a:hover {
    color: #ffc102;
}

.img-logo-coach-menu {
    position: absolute;
    margin-left: 5em;
}

.active {
    background: #DCDCDC
    color: #ffc102;
    /*opacity: 1;*/
    /*visibility: visible;*/
}

I was trying to do something like that

    $('.mainNav li a').click(function(){
       $('.mainNav li a ul.dropDown').hide();

        $(this).closest(" .dropDown" ).css({"display" : "block"});
        $(this).closest(" .dropDown" ).css({"opacity" : 1});
       $(this).next().show();

    });

but it is not working.

5
  • 1
    I think this would be considered a "Please debug my code" question... :/
    – Ted Nyberg
    Jun 2, 2015 at 12:19
  • yes please help my, i'm sorry
    – MIKE
    Jun 2, 2015 at 12:31
  • As Ted said it is not a proper question but as a beginner I welcome you to community and answered your question.
    – Vikram
    Jun 2, 2015 at 12:40
  • Please go through the standard you need to follow while posting a question.
    – Vikram
    Jun 2, 2015 at 12:41
  • possible duplicate of How can I debug my JavaScript code?
    – Liam
    Jun 2, 2015 at 12:43

1 Answer 1

0

Mike you were not using your selectors properly, jquery always depends upon your DOM structure so your code might be correct but its possible that it will not give you desired result.

I just updated http://jsfiddle.net/mst0057o/4/

code correct is as follows

$('.mainNav > li a').click(function(e){
            e.preventDefault();
            $(this).next("ul.dropDown").css({"display" : "block"}).fadeTo('500', '1.0');
        });

rest of part you need to take care, i just updated click function.

1
  • thank you very much i'm still learning
    – MIKE
    Jun 2, 2015 at 12:41

Not the answer you're looking for? Browse other questions tagged or ask your own question.