(^168) ❘ CHAPTER 6 CSS
menu your browser provides when you click the right button on a three-button mouse, use the two-
fi nger tap gesture on a Mac, or hold down the [Ctrl] key and click also on a Mac. Given the various
operating system differences in producing a context menu, the action of producing a context menu
will hereafter be referred to as a contextual click. This menu pops up at the location of your mouse
cursor. You begin with the following XHTML.
<!DOCTYPE HTML>
Context Menu Example
The preceding markup is styled with the following style sheet:
body {
font: 12px "Lucida Grande", Arial, sans-serif;
color: rgb(50, 50, 50);
margin: 0 ;
padding: 0 10px;
}
div#contextMenu {
width: 150px;
height: 150px;
background: yellowgreen;
border: 1px solid gold;
padding: 10px;
position: absolute;
left: 0 ;
right: 0 ;
display: none;
}
The following JavaScript defi nes the behavior that enables the context menu to function:
$(document).ready(
function()
{
var contextMenuOn = false;
$(document).on(
'contextmenu',
[http://www.it-ebooks.info](http://www.it-ebooks.info)