hover snippets

Really simple hover menus with jQuery

Tagged jquery, hover, menu, simple  Languages javascript

I got the inspiration for this simple menu from this blog post. It's based on the hover intent jQuery plugin by Brian Cherne.

The requirements:

Hide menu on mouse out:

Categories

Display menu on mouse over:

Categories

-Edit

-Delete

The HTML

<div id="categories-menu" class="hover-menu">
  <h2>Categories</h2>
  <ul class="actions no-style" style="display: none">
    <li><a href="">Add</a></li>
    <li><a href="">Edit</a></li>
    <li><a href="">Delete</a></li>
  </ul>
</div>

The JavaScript

<script type="text/javascript">
$(document).ready(function() {

  function show() {
    var menu = $(this);
    menu.children(".actions").slideDown();
  }
 
  function hide() { 
    var menu = $(this);
    menu.children(".actions").slideUp();
  }

  $(".hover-menu").hoverIntent({
    sensitivity: 1, // number = sensitivity threshold (must be 1 or higher)
    interval: 50,   // number = milliseconds for onMouseOver polling interval
    over: show,     // function = onMouseOver callback (required)
    timeout: 300,   // number = milliseconds delay before onMouseOut
    out: hide       // function = onMouseOut callback (required)
  });
 
});
</script>

Positioning the hover menu over the content

The above example will show the menu inline with the content, effectively pushing it down. To avoid that, use this HTML:

<div id="categories-menu" class="hover-menu" style="position: relative">
  <h2>Categories</h2>
  <ul class="actions no-style" style="position: absolute; background: white; display: none;">
    <li><a href="" id="edit-mode">Edit mode</a></li>
    <li><a href="" class="last">Add</a></li>
  </ul>
</div>

hoverIntent alternative

See this snippet for an alternative solution.

How to build popup menus and tooltips with jQuery

Tagged menu, hover, tooltip, contextmenu, jquery, popup  Languages javascript

This snippet shows you how to build a simple popup menu with jQuery. The example code can also be used to build things such as tooltips.

In the example we're going to build a menu for deleting table rows.

The HTML:

<table id="data">
  <tr>
    <td>
      <a href='/domains/digg.com'>digg.com</a>
      <!-- menu start -->
      <span class='hover-menu'>
        <a href='/domains/digg.com/remove' class='remove'>remove</a>
      </span>
      <!-- menu end -->
    </td>
  </tr>
</table>

The CSS:

.hover-menu
  display: none

The Javascript:

$.event.special.hover.delay = 200; 
$.event.special.hover.speed = 200; 

var show = function(e) {
  var $this = $(this);
  var $tooltip = $this.find('.hover-menu');
  $tooltip.fadeIn();
}

var hide = function() {
  var $this = $(this);
  var $tooltip = $this.find('.hover-menu');
  $tooltip.fadeOut();
}
$('#data td').bind('hover', show);
$('#data td').bind('hoverend', hide);

When you hover your mouse over table rows the menu will be shown.

You'll need to install the Event hover jQuery plugin to be able to use the hover and hoverend events. You could replace them with mouseenter and mouseleave, but usability would suffer...