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:


Display menu on mouse over:





<div id="categories-menu" class="hover-menu">
  <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>

The JavaScript

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

  function show() {
    var menu = $(this);
  function hide() { 
    var menu = $(this);

    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)

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">
  <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>

hoverIntent alternative

See this snippet for an alternative solution.