Sol Tuş Menüsü
Mousenuzun sol tuşuna basınca hoş ve kullanışlı bir menüü çıkıyor.
ÖRNEK
<style type="text/css"> .menuFront { position: absolute; visibility: 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; } .menuBack { position: absolute; visibility: hidden; top: 0px; left: 0px; background-color: #C0C0C0; border-right: 1px solid #000000; border-bottom: 1px solid #000000; z-index: 10; } .item { position: absolute; visibility: inherit; color: #000000; font-size: 9pt; font-family: Arial, sans-serif; font-weight: bold; left: 1px; height: 15px; padding-left : 5px; z-index: 11; } .itemSep { position: absolute; visibility: inherit; left: 1px; height: 7px; padding-left: 5px; padding-right: 5px; z-index: 11; } .sep { position: absolute; color: #FFFFFF; width: 100%; height: 1px; z-index: 11; } .arrow { position: absolute; font-size: 9pt; font-family: Marlett, sans-serif; font-weight: normal; margin-top: 2px; z-index: 11; } </style> <script language="JavaScript1.2"> /* Left Click 1.1 by Toh Zhiqiang Homepage: http://www.tohzhiqiang.f2s.com/leftclick/index.php Email: webmaster@tohzhiqiang.com */ var widthMax; var heightMax; var xCoor; var yCoor; var sWidth; var sHeight; var xScroll; var widthScroll; var menu = new Array; var divId = new Array; function rightClick() { document.oncontextmenu = show; document.onclick = hideMenus; } function menuItem() { this.item = arguments[0]; this.hasSubMenu = arguments[1]; this.level = arguments[2]; this.subMenuFront = arguments[3]; this.subMenuBack = arguments[4]; this.subMenuOffset = arguments[5]; this.link = arguments[6]; } function findMenuLevel(parentId) { for (i = 0; i < divId.length; i = i + 2) { if (divId[i] == (parentId + "Front")) { return divId[i + 1]; break; } } } function createMenu(menuId, menuWidth, level) { var frontLayer = document.createElement("DIV"); with (frontLayer) { id = menuId + "Front"; className = "menuFront"; with (style) { posWidth = menuWidth; posHeight = 3; backgroundColor = outBgCr; visibility = "hidden"; } } document.body.appendChild(frontLayer); var backLayer = document.createElement("DIV"); with (backLayer) { id = menuId + "Back"; className = "menuBack"; with (style) { posWidth = menuWidth + 2; posHeight = 5; backgroundColor = outBgCr; visibility = "hidden"; } } document.body.appendChild(backLayer); divId[divId.length] = menuId + "Front"; divId[divId.length] = level; divId[divId.length] = menuId + "Back"; divId[divId.length] = level; } function createItem(itemId, displayText, parentId, pageSrc, hasSubMenu) { var menuFront = document.getElementById(parentId + "Front"); var menuBack = document.getElementById(parentId + "Back"); var level = findMenuLevel(parentId); var subMenuFront = ""; var subMenuBack = ""; var subMenuOffset = -1; var itemLayer = document.createElement("DIV"); with (itemLayer) { onmouseover = over; onmouseout = out; onclick = goToLink; id = itemId; className = "item"; if (displayText != "-") { if (hasSubMenu) { link = ""; innerText = displayText; var sepLayer = document.createElement("DIV"); with (sepLayer) { className = "arrow"; innerText = "4"; with (style) { left = menuFront.style.posWidth - 20; } itemLayer.appendChild(sepLayer); } } else { innerText = displayText; } with (style) { posTop = menuFront.style.posHeight - 3; posWidth = menuFront.style.posWidth - 4; fontFamily = itemFont; color = outCr; if (hasSubMenu) { subMenuOffset = menuFront.style.posHeight - 3; } } menuFront.style.posHeight += 15; menuBack.style.posHeight += 15; } } menuFront.appendChild(itemLayer); menu[menu.length] = new menuItem(itemId, hasSubMenu, level, subMenuFront, subMenuBack, subMenuOffset, pageSrc); } function createSep(parentId) { var menuFront = document.getElementById(parentId + "Front"); var menuBack = document.getElementById(parentId + "Back"); var sepLayer = document.createElement("DIV"); with (sepLayer) { className = "itemSep"; innerHTML = "<hr size="1" class="sep" align="center">"; with (style) { posTop = menuFront.style.posHeight; posWidth = menuFront.style.posWidth - 4; } menuFront.style.posHeight += 7; menuBack.style.posHeight += 7; } menuFront.appendChild(sepLayer); } function linkSubMenu(itemId, subMenuId) { for (i = 0; i < menu.length; i++) { if (menu[i].item == itemId) { menu[i].subMenuFront = subMenuId + "Front"; menu[i].subMenuBack = subMenuId + "Back"; break; } } } function hideMenus() { for (i = 0; i < divId.length; i = i + 2) { var menuLayer = document.getElementById(divId[i]); menuLayer.style.visibility = "hidden"; } } function popUpPos() { var menuFront = document.getElementById(divId[0]); var menuBack = document.getElementById(divId[2]); widthMax = document.body.clientWidth; heightMax = document.body.clientHeight; xCoor = window.event.x; yCoor = window.event.y; sWidth = menuFront.style.posWidth; sHeight = menuFront.style.posHeight; xScroll = document.body.scrollTop; widthScroll = document.body.offsetWidth - widthMax; xWidth = xCoor + sWidth; yHeight = yCoor + sHeight; if (menuFront.style.visibility == "hidden") { if (yHeight < (heightMax - 1)) { menuFront.style.posTop = yCoor + xScroll; menuBack.style.posTop = yCoor + xScroll; } else { if (yCoor < sHeight) { menuFront.style.posTop = xScroll; menuBack.style.posTop = xScroll; } else { menuFront.style.posTop = yCoor - sHeight + xScroll - 2; menuBack.style.posTop = yCoor - sHeight + xScroll - 2; if ((menuFront.style.posTop + menuFront.style.posHeight - xScroll + 2) > heightMax) { menuFront.style.posTop = heightMax - menuFront.style.posHeight + xScroll - 2; menuBack.style.posTop = heightMax - menuFront.style.posHeight + xScroll - 2; } } } if (xWidth < widthMax - 1) { menuFront.style.posLeft = xCoor; menuBack.style.posLeft = xCoor; } else { if (xCoor == (widthMax + 1)) { menuFront.style.posLeft = xCoor - sWidth - 3; menuBack.style.posLeft = xCoor - sWidth - 3; } else { if (widthMax < xCoor) { menuFront.style.posLeft = xCoor - sWidth - widthScroll - 1; menuBack.style.posLeft = xCoor - sWidth - widthScroll - 1; } else { menuFront.style.posLeft = xCoor - sWidth - 2; menuBack.style.posLeft = xCoor - sWidth - 2; } } } } } function findOffset(itemId) { offset = 0; for (i = 0; i < menu.length; i++) { if (itemId == document.getElementById(menu[i].item)) { offset = menu[i].level; break; } } for (i = 0; i < divId.length; i = i + 2) { if (offset == divId[i + 1]) { return i; } } } function popUpSubPos(xCoor, yCoor, subMenuFront, subMenuBack, offset) { var menuFront = document.getElementById(divId[offset]); var menuBack = document.getElementById(divId[offset + 2]); widthMax = document.body.clientWidth; heightMax = document.body.clientHeight; sWidth = subMenuFront.style.posWidth; sHeight = subMenuFront.style.posHeight; xScroll = document.body.scrollTop; widthScroll = document.body.offsetWidth - document.body.clientWidth; xWidth = xCoor + sWidth; yHeight = yCoor + sHeight; if (subMenuFront.style.visibility == "hidden") { if ((yHeight - xScroll) < (heightMax - 1)) { subMenuFront.style.posTop = yCoor; subMenuBack.style.posTop = yCoor; } else { subMenuFront.style.posTop = yCoor - sHeight + 15; subMenuBack.style.posTop = yCoor - sHeight + 15; } if (xWidth < widthMax - 1) { subMenuFront.style.posLeft = xCoor; subMenuBack.style.posLeft = xCoor; } else { subMenuFront.style.posLeft = xCoor - menuFront.style.posWidth - subMenuFront.style.posWidth + 5; subMenuBack.style.posLeft = xCoor - menuFront.style.posWidth - subMenuFront.style.posWidth + 5; } } } function show() { var source = window.event.srcElement.tagName; var menuFront = document.getElementById(divId[0]); var menuBack = document.getElementById(divId[2]); if (menuFront.style.visibility == "hidden") { if (source != "A" && source != "IMG" && source != "INPUT" && source != "SELECT" && source != "TEXTAREA") { popUpPos(); menuFront.style.visibility = "visible"; menuBack.style.visibility = "visible"; return false; } } else { hideMenus(); } } function checkElement(itemId) { if (itemId.className == "arrow") { return itemId.parentElement; } else { return itemId; } } function over() { var itemId = event.srcElement; itemId = checkElement(itemId); offset = findOffset(itemId); var menuFront = document.getElementById(divId[offset]); var xCoor = menuFront.style.posLeft + itemId.style.posWidth; var yCoor = menuFront.style.posTop; var divSubId = divId.slice(4); itemId.style.backgroundColor = overBgCr; itemId.style.color = overCr; for (i = 0; i < menu.length; i++) { if (itemId == document.getElementById(menu[i].item)) { for (j = 0; j < divSubId.length; j = j + 2) { if ((menu[i].level) < divSubId[j + 1]) { var subMenu = document.getElementById(divSubId[j]); subMenu.style.visibility = "hidden"; } } if (menu[i].hasSubMenu) { var subMenuFront = document.getElementById(menu[i].subMenuFront); var subMenuBack = document.getElementById(menu[i].subMenuBack); subMenuFront.style.zIndex = menu[i].level + 12; subMenuBack.style.zIndex = menu[i].level + 11; popUpSubPos(xCoor, yCoor + menu[i].subMenuOffset, subMenuFront, subMenuBack, offset); subMenuFront.style.visibility = "visible"; subMenuBack.style.visibility = "visible"; } break; } } } function out() { var itemId = event.srcElement; itemId = checkElement(itemId); itemId.style.backgroundColor = outBgCr; itemId.style.color = outCr; } function goToLink() { var itemId = event.srcElement; for (i = 0; i < menu.length; i++) { if ((itemId == document.getElementById(menu[i].item)) && (menu[i].link != "")) { window.location.href = menu[i].link; break; } } } function isIE() { return (navigator.appName == "Microsoft Internet Explorer") && (parseInt(navigator.appVersion >= 5)) } if (isIE) { document.onload = hideMenus; document.onclick = show; } </script> <script language="JavaScript1.2"> var overBgCr = "#3333CC"; var overCr = "#FFFFFF"; var outBgCr = "#C0C0C0"; var outCr = "#000000"; var itemFont = "Arial"; function createPopUpMenu() { createMenu("menu1", 150, 0); //creates the main menu layer called menu1 (with level 0) createItem("item1", "Link 1", "menu1", "http://www.javascriptbankasi.com.tr.tc", false); //add an item to menu1 createItem("item2", "Link 2", "menu1", "http://www.javascriptbankasi.com.tr.tc", false); //add an item to menu1 createItem("item3", "Link 3", "menu1", "", true); //add an item that has a sub menu createItem("item4", "Link 4", "menu1", "http://www.javascriptbankasi.com.tr.tc", false); //add an item to menu1 createItem("item5", "Link 5", "menu1", "http://www.javascriptbankasi.com.tr.tc", false); //add an item to menu1 createMenu("menu2", 200, 1); //create a sub menu layer called menu2 (with level 1) createItem("item6", "Link 6", "menu2", "http://www.javascriptbankasi.com.tr.tc", false); //add an item to menu2 createItem("item7", "Link 7", "menu2", "http://www.javascriptbankasi.com.tr.tc", false); //add an item to menu2 createItem("item8", "Link 8", "menu2", "http://www.javascriptbankasi.com.tr.tc", false); //add an item to menu2 createItem("item9", "Link 9", "menu2", "http://www.javascriptbankasi.com.tr.tc", false); //add an item to menu2 linkSubMenu("item3", "menu2"); //link menu item item3 to sub menu layer menu2 } </script>
Copyright © 2002-2004 www.javascriptbankasi.com.tr.tc
Mail:javascriptbankasi@hotmail.com