Aiuto con Menu Javascript

**spider81man** · 27-07-2004, 12:09

Salve ragazzi,
Ho preso questo menù da HTML.it

Menu.htm:

<HTML>
<HEAD>
<TITLE>Prova Menu</TITLE>
</HEAD>
<BODY bgColor=Black>
<center>
<SCRIPT src="MENU_file/slidingMenu.js" type=text/javascript></SCRIPT>

<SCRIPT type=text/javascript>

function lanciaFrame(URL){
window.top.content.location= URL
}

function pop(URL){
window.open(URL,"name","width=350px, height=200px, left=300px, top=100px")}

Home = new Menu("H o m e","home.htm",true)
Mestro = new Menu("Il Maestro","home.htm",true)
art1 = new Menu("Altri Insegnanti","home.htm",true,"no")
Palestre = new Menu("Le Palestre","home.html",true)
art2 = new Menu("Cancun","home.html",true,"no")
Articoli = new Menu("Eventi","home.html",true,"no")
/*
art1 = new Menu("standard popup","home.html",true,"no")
v1 = new Menu("v . 1","home.html",true)
v2 = new Menu("v . 2","home.html",true)
art2 = new Menu("sniffing","home.html",true)
art3 = new Menu("styleSheets","home.html",true)
*/
Atleti = new Menu("Atleti","home.html",true)
art3 = new Menu("Light","home.html",true)
art4 = new Menu("KO","home.html",true)
art5 = new Menu("Professionisti","home.html",true)
art6 = new Menu("Tutti","home.html",true)

sport = new Menu("Storia Sports","home.html",true)
art7 = new Menu("Kick Boxing","home.html",true)
art8 = new Menu("Thai Boxe","home.html",true)
art9 = new Menu("Savate","home.htmll",true)

Foto = new Menu("Foto Gallery","home.html",true)

Video = new Menu("Video","home.html",true)

Link = new Menu("Links & Credits","home.html",true)

Forum = new Menu("Forum","home.html",true)

/*================================================= ========
- definizione della gerarchia del menu -
================================================== =======*/

Home.subMenu[0] = Mestro
Mestro.subMenu[0] = art1
Home.subMenu[1] = Palestre
Palestre.subMenu[0] = art2
Home.subMenu[2] = Articoli
/*
Articoli.subMenu[0] = art1
art1.subMenu[0] = v1
art1.subMenu[1] = v2
Articoli.subMenu[1] = art2
Articoli.subMenu[2] = art3
*/
Home.subMenu[3] = Atleti
Atleti.subMenu[0] = art3
Atleti.subMenu[1] = art4
Atleti.subMenu[2] = art5
Atleti.subMenu[3] = art6

Home.subMenu[4] = sport
sport.subMenu[0] = art7
sport.subMenu[1] = art8
sport.subMenu[2] = art9

Home.subMenu[5] = Foto

Home.subMenu[6] = Video

Home.subMenu[7] = Link

Home.subMenu[8] = Forum

/*================================================= ========
- definizione degli stili -
================================================== =======*/

// poichè alcuni stili devono essere obbligatoriamente definiti uguali
// in tutti e tre i principali vettori di stili, possiamo utilizzare la seguente sintassi
// (valori in pixel)

alt = 18
lar = 100
fSize = 10
crs = (document.all) ? "hand" : "pointer";

stiliBoxDefault = ["position=absolute","left=0px","top=5px"];

stiliCenDefault = ["position=absolute","width="+lar+"px","height="+al t+"px","fontSize="+fSize+"px",
"backgroundColor=black","color=Yellow",
"borderBottomStyle=solid","borderBottomWidth=1px", "borderBottomColor=Yellow"
,"textAlign=center","fontFamily=Arial","cursor=def ault",
"borderTopStyle=solid","borderTopWidth=1px","borde rTopColor=Yellow"]

stiliSupDefault = ["position=absolute","width="+lar+"px","height="+al t+"px","fontSize="+fSize+"px","fontFamily=Arial" ,
"backgroundColor=Yellow","color=Black",
"textAlign=center","cursor="+crs,
"borderTopStyle=solid","borderTopWidth=2px","borde rTopColor=Yellow"]

stiliSubDefault = ["position=absolute","width="+lar+"px","height="+al t+"px","fontSize="+fSize+"px","fontFamily=Arial" ,
"backgroundColor=Yellow",
"color=Black","textAlign=center","cursor="+crs ,
"borderBottomStyle=solid","borderBottomWidth=2px", "borderBottomColor=Yellow"]

stiliRollIn =["color=white","backgroundColor=red"]
stiliRollOut=["color=Black","backgroundColor=Yellow"]

window.onload = function() {

MioMenu = new ContainerMenu(Home,null,null,300,"lanciaFrame",
stiliBoxDefault,stiliSupDefault,stiliCenDefault,st iliSubDefault,
stiliRollIn,stiliRollOut)

MioMenu.open()
}

</SCRIPT>
</center>
</BODY></HTML>

continua....

**spider81man** · 27-07-2004, 12:10

slidingMenu:

/*================================================= ========
DHTML Sliding Menu - [Menu Scorrevole DHTML]

by William Verdolini - jesi (italy) - 9/2002
mail: w.verdolini@html.it

================================================== =======*/

function Menu(title,URL,back,MyFunctionName) {
this.title = title
this.URL = URL
this.back = back
this.subMenu = []
this.MFN = MyFunctionName || null
}

function Level(stylesArray,hook,parent,container) {
this.container = container || null
this.el = document.createElement("DIV")
this.css = this.el.style
if(stylesArray) this.applyStylesArray(stylesArray)
this.appendToLevel(hook)
this.refMenu = null
this.parent = parent || null
this.el.parent = this
}

function applyStylesArray(stylesArray) {
var stile
var stileValue
for(a in stylesArray) {
stile = stylesArray[a].split("=")
stileValue = stile[1]
if(stile.length > 2)
for(i=2; i<stile.length; i++)
stileValue += "="+stile[i]
this.css[stile[0]] = stileValue
}
}

function appendToLevel(father) {
if(!father) father = document.getElementsByTagName("BODY").item(0)
else if(father.constructor && father.constructor == Level) father = father.el
father.appendChild(this.el)
}

function writeInLevel(text) {
if(this.txt)
this.txt.el.firstChild.nodeValue = text
else {
var tT = parseInt(this.css.height) - parseInt(this.css.fontSize)
if(this.container.ie)
tT =tT-(parseInt(this.css.borderTopWidth)||parseInt(this. css.borderWidth)||0)-(parseInt(this.css.borderBottomWidth)||parseInt(th is.css.borderWidth)||0)

tT = tT/2
if(this.container.ie) tT = Math.ceil(tT)
this.txt = new Level(["position=absolute","left=0px","top="+tT+"px","wid th=100%","lineHeight=100%"],this.el)
this.txt.el.appendChild(document.createTextNode(te xt))
}
}

function setListener(other,RollInStyles,RollOutStyles,click edStyles){
this.el.onclick = function(e) {
if(!this.parent.container.going) {
this.parent.container.going = true
if(this.parent.parent && this.parent.parent.constructor==subLevel) {
subW = parseFloat(this.parent.container.sub.css.top)
this.parent.container.vagiu = false
}
if(clickedStyles) {
this.parent.applyStylesArray(clickedStyles)
if(other) {
other.applyStylesArray(clickedStyles)
other.el.onmouseover = null
other.el.onmouseout = null
}
this.onmouseover = null
this.onmouseout = null
}
this.parent.container.goDownItems(e)
}
}
this.el.onmouseover = function() {
this.parent.applyStylesArray(RollInStyles)
if(other) other.applyStylesArray(RollInStyles)
}
this.el.onmouseout = function() {
this.parent.applyStylesArray(RollOutStyles)
if(other) other.applyStylesArray(RollOutStyles)
}

}

function addBordersNS(){
var tmpBordi = (parseInt(this.css.borderLeftWidth)||parseInt(this .css.borderWidth)||0)+(parseInt(this.css.borderRig htWidth)||parseInt(this.css.borderWidth)||0)
return(tmpBordi)
}

Level.prototype.addBordersNS = addBordersNS
Level.prototype.setListener = setListener
Level.prototype.applyStylesArray = applyStylesArray
Level.prototype.appendToLevel = appendToLevel
Level.prototype.writeInLevel = writeInLevel

function subLevel(stylesArray,hook,widthLevel,container) {
this.fix = new Level(stylesArray,hook,this,container)
this.dyn = new Level(stylesArray,hook,this,container)
this.dyn.css.width = "0px"
if(this.findStyle("borderRightWidth",stylesArray)| |this.findStyle("borderWidth",stylesArray)) {
if(container.ie) this.fix.css.width = (parseInt(this.fix.css.width)-(parseInt(this.findStyle("borderRightWidth",styles Array))||parseInt(this.findStyle("borderWidth",sty lesArray))))+"px"
this.fix.css.borderRightWidth = "0px"
}
var offL = (!container.ie && (this.findStyle("borderLeftWidth",stylesArray)||th is.findStyle("borderWidth",stylesArray))) ? (parseInt(this.findStyle("borderLeftWidth",stylesA rray))||parseInt(this.findStyle("borderWidth",styl esArray))) : 0
this.dyn.css.borderLeftWidth = "0px"
this.dyn.css.left = parseInt(this.fix.css.width)+offL+"px"
this.fix.parent = this
this.dyn.parent = this
this.refMenu = null
this.parent = hook || null
}

subLevel.prototype.findStyle = findStyle

function ContainerMenu(startingMenu,Hstep,Vstep,delay,launc hingFunctionName,
boxStylesArray,supStylesArray,cenStylesArray,subSt ylesArray,
inSupStylesArray,outSupStylesArray,inSubStylesArra y,outSubStylesArray,
clickedSupStylesArray,clickedSubStylesArray) {
this.ie = (navigator.appName.indexOf("Microsoft")>-1) ? 1 : 0

this.sM = startingMenu
this.nM = startingMenu
this.Hstep = Hstep || 10
this.Vstep = Vstep || 1
this.delay = (delay!=null)? delay : 500
this.LFN = launchingFunctionName || "no"
this.boxS = boxStylesArray
this.supS = supStylesArray
this.cenS = cenStylesArray
this.subS = subStylesArray
this.inSup = inSupStylesArray
this.outSup = outSupStylesArray
this.inSub = inSubStylesArray || this.inSup
this.outSub = outSubStylesArray || this.outSup
this.ckSup = clickedSupStylesArray || null
this.ckSub = clickedSubStylesArray || null

this.w = parseInt(this.findStyle("width",this.supS)) || 100
this.h = parseInt(this.findStyle("height",this.subS)) || 15
this.prg = this.h
if(!this.ie) {
this.wsupReal = this.NSBoxMeasures("width",this.supS)
this.wcenReal = this.NSBoxMeasures("width",this.cenS)
this.wsubReal = this.NSBoxMeasures("width",this.subS)
this.supS[this.supS.length] = "width="+this.wsupReal+"px"
this.cenS[this.cenS.length] = "width="+this.wcenReal+"px"
this.subS[this.subS.length] = "width="+this.wsubReal+"px"
this.hsupReal = this.NSBoxMeasures("height",this.supS)
this.hcenReal = this.NSBoxMeasures("height",this.cenS)
this.hsubReal = this.NSBoxMeasures("height",this.subS)
this.supS[this.supS.length] = "height="+this.hsupReal+"px"
this.cenS[this.cenS.length] = "height="+this.hcenReal+"px"
this.subS[this.subS.length] = "height="+this.hsubReal+"px"
}

this.box = new Level(this.boxS,null,this,this)
this.sup = new Level(null,this.box,this.box,this)
this.supItems = []
this.central = new Level(this.cenS,this.box,this.box,this)

var tmpArray = ["position=absolute","width="+(!this.ie?this.wcenRe al:this.w)+"px","height="+(!this.ie?this.hcenReal: this.h)+"px","top=0px","left=0px","fontSize="+(par seInt(this.findStyle("fontSize",this.cenS)))+"px", "borderTopWidth="+(parseInt(this.findStyle("border TopWidth",this.cenS))||parseInt(this.findStyle("bo rderWidth",this.cenS))||0)+"px","borderBottomWidth ="+(parseInt(this.findStyle("borderBottomWidth",th is.cenS))||parseInt(this.findStyle("borderWidth",t his.cenS))||0)+"px"]
this.central_sup = new Level(tmpArray,this.central,this.central,this)
this.central_cen = new Level(tmpArray,this.central,this.central,this)
this.central_cen.writeInLevel(this.sM.title)
this.central_sub = new Level(tmpArray,this.central,this.central,this)
this.sub = new Level(["position=absolute","top="+(this.h)+"px","left=0px "],this.box,this,this)
this.sub.clipTop = -this.h
this.subItems = []
this.sub.refMenu = this.sM

this.central.css.clip = "rect(0px 1000px "+this.h+"px 0px)"
this.central.css.top = this.h+"px"
this.central.css.zIndex="2"
this.central_sup.css.top = "-"+this.h+"px"
this.central_cen.css.top = "0px"
this.central_sub.css.top = this.h+"px"
this.vagiu = false
this.toOpen = true
}

function findStyle(styleType,stylesArray) {
var stile,rt
for(a in stylesArray) {
stile = stylesArray[a].split("=")
if(stile[0].toLowerCase() == styleType.toLowerCase())
rt = stile[1]
}
return rt||null
}

function HSliding(closed) {
var tmpWidth
var FinWidth
ref = this
cl = closed || null

tmpWidth = parseInt(this.central.css.width)+(!this.ie?this.ce ntral.addBordersNS():0)
FinWidth = this.toOpen ? (this.fixedWidth) ? this.fixedWidth : ((this.nM.subMenu.length || 1)*this.w) : this.w
var prgStep = this.toOpen ? this.Hstep : -this.Hstep
if(this.toOpen && tmpWidth < FinWidth || !this.toOpen && tmpWidth > FinWidth) {
if(!this.toOpen && this.sup.el.firstChild && (parseInt(this.sup.el.firstChild.style.left)+this. w) >= tmpWidth)
this.sup.el.firstChild.style.left = (tmpWidth-this.w+prgStep)+"px"
this.central.css.width = (parseInt(this.central.css.width)+prgStep)+"px"
if(this.subSliding) {
for(i=0; i<this.subItems.length; i++){
var bW = this.subItems[i].dyn.css.borderRightWidth ?
(!this.ie) ? 0 : parseInt(this.subItems[i].dyn.css.borderRightWidth) : 0;
this.subItems[i].dyn.css.width = Math.abs((tmpWidth-this.w+bW+prgStep))+"px"
}
}
setTimeout("ref.HSliding(cl)",this.minCPUres)
}
else {
this.central.css.width = FinWidth-(!this.ie?this.central.addBordersNS():0)+"px"
if(this.subSliding) {
for(i=0; i<this.subItems.length; i++) {
var bW = this.subItems[i].dyn.css.borderRightWidth ?
(!this.ie) ? 0 : parseInt(this.subItems[i].dyn.css.borderRightWidth) : 0
this.subItems[i].dyn.css.width = FinWidth-this.w+bW+"px"
}
}
if(this.sup.el.firstChild) this.sup.el.firstChild.style.left = "0px"
if(this.toOpen)
this.openSubMenu(this.supS)
else {
if(this.sup.el.firstChild) {
this.setSlidingLevel(false)
setTimeout("ref.upDown()",this.delay)
}
else {
if(!cl)
setTimeout("ref.goUpsubItems()",this.delay)
}
}
this.toOpen = this.toOpen ? false : true
}
}

function openSubMenu(supStylesArray) {
this.going = true
this.addItems(supStylesArray)
this.slideItems(true)
}

function addItems(stylesArray) {
this.supItems.length = this.nM.subMenu.length
for(i=0; i<this.nM.subMenu.length; i++) {
this.supItems[i] = new Level(this.supS,this.sup,this.sup,this)
this.supItems[i].writeInLevel(this.nM.subMenu[i].title)
this.supItems[i].refMenu = this.nM.subMenu[i]
this.supItems[i].css.left = (i*this.w)+"px"
this.supItems[i].setListener(null,this.inSup,this.outSup,this.ckSu p)
}
}

function goUpsubItems(){
ref = this
if(subW >= this.subItems[this.sub.subIndex].subTop+this.h) {
if((subW-this.Vstep) <= this.subItems[this.subItems.length-1].subTop) {
this.sub.el.removeChild(this.subItems[this.subItems.length-1].fix.el)
this.sub.el.removeChild(this.subItems[this.subItems.length-1].dyn.el)
this.subItems.length--
}
subW -= this.Vstep
this.sub.css.top = subW+"px"
setTimeout("ref.goUpsubItems()",this.minCPUres)
}
else {
this.sub.css.top = (this.subItems[this.sub.subIndex].subTop+this.h)+"px"
this.setSlidingLevel(true)
ref.upDown()
}
}

function goDownItems(e){
if(!e) e = window.event
source = e.srcElement ? e.srcElement : e.target
while(source.tagName != "DIV" || source.firstChild && source.firstChild.nodeType==3)
source = source.parentNode
for(i=0, j=0; i<this.supItems.length; i++,j++) {
if(this.supItems[i] == source.parent) j--
else this.supItems[j] = this.supItems[i]
}
this.supItems.length = j
for(i=0; i<this.subItems.length; i++) {
if(this.subItems[i] == source.parent.parent) {
this.sub.subIndex = i;
}
}
this.prg = 0
this.slideItems(false)
}

function slideItems(up,closed){
ref = this
rec = up
cl = closed || null
this.prg += (up)? -this.Vstep : this.Vstep
if(rec && this.prg>=0 || !rec && this.prg<=this.h) {
for(j=0; j<this.supItems.length; j++)
this.supItems[j].css.top = this.prg+"px"
setTimeout("ref.slideItems(rec,cl)",this.minCPUres )
}
else {
if(!up){
for(j=0; j<this.supItems.length; j++)
this.sup.el.removeChild(this.supItems[j].el)
setTimeout("ref.HSliding("+(cl?'true':'')+")",this .delay)
}
else
this.going = false
}
}

function setSlidingLevel(goUp){
var subIndex = this.subItems.length
if(!goUp && this.nM.back)
this.setSubItemsLevel(subIndex,this.nM)
slidingLevels = []
vl = []
var actInd
var downingLevel = (this.sup.el.firstChild && this.sup.el.firstChild.parent.txt) ? this.sup.el.firstChild.parent.txt : null
slidingLevels.length = 0
actInd = slidingLevels.length
slidingLevels[slidingLevels.length] = this.central_sup
if(!goUp) slidingLevels[actInd].writeInLevel(downingLevel.el.firstChild.nodeValue )
slidingLevels[slidingLevels.length] = this.central_cen
actInd = slidingLevels.length
slidingLevels[slidingLevels.length] = this.central_sub
if(goUp) slidingLevels[actInd].writeInLevel(this.subItems[this.sub.subIndex].fix.refMenu.title)
if (!goUp) slidingLevels[slidingLevels.length] = this.sup.el.firstChild.parent
if (!goUp && this.nM.back || goUp) slidingLevels[slidingLevels.length] = this.sub
for(j=0; j<slidingLevels.length; j++)
vl[j] = parseInt(slidingLevels[j].css.top)

this.vagiu = (!goUp) ? true : false
this.prg = 0
}
continua.. :P

**spider81man** · 27-07-2004, 12:11

function upDown() {
ref = this
this.prg += this.Vstep;
if(this.prg<this.h) {
for(j=0; j<slidingLevels.length; j++) {
slidingLevels[j].css.top = (this.vagiu) ? (vl[j]+this.prg)+"px" : (vl[j]-this.prg)+"px"
}
setTimeout("ref.upDown()",this.minCPUres)
}
else {
for(j=0; j<slidingLevels.length; j++)
slidingLevels[j].css.top = (this.vagiu) ? (vl[j]+this.h)+"px" : (vl[j]-this.h)+"px"

this.sub.clipTop += (this.vagiu) ? -this.h : +this.h
if(this.vagiu){
this.central_sub.css.top = (parseInt(this.central_sub.css.top) - (this.h*3))+"px"
var tmp1 = this.central_sup
var tmp2 = this.central_cen
this.central_sup = this.central_sub
this.central_cen = tmp1
this.central_sub = tmp2
}
else{
this.central_sup.css.top = (parseInt(this.central_sup.css.top) + (this.h*3))+"px"
var tmp1 = this.central_sub
var tmp2 = this.central_cen
this.central_sub = this.central_sup
this.central_cen = tmp1
this.central_sup = tmp2
}
this.nM = (this.vagiu) ? this.sup.el.firstChild.parent.refMenu : this.subItems[this.sub.subIndex].fix.refMenu
if(this.sup.el.hasChildNodes()) this.sup.el.removeChild(this.sup.el.firstChild)
if(!this.vagiu) {
this.sub.el.removeChild(this.subItems[this.sub.subIndex].fix.el)
this.sub.el.removeChild(this.subItems[this.sub.subIndex].dyn.el)
this.subItems.length = this.sub.subIndex
}
if(this.nM.MFN) {if(this.nM.MFN!="no") window[this.nM.MFN](this.nM.URL)}
else if(this.LFN) {if(this.LFN!="no") window[this.LFN](this.nM.URL)}
this.HSliding()
}
}

function setSubItemsLevel(index,refMenu) {
this.subItems[index] = new subLevel(this.subS,this.sub,this.w,this)
this.subItems[index].fix.css.top = (-this.h*index)+"px"
this.subItems[index].dyn.css.top = (-this.h*index)+"px"
this.subItems[index].subTop = parseInt(this.sub.css.top)
this.subItems[index].fix.writeInLevel(refMenu.title)
if(this.ie) this.subItems[i].dyn.writeInLevel("")
this.subItems[index].fix.refMenu = refMenu
this.subItems[index].dyn.refMenu = refMenu
this.subItems[index].fix.setListener(this.subItems[index].dyn,this.inSub,this.outSub,this.ckSub)
this.subItems[index].dyn.setListener(this.subItems[index].fix,this.inSub,this.outSub,this.ckSub)
}

function initialSubItemsLevel(vettore){
for(i=0; i<vettore.length; i++) {
this.setSubItemsLevel(i,vettore[i])
this.sub.css.top = ((i+2)*this.h)+"px"
}
}

function NSBoxMeasures(IEdim,stylesArray){
var wh = (IEdim=="width") ? [this.w,"Left","Right"] : [this.h,"Top","Bottom"]
var tmpMeasure = wh[0]-(parseInt(this.findStyle("border"+wh[1]+"Width",stylesArray))||parseInt(this.findStyle("b orderWidth",stylesArray))||0)-(parseInt(this.findStyle("border"+wh[2]+"Width",stylesArray))||parseInt(this.findStyle("b orderWidth",stylesArray))||0)
return(tmpMeasure)
}

function closeMenu() {
this.slideItems(false,true)
}

ContainerMenu.prototype.subSliding = true
ContainerMenu.prototype.fixedWidth = null
ContainerMenu.prototype.minCPUres = 10
ContainerMenu.prototype.open = HSliding
ContainerMenu.prototype.close = closeMenu
ContainerMenu.prototype.setSubItemsLevel = setSubItemsLevel
ContainerMenu.prototype.goUpsubItems = goUpsubItems
ContainerMenu.prototype.NSBoxMeasures = NSBoxMeasures
ContainerMenu.prototype.initialSubItemsLevel = initialSubItemsLevel
ContainerMenu.prototype.findStyle = findStyle
ContainerMenu.prototype.HSliding = HSliding
ContainerMenu.prototype.addItems = addItems
ContainerMenu.prototype.slideItems = slideItems
ContainerMenu.prototype.goDownItems = goDownItems
ContainerMenu.prototype.setSlidingLevel = setSlidingLevel
ContainerMenu.prototype.openSubMenu = openSubMenu
ContainerMenu.prototype.upDown = upDown

Il menù mi funziona perfettamente è lo potete vedere su http://Cisco1981.altervista.org/
L'unica cosa che vorrei modificare e fare in modo tale che quando premo sulla voce FORUM mi apra una nuova pagina di IE.
Come posso fare???
Grazie 1000
spider81man

PS:Scusate se ho usato 3 post.

**standard** · 27-07-2004, 19:44

guarda il codice di questo esempio:
http://pro.html.it/esempio/javascrip...ages/home.html
(in particolare l'item "Contattami")
ciauz

Discussione: Aiuto con Menu Javascript

Strumenti discussione

Ricerca discussione

Visualizza

Aiuto con Menu Javascript

Permessi di invio