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:

On mouse out hide menu:

Categories

On mouse over display menu:

Categories

-Edit

-Delete

The HTML

   1  <div id="categories-menu" class="hover-menu">
   2    <h2>Categories</h2>
   3    <ul class="actions no-style" style="display: none">
   4      <li><a href="">Add</a></li>
   5      <li><a href="">Edit</a></li>
   6      <li><a href="">Delete</a></li>
   7    </ul>
   8  </div>

The JavaScript

   1  <script type="text/javascript">
   2  $(document).ready(function() {
   3  
   4    function show() {
   5      var menu = $(this);
   6      menu.children(".actions").slideDown();
   7    }
   8   
   9    function hide() { 
  10      var menu = $(this);
  11      menu.children(".actions").slideUp();
  12    }
  13  
  14    $(".hover-menu").hoverIntent({
  15      sensitivity: 1, // number = sensitivity threshold (must be 1 or higher)
  16      interval: 50,   // number = milliseconds for onMouseOver polling interval
  17      over: show,     // function = onMouseOver callback (required)
  18      timeout: 300,   // number = milliseconds delay before onMouseOut
  19      out: hide       // function = onMouseOut callback (required)
  20    });
  21   
  22  });
  23  </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 :

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

The PHP XML parser:

   1  class XML
   2  {
   3  	static function parse($data, $handler, $encoding = "UTF-8")
   4  	{
   5  		$parser = xml_parser_create($encoding);
   6  
   7  		xml_set_object($parser, $handler);
   8  		
   9  		xml_set_element_handler($parser,
  10  			array(&$handler, 'start'),
  11  			array(&$handler, 'end')
  12  		);
  13  			
  14  		xml_set_character_data_handler(
  15  			$parser,
  16  			array($handler, 'content')
  17  		);
  18  			
  19  		$result = xml_parse($parser, $data);
  20  
  21  		if(!$result)
  22  		{
  23  			$error_string = xml_error_string(xml_get_error_code($parser));
  24  			$error_line	  = xml_get_current_line_number($parser);
  25  			$error_column = xml_get_current_column_number($parser);
  26  			
  27  			$message = sprintf("XML error '%s' at line %d column %d", $error_string, $error_line, $error_column);
  28  			
  29  			throw new Exception($message);
  30  		}
  31  
  32  		xml_parser_free($parser);
  33  	}
  34  }

A result handler:

   1  class ResultHandler
   2  {
   3  	var $tag;
   4  
   5  	function start ($parser, $tagName, $attributes = null)
   6  	{
   7  		echo "start";
   8  		$this->tag .= $tagName; # Use .= to work around bug...
   9  	}
  10  
  11  	function end ($parser, $tagName)
  12  	{
  13  		echo "end";
  14  		$this->tag = null;
  15  
  16  	}
  17  
  18  	function content ($parser, $content)
  19  	{
  20  		echo "$this->tag: $content" ;
  21  	}
  22  }

Then in your code:

   1  $xml = "<a>bah</a>";
   2  XML::parse($xml, new ResultHandler());

Note that HTML /XML entities are considered to be tags by PHP ’s XML parser, so your start tag handler will be called three times for this tag, once for “really”, once for “&” and once for ” bad parser”:

   1  <data>really &amp;  bad parser</data>

I guess this is a bug… You can