Clever Geek Handbook

JQuery dropdown menu with css

I've made some lists and I think I'm lost with them when it comes to jQuery and makes my menu toggle on a click event.

This is what I have: http://jsfiddle.net/3rc63e3L/

The problem is in the menu. When the mouse hovers over the element, it is shown, and when I click it, it is hidden. But when I remove from CSS

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

It doesn't work even when clicking on the Menu2 tab. The idea is to remove this "hover" thing in menu2 and make it work for "click" only. How can I fix this?

+3


source to share


3 answers


You are trying to switch the elements of the list instead of the list itself. Just use the following JavaScript:

$('ol li.submenuone').click(function() {
    $('ol li.submenuone ul').toggle();
});


And remove your CSS from the top.

Demo: JSFiddle

0


source


use jquery instead of css ..



$('ol > li.submenuone').click(function() {
    $('ol > li.submenuone  ul').slideToggle();
  });
0


source


Use jQuery, initially the subMenu should be hidden. Then sho / hide, switch using jQuery. Also changed css.

$('ol li.submenuone').click(function() {
    //alert("hello");
    $('ol li.submenuone ul').toggle();
  });
      

        
        
        
      

    
.nav
{
    width: 100%;
    padding: 10px 0;
    background-color: red;
    text-align: center;
    box-shadow: 0px -1px 40px black;
    position: relative;
    z-index: 9999;
}

ol
{
    padding: 0;
    margin: 0;
    list-style-type: none;   
    font-size: 18px;
    height: 35px;
    line-height: 200%;
    display: inline-block;
    letter-spacing: 1px;
}

ol a
{
    color: white;
    text-decoration: none; 
    display: block;
}

ol > li
{
    float: left;
    width: 170px;
    height: 40px;
    border-right: 1px dashed #800517;
    transition-property: background;
	transition-duration: .4s;
}

ol > li:first-child
{
 border-left: 1px dashed #800517;   
}

ol > li:hover
{
    background-color: #800517;
}

ol > li > ul 
{
    list-style-type: none;
    padding: 0;
    margin: 0;
    height: 40px;
    width: 100px;
    display: none;
}

ol > li> ul
{
    display: none;   
}

ol > li > ul > li
{
    padding: 2px;
    background-color: red;
    position: relative;
    z-index: 9999;
    border-top: 1px dashed #800517;
}
ol > li > ul > li:first-child
{
    border-top: 0;
}
      

        
        
        
      

    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="nav">
        <ol>
            <li><a href="#">menu1</a></li>
            <li class="submenuone"><a href="#">menu2</a>
                <ul>
                    <li class="submenutwo"><a href="#">sub1</a></li>
                        <ul>
                            <li class="submenuthree"><a href="#">sub1</a></li>
                            <li class="submenuthree"><a href="#">sub2</a></li>
                            <li class="submenuthree"><a href="#">sub3</a></li>
                        </ul>
                    <li class="submenutwo"><a href="#">sub2</a></li>
                    <li class="submenutwo"><a href="#">sub3</a></li>
                </ul>
            </li>
            <li><a href="#">menu3</a></li>      
        </ol>
    </div>
Run codeHide result


0


source






More articles:


All Articles