Javascript Menü in Mozilla von Gamperl Markus, 15.09.2004 09:58

Javascript Menü in Mozilla

Gamperl Markus 15.09.2004 09:58

browser

Hallo Markus,

bin passionierter Mozilleran, daher würde mich der ganze Code interessieren. Bitte gib doch mal einen Link an oder poste den ganzen Code. Danke!

Gruß aus Berlin!
eddi

Hallo Eddi!

Danke für deine Hilfe! - Mozilla wills einfach nicht... :-(

Hier das gesamte File (menu.html):

<SCRIPT language="javascript">
var stayFolded=false
/************************************************************************************
Browsercheck
************************************************************************************/
var n = (document.layers) ? 1:0;
var ie = (document.all) ? 1:0;

var browser=((n || ie) && parseInt(navigator.appVersion)>=4)

/************************************************************************************
Making cross-browser objects
************************************************************************************/
function makeMenu(obj,nest){

nest=(!nest) ? '':'document.'+nest+'.'
this.css=(n) ? eval(nest+'document.'+obj):eval('document.all.'+obj+'.style')

this.ref=(n) ? eval(nest+'document.'+obj+'.document'):eval('document');

this.height=(n) ? this.ref.height:eval(obj+'.offsetHeight')

this.x=(n)? this.css.left:this.css.pixelLeft;this.y=(n)? this.css.top:this.css.pixelTop;
this.hideIt=b_hideIt; this.showIt=b_showIt; this.vis=b_vis; this.moveIt=b_moveIt
return this
}
function b_showIt(){this.css.visibility="visible"}
function b_hideIt(){this.css.visibility="hidden"}
function b_vis(){if(this.css.visibility=="hidden" || this.css.visibility=="hide") return true;}
function b_moveIt(x,y){this.x=x; this.y=y; this.css.left=this.x; this.css.top=this.y}
/************************************************************************************
Initiating the page. Just add to the arrays here to get more menuitems
and add divs in the page
************************************************************************************/
function init(){
oTop=new Array()
oTop[0]=new makeMenu('divTop1','divCont')
oTop[1]=new makeMenu('divTop2','divCont')
oTop[2]=new makeMenu('divTop3','divCont')
oTop[3]=new makeMenu('divTop4','divCont')
oTop[4]=new makeMenu('divTop5','divCont')
oTop[5]=new makeMenu('divTop6','divCont')
oSub=new Array()
oSub[0]=new makeMenu('divSub1','divCont.document.divTop1')
oSub[1]=new makeMenu('divSub2','divCont.document.divTop2')
oSub[2]=new makeMenu('divSub3','divCont.document.divTop3')
oSub[3]=new makeMenu('divSub4','divCont.document.divTop4')
oSub[4]=new makeMenu('divSub5','divCont.document.divTop5')
oSub[5]=new makeMenu('divSub6','divCont.document.divTop6')
for(i=0;i<oSub.length;i++){ oSub[i].hideIt() }
for(i=1;i<oTop.length;i++){ oTop[i].moveIt(0,oTop[i-1].y+oTop[i-1].height) }
}
/************************************************************************************
This is the function that changes the sub menus to folded or unfolded state.
************************************************************************************/
function menu(num){

if(!stayFolded){
   for(i=0;i<oSub.length;i++){
    if(i!=num) oSub[i].hideIt()
   }
   for(i=1;i<oTop.length;i++){
    oTop[i].moveIt(0,oTop[i-1].y+oTop[i-1].height)
   }
}
oSub[num].vis()?oSub[num].showIt():oSub[num].hideIt()
for(i=1;i<oTop.length;i++){
   if(!oSub[i-1].vis()) oTop[i].moveIt(0,oTop[i-1].y+oTop[i-1].height+oSub[i-1].height)
   else oTop[i].moveIt(0,oTop[i-1].y+oTop[i-1].height)
}

}

</SCRIPT>

<STYLE>DIV.clTop {
POSITION: absolute; WIDTH: 120px
}
DIV.clSub {
LEFT: 10px; POSITION: absolute; WIDTH: 120px
}
#divCont {
HEIGHT: 300px; LEFT: 30px; POSITION: relative; TOP: 0px; WIDTH: 170px
}
A.clMain {
COLOR: black; FONT-FAMILY: Arial, Verdana, Helvetica, Helv; FONT-SIZE: 14px; FONT-WEIGHT: bold; TEXT-DECORATION: none
}
A.clSubb {
COLOR: black; FONT-FAMILY: Arial, Verdana, Helvetica, Helv; FONT-SIZE: 14px; TEXT-DECORATION: none
}
#divMain {
POSITION: absolute
}
</STYLE>

</head>
<body onload="init();">

<div id="divCont">
<div class="clTop" id="divTop1">
<a class="clMain" href="http://simplythebest.net#" onclick="menu(0); return false">[choice0]</a><br>
<div class="clSub" id="divSub1">
<a class="clSubb" href="http://simplythebest.net/scripts/#">-Sub 1</a><br>
<a class="clSubb" href="http://simplythebest.net/scripts/#">-Sub 2</a><br>
<a class="clSubb" href="http://simplythebest.net/scripts/#">-Sub 3</a><br>
<a class="clSubb" href="http://simplythebest.net/scripts/#">-Sub 4</a><br>
</div>
</div>
<div class="clTop" id="divTop2">
<a class="clMain" href="http://simplythebest.net/scripts/#" onclick="menu(1); return false">[choice1]</a><br>
<div class="clSub" id="divSub2">
<a class="clSubb" href="http://simplythebest.net/scripts/#">-Sub 1</a><br>
<a class="clSubb" href="http://simplythebest.net/scripts/#">-Sub 2</a><br>
</div>
</div>
<div class="clTop" id="divTop3">
<a class="clMain" href="http://simplythebest.net/scripts/#" onclick="menu(2); return false">[choice2]</a><br>
<div class="clSub" id="divSub3">
<a class="clSubb" href="http://simplythebest.net/scripts/#">-Sub 1</a><br>
<a class="clSubb" href="http://simplythebest.net/scripts/#">-Sub 2</a><br>
<a class="clSubb" href="http://simplythebest.net/scripts/#">-Sub 3</a><br>
</div>
</div>
<div class="clTop" id="divTop4">
<a class="clMain" href="http://simplythebest.net" onclick="menu(3); return false">[choice3]</a><br>
<div class="clSub" id="divSub4">
<a class="clSubb" href="http://simplythebest.net/scripts/#">-Sub 1</a><br>
<a class="clSubb" href="http://simplythebest.net/scripts/#">-Sub 2</a><br>
</div>
</div>
<div class="clTop" id="divTop5">
<a class="clMain" href="http://simplythebest.net" onclick="menu(4); return false">[choice4]</a><br>
<div class="clSub" id="divSub5">
<a class="clSubb" href="http://simplythebest.net/scripts/#">-Sub 1</a><br>
<a class="clSubb" href="http://simplythebest.net/scripts/#">-Sub 2</a><br>
<a class="clSubb" href="http://simplythebest.net/scripts/#">-Sub 3</a><br>
<a class="clSubb" href="http://simplythebest.net/scripts/#">-Sub 4</a><br>
<a class="clSubb" href="http://simplythebest.net/scripts/#">-Sub 5</a><br>
</div>
</div>
<div class="clTop" id="divTop6">
<a class="clMain" href="http://simplythebest.net" onclick="menu(5); return false">[choice5]</a><br>
<div class="clSub" id="divSub6">
<a class="clSubb" href="http://simplythebest.net/scripts/#">-Sub 1</a><br>
<a class="clSubb" href="http://simplythebest.net/scripts/#">-Sub 2</a>
</div>
</div>
</div>

</body>
</html>

Beitrag melden

– Informationen zu den Bewertungsregeln

SELFHTML Forum - Ergänzung zur Dokumentation Übersicht

Gamperl Markus: Javascript Menü in Mozilla

Beitrag lesen

Javascript Menü in Mozilla

Javascript Menü in Mozilla