|
EXAMPLE
Left click anywhere on the page to
see the popup menu appear.
1) Insert this code in the <HEAD> section of the page.
2) Download
this ZIP file with the leftclick.css,
leftclick.js and the menu.js
and unzip into the appropriate directory.
3) Insert the onload event handler
inside the <BODY> tag as follows:
<body
onload="createPopUpMenu()",
followed by other tags such as bgcolor, etc..
4) Change these variables to customize the
style of the popup menu and the links in this section of the menu.js file:
var overBgCr = "#5555CC";
// onmouseover bgcolor of menu items
var overCr = "#FFFFFF"; //
onmouseover font color
var outBgCr = "#C0C0C0"; //
bgcolor of menu
var outCr = "#000000"; // font
color
var itemFont = "Arial"; // font
family
function createPopUpMenu()
{
createMenu("mainMenu", 150, 0);
createItem("item1", "<i>FREE ONLINE GAMES:</i>", "mainMenu",
"http://games.simplythebest.net/", "", false);
createItem("item2", "Action games", "mainMenu", "http://games.simplythebest.net/categories/1/action.html", "", false);
etc...
createSep("mainMenu");
createItem("item3", "Other libraries", "mainMenu", "", "",
true); // set to true to
activate submenu
createMenu("menuBarMenu", 150, 1);
createItem("item4", "Free Fonts", "menuBarMenu",
"fonts.html", "", false);
createItem("item5", "DHTML Scripts", "menuBarMenu",
"dhtml_scripts.html", "", false);
etc...
linkSubMenu("item3", "menuBarMenu"); //
assign the item number with the submenu popup
You can also try modifying some variables in the leftclick.css
file to further customize the popup menu:
.menuFront {
position: absolute;
visibilty: hidden;
top: 0px;
left: 0px;
background-color: #C0C0C0;
border-left: 1px solid #FFFFFF;
border-right: 1px solid #000000;
border-top: 1px solid #FFFFFF;
border-bottom: 1px solid #000000;
margin: 1px;
cursor: default;
z-index: 11;
}
.item {
position: absolute;
visibility: inherit;
color: #000000;
background-color: inherit;
font-size: 9pt;
font-family: Arial, sans-serif;
font-weight: bold;
left: 1px;
height: 15px;
padding-left : 5px;
z-index: 11;
5) Define the path to the three script
files in the <HEAD> section:
<link rel="stylesheet" type="text/css"
href="script_files/leftclick.css">
<script language="JavaScript1.2" src="script_files/leftclick.js"></script>
<script language="JavaScript1.2" src="script_files/menu.js"></script>
Toh
Zhiqiang's web site has more details on the
LeftClick popup menu script.
|
