Jquery Drop Down Menu click and mouseout

Question

I looked all over stackoverflow and cannot seem to find the answer.

I am trying to make a drop down menu with jquery. With no animation, when you click the button the menu drops down, but the when moving the cursor into the menu the menu disappears.

Any ideas?

> Blockquote
<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">
    $(document).ready(function() {
        $('.myMenu > li').bind('click', openSubMenu);
        $('.myMenu > li').bind('mouseout', closeSubMenu);

        function openSubMenu() {
            $(this).find('ul').css('visibility', 'visible');    
        };

        function closeSubMenu() {
            $(this).find('ul').css('visibility', 'hidden'); 
        };

    });
</script>


> Blockquote

<body>
<ul class="myMenu">
    <li>
        <a href="#" ><img src = "settings.png"></a>
        <ul>
            <li><a href="#">Login</a></li>
            <li><a href="#">Edit Register</a></li>
            <li><a href="#">Edit Posts</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </li>
</ul>
</body>
</html>


<style>
.myMenu {
    margin:0;
    padding:0;
}

.myMenu li {
    list-style:none;
    float:left;

}

    .myMenu ul {
    background-color: cccccc;
}

.myMenu li a:link, .myMenu li a:visited {
    display:block;
    text-decoration:none;
    padding: 0.5em 2em;
    margin:0;
    color:#000000;

}
.myMenu li ul {
    position:absolute;
    visibility:hidden;
    margin:0;
    padding:0;

}

.myMenu li ul li {
    display:inline;
    float:none;

}

    .myMenu li ul li a{

     border-bottom:1px solid #000000;
        border-top:1px solid #000000;
        border-left:1px solid #000000;
        border-right:1px solid #000000;
}

 </style>

When moving the cursor into or out of the menu you want it to dissapear? — Mark
– Mark, Commented Jul 15, 2014 at 14:37

Community · Accepted Answer · 2017-05-23 10:32:23Z

2

Here is a fiddle: http://jsfiddle.net/EQQp6/ Credit goes to: https://stackoverflow.com/a/9823105/746817 I just removed the animations for you and changed the mouseenter to click. It is not exactly based on your scenario but you should be able to take it from here.

Javascript:

$(document).ready(function() {
  // Menus
  $('ul.menu').hide();

  $('ul#main-nav li').click(function() {
    $('ul.menu', this).show();
  });

  $('ul#main-nav li').mouseleave(function() {
    $('ul.menu', this).hide();
  });
});

HTML:

  <ul id="main-nav">
  <li><a href="#">Click here</a>

    <ul class="menu">
        <li><a href="#">The Cure</a></li>
        <li><a href="#">Dinosaur Jr</a></li>
        <li><a href="#">Negrita</a></li>
        <li><a href="#">Ligabue</a></li>
        <li><a href="#">Dave Matthews</a></li>
     </ul>

 </li>
 <li><a href="#">No sub menu</a></li>
 <li><a href="#">Click here 2</a>
   <ul class="menu">
     <li><a href="#">Number 1</a></li>
     <li><a href="#">Number 2</a></li>
     <li><a href="#">Number 3</a></li>
     <li><a href="#">Number 4</a></li>
     <li><a href="#">Number 5</a></li>
   </ul>
 </li>

CSS:

/* Level One */
ul#main-nav   { overflow: hidden; }
ul#main-nav li  { float: left;}
ul#main-nav li a { display: block; width: 100px; height: 50px; border: 1px solid; text-align: center; line-height: 50px; padding: 10px; }

/* Level Two */
ul#main-nav ul.menu { position: absolute; }
ul#main-nav ul.menu li { float: none; }

EDIT: Solution for the comment about lining everything straight:

ul { padding: 0; list-style-type: none; }

edited May 23, 2017 at 10:32

CommunityBot

11 silver badge

answered Jul 15, 2014 at 15:00

Blackunknown

3055 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user3173447 Over a year ago

Wow Thank you so much!! this worked great. Now just need to figure out how to put the menu right underneath the button!

Blackunknown Over a year ago

I added the css needed for the alignment also updated the jsfiddle. Credit goes to: stackoverflow.com/a/9621023/746817

user3173447 Over a year ago

Thank you so much for everything!

Collectives™ on Stack Overflow

Jquery Drop Down Menu click and mouseout

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related