Phiên bản đầy đủ: jsB@nk » Trình đơn » Định hướng » Menu dấu chấm
URL: https://www.javascriptbank.com/dot-menu.html
Một menu dấu chấm rất thú vị, khi người dùng nhấp chuột vào dấu chấm của menu thì hiệu ứng sẽ bung ra thêm nhiều dấu chấm chứa các mục chọn con của menu. Hiệu ứng rất tuyệt vời. Bạn hãy thưởng thức nó.
Phiên bản đầy đủ: jsB@nk » Trình đơn » Định hướng » Menu dấu chấm
URL: https://www.javascriptbank.com/dot-menu.html
<STYLE type=text/css>.dot {FONT-SIZE: 1px; Z-INDEX: 100; VISIBILITY: hidden; WIDTH: 6px; CURSOR: hand; POSITION: absolute; HEIGHT: 6px; BACKGROUND-COLOR: red}.dotoff {FONT-SIZE: 1px; Z-INDEX: 100; VISIBILITY: hidden; WIDTH: 6px; CURSOR: default; POSITION: absolute; HEIGHT: 6px; BACKGROUND-COLOR: gray}.dotempty {FONT-SIZE: 1px; VISIBILITY: hidden; WIDTH: 6px; CURSOR: hand; POSITION: absolute; HEIGHT: 6px; BACKGROUND-COLOR: orange; zindex: 100}.caption {FONT-SIZE: 11px; Z-INDEX: 1; VISIBILITY: hidden; CURSOR: default; COLOR: black; FONT-FAMILY: Tahoma; POSITION: absolute; TEXT-ALIGN: center}BODY {MARGIN: 0px; BACKGROUND-COLOR: white}A {COLOR: silver; TEXT-DECORATION: none}P {FONT-SIZE: 10px; COLOR: black; FONT-FAMILY: tahoma}</STYLE><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><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.appVersionthis.agent=navigator.userAgentthis.dom=document.getElementById?1:0this.opera5=this.agent.indexOf("Opera 5")>-1this.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.ie6this.mac=this.agent.indexOf("Mac")>-1this.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><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><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 pageif(document.all) pageWidth = document.body.offsetWidth-20;else pageWidth = innerWidth;if(document.all) pageHeight = document.body.offsetHeight-4;else pageHeight = innerHeight;//Create main menuvar menu = new menuObject("menu",pageWidth/2,pageHeight/2,"DhtmlCentral Site Map",pageHeight/2);menu.startAngle = -90;//show menu and captionmenu.show();menu.showCaption();//Add submenusmenu.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><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->