Question

Hi guys im working on my first website and im trying to implement a sliding menu using jquery.

This is what a got so far :

         <a href="javascript:void(0);"onmouseover="ShowBox();" onmouseout="HideBox();"">Show box<a>
         <script type="text/javascript">
         function ShowBox()
         {
           $("#SlideMenu").slideDown();   
         }
         function HideBox()
         {
           $("#SlideMenu").slideUp();
         }
         </script>

When i MouseOver the control my menu slides down but slides back up automatically.
What I would like is to let the user the time to select and option from the menu and if he doesn’t, i would like the menu to close as soon as the mouse leaves the control.

Any idea why this isn’t working ?
Thanks in advance.

Answer 1

Do your stuff without the inline JS, and remember to close the <a> element and use a ready function

<a id="test">Show box</a>

<script type="text/javascript">
   $(document).ready(function() {
      $("#test").on({
          mouseenter: function() {
             $("#SlideMenu").slideDown();
          },
          mouseleave: function() {
             $("#SlideMenu").slideUp();
          },
          click: function(e) {
             e.preventDefault();
          }
      });
   });
</script>

FIDDLE