Metachecker.net
|
FontsMadeEasy.com
|
RankChecker.net
Learn Java Script Today
|
Over 5000 Free Fonts
|
Tutorials
|
Javascript Forum
|
Other Javascript Resources
|
Cheat Sheet
JavaScript Basics
Inserting Javascript
Complete Tutorial
Advance DHTML Tutorial
Script archive
Advanced Tutorials
Alert Scripts
Animation
Audio
Background Effects
Banner Ads
Browser Window
Buttons
Button Forms
Calculcators
Calendars
Clocks & Dates
Cookies
Cursor Effects
DHMTL Games
DHTML Miscellaneous
Equivalents
Forms
Games
IE4+ Scripts
IE5+ Scripts
Image Effects
Image Miscellaneous
Links & Buttons
Math Related
Messages Miscellaneous
Miscellaneous
Mouse Tricks
Navigation
Page Details
Password Protection
Pulldown Menus
Random Stuff
Scrolling
Status Bar
Text Animation
User Detail
User Info
Window Control
Dot Menu
[View Sample]
A very interesting "dot" menu. It's really worth to see.
Insert into <HEAD>
<style type="text/css"> .dot { position: absolute; width: 6; height: 6; visibility: hidden; background-color: red; font-size: 1px; cursor: pointer; cursor: hand; z-index: 100 } .dotoff { position: absolute; width: 6; height: 6; visibility: hidden; background-color: gray; font-size: 1px; cursor:default; z-index: 100} .dotempty { position: absolute; width: 6; height: 6; visibility: hidden; background-color: orange; font-size: 1px; cursor: pointer; cursor: hand; zindex: 100 } .caption { position: absolute; visibility: hidden; font-family: Tahoma; color: black; font-size: 11px; text-align: Center; cursor: default; z-index: 1 } body { margin: 0px; background-color: white; } a { color: silver; text-decoration: none } p { font-size: 10px; font-family: tahoma; color: black } </style> <script language="JavaScript" type="text/javascript"> /********************************************************************************** DotMenu * Copyright (C) 2001 Dan Pupius * This may be used and changed freely as long as this msg is intact! * We will also appreciate any links you could give us. *********************************************************************************/ function lib_bwcheck(){ //Browsercheck (needed) this.ver=navigator.appVersion this.agent=navigator.userAgent this.dom=document.getElementById?1:0 this.opera5=this.agent.indexOf("Opera 5")>-1 this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom && !this.opera5)?1:0; this.ie6=(this.ver.indexOf("MSIE 6")>-1 && this.dom && !this.opera5)?1:0; this.ie4=(document.all && !this.dom && !this.opera5)?1:0; this.ie=this.ie4||this.ie5||this.ie6 this.mac=this.agent.indexOf("Mac")>-1 this.ns6=(this.dom && parseInt(this.ver) >= 5) ?1:0; this.ns4=(document.layers && !this.dom)?1:0; this.bw=(this.ie6 || this.ie5 || this.ie4 || this.ns4 || this.ns6 || this.opera5) return this } var bw=new lib_bwcheck() // The code of this script is in the body, the browsercheck above is not used. </script>
Insert into <BODY>
<script language="javascript1.2" type="text/javascript"> <!-- // DotMenu // provides cross-browser functionality //====================================== function getObjectRef(name) { if(document.getElementById) return document.getElementById(name); else if(document.all) return document.all[name]; else return null; } // general functions to assist the script //======================================== function show(name) { var el = getObjectRef(name); if(el) el.style.visibility = "visible"; } function hide(name) { var el = getObjectRef(name); if(el) el.style.visibility = "hidden"; } function getWidth(name) { var el = getObjectRef(name); return el.offsetWidth; } function getHeight(name) { var el = getObjectRef(name); return el.offsetHeight; } function moveMe(name,x,y) { var el = getObjectRef(name); if(el) { el.style.top = parseInt(y); el.style.left = parseInt(x); } } function moveBy(name,x,y) { var el = getObjectRef(name); if(el) { el.style.top = parseInt(el.style.top) + parseInt(y); el.style.left = parseInt(el.style.left) + parseInt(x); } } // Creates the menu objects //========================== var menuCount = 0; function menuObject(name,x,y,caption, r, parent) { if ( (!document.getElementById&&!document.all) || navigator.userAgent.indexOf("Opera")>-1) return; document.write('<div id="divDot' + menuCount + '" class="dotempty" style="top: ' + y + '; left: ' + x + '"></div>'); document.write('<div id="divCap' + menuCount + '" class="caption" style="top: 0; left: 0">' + caption + '</div>'); this.name = name; this.parent = parent this.ref = "divDot" + menuCount; this.caption = "divCap" + menuCount if(r) this.radius = r; else this.radius = 400; this.subMenus = new Array(); this.state = 0; this.moving = false; if(this.parent) this.action = "null"; else this.action = "toggle"; if(this.parent) this.startAngle = parent.startAngle; else this.startAngle = 0; getObjectRef(this.ref).objRef = this.name; this.show = function() { show(this.ref); } this.hide = function() { hide(this.ref); } this.moveMe = function(x,y) { if(this.parent) { x += this.parent.x(); y += this.parent.y(); } moveMe(this.ref,x,y); } this.moveBy = function(x,y) { moveBy(this.ref,x,y); } this.x = function() { return parseInt(getObjectRef(this.ref).style.left); } this.y = function() { return parseInt(getObjectRef(this.ref).style.top); } this.w = function() { return getWidth(this.ref); } this.h = function() { return getHeight(this.ref); } this.showCaption = function() { moveMe(this.caption, this.x() - (getWidth(this.caption)/2) + (this.w()/2), (this.y() + this.h())); show(this.caption); } this.hideCaption = function() { hide(this.caption); } this.setCaption = function(c) { getObjectRef(this.caption).innerHTML = c;} this.addItem = function(c,action,r) { getObjectRef(this.ref).className = "dot"; if(!r) r = this.radius/2; var sub = new menuObject(this.name + ".subMenus[" + this.subMenus.length + "]",0,0,c,r,this); sub.parent = this; sub.action = action; sub.moveMe(0,0); this.subMenus[this.subMenus.length] = sub; return sub; } this.expand = function() { if(this.subMenus.length > 0) { var p = true; if(this.parent) { p = !this.parent.moving; for(var i=0; i<this.parent.subMenus.length;i++) p = p && ((this.parent.subMenus[i].state==0) || (this.parent.subMenus[i].state==this.parent.subMenus[i].subMenus.length)) && (this.parent.subMenus[i].moving==false); } else var o = false; if((!this.parent || this.parent.state == this.parent.subMenus.length) && p) { if(this.parent) this.collapseAll(this.name); var diff = 360 / this.subMenus.length; for(var i=0;i<this.subMenus.length;i++){ this.subMenus[i].moveMe(0,0); this.subMenus[i].show(); this.moving = true; this.subMenus[i].slide(this.subMenus[i].radius * cos(degToRad((diff*i)+this.startAngle)) , this.subMenus[i].radius * sin(degToRad((diff*i)+this.startAngle)), this.name + ".subMenus[" + i + "].showCaption();" + this.name + ".moving=false;" + this.name + ".state+=1;"); } if(this.parent){ getObjectRef(this.parent.ref).style.filter = "alpha (opacity=33)"; getObjectRef(this.parent.ref).style.MozOpacity = "33%"; getObjectRef(this.parent.ref).className = "dotoff"; getObjectRef(this.parent.caption).style.filter = "alpha (opacity=33)"; getObjectRef(this.parent.caption).style.MozOpacity = "33%"; for(i=0;i<this.parent.subMenus.length;i++) { getObjectRef(this.parent.subMenus[i].ref).style.filter = "alpha (opacity=66)"; getObjectRef(this.parent.subMenus[i].ref).style.MozOpacity = "66%"; getObjectRef(this.parent.subMenus[i].caption).style.filter = "alpha (opacity=66)"; getObjectRef(this.parent.subMenus[i].caption).style.MozOpacity = "66%"; } if(this.parent.parent) { for(i=0;i<this.parent.parent.subMenus.length;i++) { getObjectRef(this.parent.parent.subMenus[i].ref).style.filter = "alpha (opacity=33)"; getObjectRef(this.parent.parent.subMenus[i].ref).style.MozOpacity = "33%"; getObjectRef(this.parent.parent.subMenus[i].ref).className = "dotoff"; getObjectRef(this.parent.parent.subMenus[i].caption).style.filter = "alpha (opacity=33)"; getObjectRef(this.parent.parent.subMenus[i].caption).style.MozOpacity = "33%"; } getObjectRef(this.parent.parent.ref).style.MozOpacity = "33%"; getObjectRef(this.parent.parent.ref).style.MozOpacity = "33%"; getObjectRef(this.parent.parent.ref).className = "dotoff"; } } getObjectRef(this.ref).style.filter = "alpha (opacity=66)"; getObjectRef(this.caption).style.filter = "alpha (opacity=66)"; getObjectRef(this.ref).style.MozOpacity = "66%"; getObjectRef(this.caption).style.MozOpacity = "66%"; } } } this.collapse = function() { var p = true; p = !this.moving; for(var i=0; i<this.subMenus.length;i++) p = p && (this.subMenus[i].state==0) && (this.subMenus[i].moving==false); if(p && this.subMenus.length > 0) { for(var i=0;i<this.subMenus.length;i++){ this.subMenus[i].hideCaption(); this.moving = true; this.subMenus[i].slide(0, 0, this.name + ".subMenus[" + i + "].hide();" + this.name + ".moving=false;" + this.name + ".state-=1;"); } if(this.parent){ getObjectRef(this.parent.ref).style.filter = "alpha (opacity=66)"; getObjectRef(this.parent.ref).style.MozOpacity = "66%"; if(this.parent.subMenus.length != 0) getObjectRef(this.parent.ref).className = "dot"; else getObjectRef(this.parent.ref).className = "dotempty"; getObjectRef(this.parent.caption).style.filter = "alpha (opacity=66)"; getObjectRef(this.parent.caption).style.MozOpacity = "66%"; for(i=0;i<this.parent.subMenus.length;i++) { getObjectRef(this.parent.subMenus[i].ref).style.filter = "alpha (opacity=100)"; getObjectRef(this.parent.subMenus[i].ref).style.MozOpacity = "100%"; if(this.parent.subMenus[i].subMenus.length != 0) getObjectRef(this.parent.subMenus[i].ref).className = "dot"; else getObjectRef(this.parent.subMenus[i].ref).className = "dotempty"; getObjectRef(this.parent.subMenus[i].caption).style.filter = "alpha (opacity=100)"; getObjectRef(this.parent.subMenus[i].caption).style.MozOpacity = "100%"; } if(this.parent.parent) { for(i=0;i<this.parent.parent.subMenus.length;i++) { getObjectRef(this.parent.parent.subMenus[i].ref).style.filter = "alpha (opacity=66)"; getObjectRef(this.parent.parent.subMenus[i].ref).style.MozOpacity = "66%"; if(this.parent.parent.subMenus[i].subMenus.length != 0) getObjectRef(this.parent.parent.subMenus[i].ref).className = "dot"; else getObjectRef(this.parent.parent.subMenus[i].ref).className = "dotempty"; getObjectRef(this.parent.parent.subMenus[i].caption).style.filter = "alpha (opacity=66)"; getObjectRef(this.parent.parent.subMenus[i].caption).style.MozOpacity = "66%"; } } } getObjectRef(this.ref).style.filter = "alpha (opacity=100)"; getObjectRef(this.caption).style.filter = "alpha (opacity=100)"; getObjectRef(this.ref).style.MozOpacity = "100%"; getObjectRef(this.caption).style.MozOpacity = "100%"; } } this.collapseAll = function(except) { for(var i=0;i<this.parent.subMenus.length;i++) { if(this.parent.subMenus[i].name!=except && this.parent.subMenus[i].state== this.parent.subMenus[i].subMenus.length) { this.parent.subMenus[i].collapse(); } } } this.toggle = function(e) { if(document.all) id = window.event.srcElement; else id = e.target; var dot = eval(id.objRef); if(dot.state==0 && !dot.moving) dot.expand(); else if(dot.state==dot.subMenus.length && !dot.moving) dot.collapse() } this.doAction = function(e) { if(document.all) id = window.event.srcElement; else id = e.target; var dot = eval(id.objRef); if(dot.action == "toggle") dot.toggle(e); else eval(dot.action); } //change these if you want to change the events that trigger the actions //============================================ //getObjectRef(this.ref).onmousemove = this.toggle; getObjectRef(this.ref).onmouseup = this.doAction; this.slide = function(xx,yy,func) { if(!func) func = ""; var px = this.parent.x(); var py = this.parent.y(); var x = xx - this.x() + px; var y = yy - this.y() + py; var d = sqrt(square(xx-this.x() + px) + square(yy-this.y() + py)); var v = d/8; if(v<1) v = 1; if( (Math.abs(x) < v) && (Math.abs(y) < v) ) { moveMe(this.ref,xx + px,yy + py); if(func != "") eval(func); } else { var a = round(atan(x,y)); dx = round(v * cos(degToRad(a))); dy = round(v * sin(degToRad(a))); this.moveBy(dx,dy); setTimeout(this.name + ".slide(" + xx + "," + yy + ", '" + func + "');",10); } } // Preoading the windows filters. if (menuCount==0 && document.all) document.all[this.ref].style.filter = "alpha (opacity=100)"; menuCount++; return this; } // Math functions //================ var pi = Math.PI; function square(x) { return (x*x); } function sqrt(x) { return Math.sqrt(x); } function round(x) { return Math.round(x); } function rand(x,y) { return (round(Math.random()*(y-x)) + x); } function cos(x) { return Math.cos(x) } function sin(x) { return Math.sin(x) } function degToRad(x) { return ( x/(360/(2*pi)) ); } function radToDeg(x) { return ( x*(360/(2*pi)) ); } function atan(s,t) { if( s == 0.0 && t > 0.0) angle = 90.0; else if(s == 0.0 && t < 0.0) angle = 270.0; else if (s < 0.0 ) angle = 180.0 + radToDeg(Math.atan(t/s)); else if (s > 0.0 && t < 0.0) angle = 360.0 + radToDeg(Math.atan(t/s)); else { if(s==0.0) s=0.00001; angle = radToDeg(Math.atan(t/s)); } if(angle < 0.0) angle += 360.0; return angle; } //================================================= // make the menus and provide information on usage //================================================= // // In order to customise your menus all you need to do is: // - edit the styles .dot, .dotoff and .caption // - add the main menu using the following code // var [menu_name] = new menuObject("[menu_name]", [x position], [y position], [caption], [spacing between sub menus]); // - add the subemus using: // var [sub_menu] = [menu_name].addItem([caption],[action],[spacing]); // OR // var [sub-sub_menu] = [sub_menu].addItem([caption],[action],[spacing]); // OR // [menu_name].subMenus[x].addItem([caption],[action],[spacing]); // // - where action is string that get's evaluated when the dot is clicked // // (NOTE the spacing is optional and if left blank gets inherited // and is equal to the (parent's value)/2 - the default for // the main menu item uis 400) // // - the following allow extra manipulation of the menus: // + menuItem.show() - show's the menu's dot // + menuItem.showCaption() - show's the menu's caption // + menuItem.hide() // + menuItem.hideCaption() // + menuItem.startAngle = x - default is 0-degrees which means the first submenu appears // directly to the right, the following items are traced in a // clockwise direction // + menuItem.setCaption("text") - allows you to change a menus caption // + menuItem.expand() - opens a menus submenus (if they exist) // + menuItem.collapse() - closes a menu's subItems (unless one of them is open) // // + menuItem.moveMe(x,y) - moves a menu to coordinates (x,y) // + menuItem.moveBy(x,y) - moves a menu by (x,y)-pixels // + menuItem.x() & menuItem.y() - retrieve a menus coordinates // //==================================================== //get dimentions of the page if(document.all) pageWidth = document.body.offsetWidth-20; else pageWidth = innerWidth; if(document.all) pageHeight = document.body.offsetHeight-4; else pageHeight = innerHeight; //Create main menu var menu = new menuObject("menu",pageWidth/2,pageHeight/2,"DhtmlCentral Site Map",pageHeight/2); menu.startAngle = -90; //show menu and caption menu.show(); menu.showCaption(); //Add submenus menu.addItem("news","window.open('/news')"); menu.addItem("scripts","toggle"); menu.addItem("tutorials","toggle"); menu.addItem("sites","toggle"); menu.addItem("resources","toggle"); menu.subMenus[1].addItem("Radiobuttons","window.open('http://www.jsmadeeasy.com/javascripts/Navigation/navifation_by_radiobuttons/navifation_by_radiobuttons.htm')"); menu.subMenus[1].addItem("Drop List","window.open('http://www.jsmadeeasy.com/javascripts/Navigation/drop_list_(auto_link)/drop_list_(auto_link).htm')"); menu.subMenus[1].addItem("Floating Menu","window.open('http://www.jsmadeeasy.com/javascripts/Navigation/floating_menu/floating_menu.htm')"); menu.subMenus[1].addItem("ScrollableSlideShow","window.open('http://www.jsmadeeasy.com/javascripts/navigation/ScrollableSlideShow/index.htm')"); menu.subMenus[1].addItem("Random Page","window.open('http://www.jsmadeeasy.com/javascripts/Navigation/Random%20Page/index.htm')"); menu.subMenus[1].addItem("Quick Keys","window.open('http://www.jsmadeeasy.com/javascripts/Navigation/Quick%20Keys/index.htm')"); menu.subMenus[1].addItem("Pulldown Menu","window.open('http://www.jsmadeeasy.com/javascripts/Navigation/Pulldown%20Menu%20(Popup)/index.htm')"); menu.subMenus[1].addItem("Link List","window.open('http://www.jsmadeeasy.com/javascripts/Navigation/Links%20List/index.htm')"); menu.subMenus[2].addItem("General Questions","window.open('http://tutorial.jsmadeeasy.com/')"); menu.subMenus[2].addItem("Java-Script 1.2","window.open('http://tutorial.jsmadeeasy.com/contents.htm')"); menu.subMenus[2].addItem("Navigation","window.open('http://tutorial.jsmadeeasy.com/navigati.htm')"); menu.subMenus[2].addItem("Numbers","window.open('http://tutorial.jsmadeeasy.com/numbers.htm')"); menu.subMenus[2].addItem("Strings","window.open('http://tutorial.jsmadeeasy.com/strings.htm')"); menu.subMenus[2].addItem("Object Model","window.open('http://tutorial.jsmadeeasy.com/MODEL.HTM')"); menu.subMenus[3].addItem("Accounting","window.open('http://accounting.madeasynet.com')"); menu.subMenus[3].addItem("Acne","window.open('http://acne.madeasynet.com')"); menu.subMenus[3].addItem("Adsense","window.open('http://adsense.madeasynet.com')"); menu.subMenus[3].addItem("Advertising","window.open('http://advertising.madeasynet.com')"); menu.subMenus[3].addItem("Aerobics","window.open('http://aerobics.madeasynet.com')"); menu.subMenus[3].addItem("Affiliate","window.open('http://affiliate.madeasynet.com')"); menu.subMenus[3].addItem("Alternative","window.open('http://alternative.madeasynet.com')"); c = menu.subMenus[4].addItem("Cool Sites","toggle"); c.startAngle = 15; menu.subMenus[4].addItem("Articles","window.open('http://articles.madeasynet.com')"); menu.subMenus[4].addItem("Attraction","window.open('http://attraction.madeasynet.com')"); menu.subMenus[4].addItem("Tutorials &<br>References","toggle"); menu.subMenus[4].subMenus[0].addItem("Auctions","window.open('http://auctions.madeasynet.com')"); menu.subMenus[4].subMenus[0].addItem("Audiostreaming","window.open('http://audiostreaming.madeasynet.com')"); menu.subMenus[4].subMenus[0].addItem("Autocare","window.open('http://autocare.madeasynet.com')"); menu.subMenus[4].subMenus[3].addItem("Autoresponder","window.open('http://autoresponder.madeasynet.com')"); menu.subMenus[4].subMenus[3].addItem("Aviation","window.open('http://aviation.madeasynet.com')"); //--></script> <p> <b>INSTRUCTIONS</b><br> - click the dots to expand/collapse the tiers or perform the action<br> - a menu's sub-menus must be collapsed in order to collapse it's parent
Other Options