Search code examples
jqueryhoverclicksubmenumenubar

Change Hover to Onclick Toggle for Drop Down Menu

I'm creating a website for my church and I have just completed the homepage. However, before moving on to other pages, I need to finalize the menu bar. Currently the menu is set to display a horizontal drop down when hovered over. I really desire to have this hover changed to a click function which I know can be solved through Javascript and/or JQuery. I've looked through several websites and cannot find something that fits my needs, especially since I want to keep my current CSS coding. I want to be able to click on the menu and have the sub-menu appear, and I would like the sub-menu to disappear if the user clicks on the same main menu item again or by clicking somewhere else on the screen.

Here is my HTML:

<!--Start Nav Menu-->
<nav>
<ul id="bar1">

    <!--Begin About Us-->
    <li><a href="#">ABOUT US</a>
        <!--Begin drop down menu items-->
        <ul>
            <li>
                <a href="#"><font color="#2b77a0">•</font> New to Nederland First AG</a>          
                <a href="#"><span style="margin-left:10px;"><font color="#2b77a0">•</font> Our History</span></a>
                <a href="#"><span style="margin-left:10px;"><font color="#2b77a0">•</font> Our Beliefs</span></a>
            </li>

        </ul>
        <!--End drop down menu items-->
    </li>
    <!--End About Us-->

            <!--Begin Ministries-->
    <li><a href="#">MINISTRIES</a>
        <!--Begin drop down menu items-->
        <ul>
            <li>
                <a href="#"><font color="#2b77a0">•</font> Kids</a>          
                <a href="#"><span style="margin-left:10px;"><font color="#2b77a0">•</font> Youth</span></a>
                <a href="#"><span style="margin-left:10px;"><font color="#2b77a0">•</font> Women</span></a>
                <a href="#"><span style="margin-left:10px;"><font color="#2b77a0">•</font> Men</span></a>
            </li>

        </ul>
        <!--End drop down menu items-->
    </li>
    <!--End Ministries-->

                    <!--Begin Events-->
    <li><a href="#">EVENTS</a>
        <!--Begin drop down menu items-->
        <ul>
            <li>
                <a href="#"><font color="#2b77a0">•</font> Latest News</a>          
                <a href="#"><span style="margin-left:10px;"><font color="#2b77a0">•</font> Monthly Calendar</span></a>
            </li>

        </ul>
        <!--End drop down menu items-->
    </li>
    <!--End Events-->

                        <!--Begin Listen Online-->
    <li><a href="#">LISTEN ONLINE</a>
        <!--Begin drop down menu items-->
        <ul>
            <li>
                <a href="#"><font color="#2b77a0">•</font> Sermons</a>          
                <a href="#"><span style="margin-left:10px;"><font color="#2b77a0">•</font> Teachings</span></a>
                <a href="#"><span style="margin-left:10px;"><font color="#2b77a0">•</font> Archive</span></a>
            </li>

        </ul>
        <!--End drop down menu items-->
    </li>
    <!--End Listen Online-->
    <li><a href="pages/contact.html">CONTACT US</a></li>
    <li class="filler"></li>
</ul>


Here is my CSS:

nav {
position: relative;
width:960px;
z-index:9999;
margin-left:auto;
margin-right:auto;
padding:0;
background-color:transparent;
text-align:justify;
margin-top:-10px;
font-size:0.1px;
}


#bar1 {


background-color:transparent;
padding:0;
text-align: justify;
overflow: hidden;
height:39px;
border-top: 1px solid #222222; border-bottom: 1px solid #90908e;
font-size:0.1px;
}


#bar1>li {
display:inline-block;
margin-top:8px;
height:100%;
}


#bar1>li>a {
font-family:'Oswald',Verdana, Geneva, sans-serif;
font-size:15px;
color:#464748;
text-decoration:none;

}
#bar1>li>a:hover,#bar1>li>a:active,#bar1>li:hover>a {
font-family:'Oswald',Verdana, Geneva, sans-serif;
font-size:15px;
color:#2b77a0;
text-decoration:none;

}

#bar1>li>ul>li {
border-top: none;
height:29px;
margin-top:8px;
left: 0;
position: absolute;
width: 100%;
text-decoration:none;
background-color:transparent;
padding-top:7px;
}


#bar1>li:hover>ul>li{
display:block;
background-color:transparent;
}
#bar1>li>ul>li{
display:none;
text-decoration:none;
}

#bar1>li>ul>li>a
{
font-family:Arial, Helvetica, sans-serif;
font-size:15px;
color:#90908e;
text-decoration:none;
}

#bar1>li>ul>li>a:hover, #bar1>li>ul>li>a:active, #bar1>li>ul>li:hover>a,
{
font-family:Arial, Helvetica, sans-serif;
color:black;
}

li {
list-style-type:none;
}

.filler 
{
width:100%;
display:block;
height:0px;
}

So in short again, I'm just looking for a way either through JS or JQuery to replace the hover into a click function. Thanks for any help and advice.

And here is my Fiddle: http://jsfiddle.net/Broli/ms74wnry/

Solution

  • You can use this jQuery code:

    $("#bar1").on("click","li", function(){
    event.stopPropagation();
    $("#bar1 > li").each(function(){//close all opened sub-menu
        $(this).find("ul li").css("display", "none");
        $(this).find("ul li").css("text-decoration","none");
    });
    $(this).find("ul li").css("display", "block");
    $(this).find("ul li").css("background-color","transparent");
});
$('html').click(function() {
    $("#bar1 > li").each(function(){//close all opened sub-menu
        $(this).find("ul li").css("display", "none");
        $(this).find("ul li").css("text-decoration","none");
    });
});

    I use event.stopPropagation because..

    If a click event propagates to the element, hide the menus. If the click event originated from inside #bar, stop that event so it will never reach the element, thus only clicks outside of #bar will hide the menus.

    Check out this Fiddle..