CODEWITHSUNDEEP
jquerymenu
user3173447
user3173447

Reputation: 233

Jquery Drop Down Menu click and mouseout

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>

Upvotes: 0

Views: 295

Answers (1)

Blackunknown
Blackunknown

Reputation: 305

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; }

Upvotes: 2

Related Questions