popup menu (content sensitive menu) : Menu « GUI Components « JavaScript DHTML

popup menu (content sensitive menu)

JavaScript Bible, Fourth Edition
by Danny Goodman 

John Wiley & Sons CopyRight 2001

<STYLE TYPE="text/css">
#contextMenu {position:absolute; background-color:#cfcfcf; 
              border-style:solid; border-width:1px; 
              border-color:#EFEFEF #505050 #505050 #EFEFEF; 
              padding:3px 10px; font-size:8pt; font-family:Arial, Helvetica; 
              line-height:150%; visibility:hidden}
.menuItem {color:black}
.menuItemOn {color:white}
OL {list-style-position:inside; font-weight:bold; cursor:nw-resize}
LI {font-weight:normal}
function showContextMenu() {
    contextMenu.style.pixelTop = event.clientY + document.body.scrollTop
    contextMenu.style.pixelLeft = event.clientX + document.body.scrollLeft
    contextMenu.style.visibility = "visible"
    event.returnValue = false
function revert() {
function hideMenu() {
    contextMenu.style.visibility = "hidden"
function handleClick() {
    var elem = window.event.srcElement
    if (elem.id.indexOf("menuItem") == 0) {
        shapesList.style.listStyleType = elem.LISTTYPE
    event.cancelBubble = true
function highlight() {
    var elem = event.srcElement
    if (elem.className == "menuItem") {
        elem.className = "menuItemOn"
function unhighlight() {
    var elem = event.srcElement
    if (elem.className == "menuItemOn") {
        elem.className = "menuItem"
<BODY onClick="alert('You reached the document object.')" >
<OL ID="shapesList" onContextMenu="showContextMenu()">
<A HREF="javascript:alert('A sample link.')">Three-Dimensional Shapes</A>
<LI>Circular Cylinder</LI>
<LI>Rectangular Prism</LI>
<LI>Regular Right Pyramid</LI>
<LI>Right Circular Cone</LI>
<DIV ID="contextMenu" onLoseCapture="hideMenu()" onClick="handleClick()"
 onMouseOver="highlight()" onMouseOut="unhighlight()">
<SPAN ID="menuItem1" CLASS="menuItem" LISTTYPE="upper-alpha">A,B,C,...</SPAN><BR>
<SPAN ID="menuItem2" CLASS="menuItem" LISTTYPE="lower-alpha">a,b,c,...</SPAN><BR>
<SPAN ID="menuItem3" CLASS="menuItem" LISTTYPE="upper-roman">I,II,III,...</SPAN><BR>
<SPAN ID="menuItem4" CLASS="menuItem" LISTTYPE="lower-roman">i,ii,iii,...</SPAN><BR>
<SPAN ID="menuItem5" CLASS="menuItem" LISTTYPE="decimal">1,2,3,...</SPAN><BR>


Related examples in the same category

1.Application Menubar Example
2.[DOM Menu] :: Example 1 :: Horizontal Menu
3.[DOM Menu] :: Example 2 :: KDE Keramik Style Menu
4.[DOM Menu] :: Example 3: Brainjar.com 'Revenge of the Menubar' Style Menu
5.[DOM Menu] Example 4: Vertical Menu
6.[DOM Menu] :: Example 5 :: Two Menus
7.[DOM Menu] :: Example 6 :: Flash Hiding
8.Menu bar for an inner fake window
9.Fly in Menu item
10.Not too fancy menu with toolbar
11.Custom Contextual Menu(content sensitive)
12.Drop-Down Menus
13.Menu with sound
14.Menu based on Javascript
15.Complete Source Code for the Menu
16.Slide out menu
17.Dynamic menu: fly in
18.Menu and submenu
19.Slide out menu with i18N
20.Menu: XP, win 98 style
21.Simple drop-down menu example with layer
22.Build a simple fancy menu
23.Add/delete menu items
24.Customizable layout: customize menu layout
25.Vertical layout menu
26.Easy skinable menu with CSS
27.Menu Item properties
28.Direct link menu
29.Context menu: popup menu
30.Black Menu
31.Dropdown menu