Avatar billede ptvedt Nybegynder
27. september 2001 - 20:43 Der er 8 kommentarer og
3 løsninger

Foldout meny

Jeg trenger hjelp.  http://home.no.net/ptvedt/lg kan noe lage en foldout meny til meg. sånn microsoft lignende.  De knapper i menyen som ikke har > foran ska foldes ut.  TAKK
Avatar billede keysersoze Guru
27. september 2001 - 20:50 #1
prøv at lede på www.dhtmlcentral.com - der kan du måske finde noget...
Avatar billede Jman Praktikant
27. september 2001 - 20:53 #2
Avatar billede ptvedt Nybegynder
27. september 2001 - 20:57 #3
problemet er at jeg ikke er noe særlig på dhtml.. så hvis noen kunne lagd dette til meg???
Avatar billede keysersoze Guru
27. september 2001 - 21:05 #4
på den side jeg gav er der både eksempler OG den tilhørende kode samt forklaring...
Avatar billede ptvedt Nybegynder
27. september 2001 - 21:13 #5
eg fant en ny der no.. skal se hva jeg får til.. men accepterer ikke enda. må få litt hjelp. gir trossalt 250 point ;)
Avatar billede fomse Nybegynder
27. september 2001 - 22:47 #6
Hvad siger du til den her:

<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.0 Transitional//EN\">
<html>
<head>
<title></title>

<style type=\"text/css\">

DIV.clTop{position:absolute; width:170}
DIV.clSub{position:absolute; left:10; width:170}
#divCont{position:relative; visibility:hidden; left:10; top:0; height:400; width:170;}
A.clMain{font-family:Arial, Verdana, Helvetica, Helv; font-size:14px; text-decoration:none; font-weight:bold; color:white}
A.clMain:hover { color:white;  text-decoration: none; }
A.clSubb{font-family:Arial, Verdana, Helvetica, Helv; font-size:14px; text-decoration:none; color:white}
A.clSubb:hover { color:white;  font-size: small; text-decoration: none;}
#divMain{position:absolute}

</style>

<script type=\"text/javascript\" language=\"JavaScript\">
/********************************************************************************
Copyright (C) 1999 Thomas Brattli
This script is made by and copyrighted to Thomas Brattli at www.bratta.com
Visit for more great scripts. This may be used freely as long as this msg is intact!
I will also appriciate any links you could give me.
********************************************************************************/
//Default browsercheck, added to all scripts!
function checkBrowser(){
    this.ver=navigator.appVersion
    this.dom=document.getElementById?1:0
    this.ie5=(this.ver.indexOf(\"MSIE 5\")>-1 && this.dom)?1:0;
    this.ie4=(document.all && !this.dom)?1:0;
    this.ns5=(this.dom && parseInt(this.ver) >= 5) ?1:0;
    this.ns4=(document.layers && !this.dom)?1:0;
    //added
    this.ie4mac=this.ie4 && navigator.userAgent.indexOf(\"Mac\")>-1
    this.ie5mac=this.ie5 && navigator.userAgent.indexOf(\"Mac\")>-1
    this.ie55=(this.ver.indexOf(\"MSIE 5.5\")>-1 && this.dom)?1:0;
    this.bw=(this.ie5 || this.ie4 || this.ns4 || this.ns5 || this.ie5mac)
    return this
}
bw=new checkBrowser()


var stayFolded=false

//Do you want images (if not set to 0 and remove the images from the body)?
foldImg=1

//This is the image that it changes to when it expands.
var exImg=new Image(); exImg.src=\'arrow1.gif\'
//This is the image is changes to with it\'s \"unfolded\" or something :}
//Remeber to change the actual images in the page aswell, but remember to
//keep the name of the image.
var unImg=new Image(); unImg.src=\'arrow.gif\'

/************************************************************************************
Making cross-browser objects
************************************************************************************/
function makeMenu(obj,nest){
    nest=(!nest) ? \'\':\'document.\'+nest+\'.\'                                       
      this.css=bw.dom? document.getElementById(obj).style:bw.ie4?document.all[obj].style:bw.ns4?eval(nest+\"document.layers.\" +obj):0;       
    this.el=bw.dom?document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?eval(nest+\'document.\'+obj):0;   
    this.ref=bw.dom || bw.ie4? document:bw.ns4?eval(nest+\"document.layers.\" +obj+\".document\"):0;       
    this.x=(bw.ns4 || bw.ns5)? this.css.left:this.css.pixelLeft;
    this.y=(bw.ns4 || bw.ns5)? this.css.top:this.css.pixelTop;       
    this.height=bw.ns4?this.ref.height:this.el.offsetHeight;       
    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) }
      oCont=new makeMenu(\'divCont\')
      oCont.showIt()
}
/************************************************************************************
This is the function that changes the sub menus to folded or unfolded state.
************************************************************************************/
function menu(num){
    if(bw.bw){
        if(!stayFolded){
            for(i=0;i<oSub.length;i++){
                if(i!=num){
                    oSub[i].hideIt()
                    if(foldImg)oTop[i].ref[\"imgA\"+i].src=unImg.src
                }
            }
            for(i=1;i<oTop.length;i++){
                oTop[i].moveIt(0,oTop[i-1].y+oTop[i-1].height)
            }
        }
        if(oSub[num].vis()){
            oSub[num].showIt()
            if(foldImg)oTop[num].ref[\"imgA\"+num].src=exImg.src
        }else{
            oSub[num].hideIt()
            if(foldImg)oTop[num].ref[\"imgA\"+num].src=unImg.src
        }
        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)
        }
    }
}
//Initiating the menus onload, if it\'s a 4.x+ browser.
if(bw.bw) onload=init;

function menu2(num){  // til brug for links der ikke åbner noget
    if(bw.bw){
        if(!stayFolded){
            for(i=0;i<oSub.length;i++){
                if(i!=num){
                    oSub[i].hideIt()
                    if(foldImg)oTop[i].ref[\"imgA\"+i].src=unImg.src
                }
            }
            for(i=1;i<oTop.length;i++){
                oTop[i].moveIt(0,oTop[i-1].y+oTop[i-1].height)
            }
        }
    }
};

</script>

</head>

<body bgcolor=\"#1c212f\"><br>

  <div id=\"divCont\">
    <div id=\"divTop1\" class=\"clTop\"><A class=clMain onfocus=\"this.blur()\" onclick=\"menu2(10)\" href=\"dinside.htm\" target=\"iframemain\"><IMG height=12 alt=\"\" src=\"arrow.gif\" width=12 border=0 name=imgA0> MENU 1</a><br>
        <div id=\"divSub1\" class=\"clSub\">
            </div><br>
    </div>
    <div id=\"divTop2\" class=\"clTop\"><A class=clMain onfocus=\"this.blur()\" onclick=\"menu(1); return false\" href=\"#\"><IMG height=12 alt=\"\" src=\"arrow.gif\" width=12 border=0 name=imgA1> MENU 2</a><br>
        <div id=\"divSub2\" class=\"clSub\">
            <A class=clSubb href=\"dinside.htm\" target=\"iframemain\" onfocus=\"this.blur()\"><IMG height=7 alt=\"\" src=\"square.gif\" width=7 border=0> UNDERMENU 2.1</a><br>
            <A class=clSubb href=\"dinside.htm\" target=\"iframemain\" onfocus=\"this.blur()\"><IMG height=7 alt=\"\" src=\"square.gif\" width=7 border=0> UNDEMENU 2.2</a><br>
        </div><br>
    </div>
    <div id=\"divTop3\" class=\"clTop\"><A class=clMain onfocus=\"this.blur()\" onclick=\"menu(2); return false\" href=\"#\"><IMG height=12 alt=\"\" src=\"arrow.gif\" width=12 border=0 name=imgA2> MENU 3</a><br>
        <div id=\"divSub3\" class=\"clSub\">
            <A class=clSubb href=\"dinside.htm\" target=\"iframemain\" onfocus=\"this.blur()\"><IMG height=7 alt=\"\" src=\"square.gif\" width=7 border=0> UNDERMENU 3.1</a><br>
            <A class=clSubb href=\"dinside.htm\" target=\"iframemain\" onfocus=\"this.blur()\"><IMG height=7 alt=\"\" src=\"square.gif\" width=7 border=0> UNDERMENU 3.2</a><br>
            <A class=clSubb href=\"dinside.htm\" target=\"iframemain\" onfocus=\"this.blur()\"><IMG height=7 alt=\"\" src=\"square.gif\" width=7 border=0> UNDERMENU 3.3</a><br>
        </div><br>
    </div>
    <div id=\"divTop4\" class=\"clTop\"><a href=\"\" onfocus=\"this.blur()\" onclick=\"menu(3); return false\" class=\"clMain\"><IMG height=12 alt=\"\" src=\"arrow.gif\" width=12 border=0 name=imgA3> MENU 4</a><br>
        <div id=\"divSub4\" class=\"clSub\">
            <A class=clSubb href=\"dinside.htm\" target=\"iframemain\" onfocus=\"this.blur()\"><IMG height=7 alt=\"\" src=\"square.gif\" width=7 border=0> UNDERMENU 4.1</a><br>
            <A class=clSubb href=\"dinside.htm\" target=\"iframemain\" onfocus=\"this.blur()\"><IMG height=7 alt=\"\" src=\"square.gif\" width=7 border=0> UNDERMENU 4.2</a><br>
            <A class=clSubb href=\"dinside.htm\" target=\"iframemain\" onfocus=\"this.blur()\"><IMG height=7 alt=\"\" src=\"square.gif\" width=7 border=0> UNDERMENU 4.3</a><br>     
        </div><br>
    </div>
    <div id=\"divTop5\" class=\"clTop\"><a href=\"\" onfocus=\"this.blur()\" onclick=\"menu(4); return false\" class=\"clMain\"><IMG height=12 alt=\"\" src=\"arrow.gif\" width=12 border=0 name=imgA4> MENU 5</a><br>
        <div id=\"divSub5\" class=\"clSub\">
            <A class=clSubb href=\"mailto:\" target=\"iframemain\" onfocus=\"this.blur()\"><IMG height=7 alt=\"\" src=\"square.gif\" width=7 border=0> UNDRMENU 5.1</a><br>
            <A class=clSubb href=\"dinside.htm\" target=\"iframemain\" onfocus=\"this.blur()\"><IMG height=7 alt=\"\" src=\"square.gif\" width=7 border=0> UNDERMENU 5.2</a><br>
        </div><br>
    </div>
    <div id=\"divTop6\" class=\"clTop\"><a href=\"\" onfocus=\"this.blur()\" onclick=\"menu(5); return false\" class=\"clMain\"><IMG height=12 alt=\"\" src=\"arrow.gif\" width=12 border=0 name=imgA5> MENU 6</a><br>
        <div id=\"divSub6\" class=\"clSub\">
            <A class=clSubb href=\"dinside.htm\" target=\"iframemain\" onfocus=\"this.blur()\"><IMG height=7 alt=\"\" src=\"square.gif\" width=7 border=0>  UNDERMENU 6.1</a><br>
        </div><br>
    </div>
</div>
           
</body>
</html>

Fomse:-)
Avatar billede ptvedt Nybegynder
27. september 2001 - 23:30 #7
fomse: det er akkurat det samme som står på sidene ovenfor.  Men ta det med ro folkens dere for nok poengene dere om ikke alt for lenge.  Takk for hjelpen hittil
Avatar billede keysersoze Guru
04. oktober 2001 - 21:33 #8
hvordan går det med din menu?
Avatar billede ptvedt Nybegynder
05. oktober 2001 - 20:32 #9
Jo det går bedre. Den er snart ferdig... så eg kan vel like godt bare acceptere keysersoze for linken.. der fant jeg det jeg trengte.. men jeg deler poengene fordi dere har alle hjulpet litt.. sett på alle tips :)
Avatar billede bjarte Nybegynder
09. oktober 2001 - 01:54 #10
du gir ikkje 250 poeng fordelt på to stykker som gir samme linken jeg ga til deg på irc....
og så e det eg som må slite med å sette den inn på siden din! jaja..
når du er fredig med elevprosjektet ditt kanskje det kommer noen point til meg som takk???
;) bare kjeder meg litt her..
tenkte det burde være rimelig jeg.
Avatar billede ptvedt Nybegynder
09. oktober 2001 - 12:26 #11
Ja du skal få 300 poeng om det er nødvendig
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester