Avatar billede moejensen Nybegynder
14. august 2002 - 19:13 Der er 2 kommentarer og
1 løsning

HASTER : Menu med underpunkter

JEg har tidligere brugt et godt script til at lave en menu hvor der er overpunkter, og når man klikker på dem, så fremkommer der underpunkter, problemet er nu at jeg ikke kan få den til at virke med onClick funktionen.

Herunder ses hele koden til menuen:

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
#divCont {position:absolute; z-index:1; left:60px; top:250px; height:400px; width:170px; visibility:hidden;}
.clTop  {position:absolute; z-index:1; width:170px; line-height:17px;}
.clSub  {position:absolute; z-index:1; left:15px; top:20px; width:170px; line-height:17px;}

/*** This sets the style for the links inside the menu. ***/
#divCont .clTop a {color:#000000; font-family:trebuchet ms; font-size:14px; font-weight:bold; text-decoration:none;}
#divCont .clTop a:hover {color:#000000; text-decoration:underline;}
#divCont .clTop .clSub a {color:#a6caf0; font-family:trebuchet ms; font-size:12px; font-weight:normal; text-decoration:none;}
#divCont .clTop .clSub a:hover {color:#000000; text-decoration:none;} 

a {  text-decoration: none; color: #000000}
a:hover {  color: #000000; text-decoration: underline}
</style>
<script language="JavaScript" type="text/javascript">

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()



/*** variables you can configure ***/

FoldNumber = 8                    //How many toplinks do you have?
var stayFolded = false            //Stay open when you click a new toplink?
foldImg = 1                        //Do you want images (if not set to 0 and remove the images from the body)?
mainOffsetY = 0                    //Vertical space adjustment between the main items, in pixels.

//This is the default image.
//Remember to change the actual images in the page as well, but remember to keep the name of the image.
var unImg=new Image();
unImg.src='grafik/fmenu_closed.gif'

var exImg=new Image();                    //Making an image variable...
exImg.src='grafik/fmenu_open.gif'    //...this is the source of the image that it changes to when the menu expands.

// NOTE: if you change the position of divCont from absolute to relative, you can put the foldoutmenu in a table.
// HOWEVER it will no longer work in netscape 4. If you wish to support netscape 4, you have to use absolute positioning.

/*** There should be no need to change anything beyond this. ***/

// A unit of measure that will be added when setting the position of a layer.
var px = bw.ns4||window.opera?"":"px";

if(navigator.userAgent.indexOf('Opera')>-1 && document.getElementById){ //Opera 5 resize fix.
    scrX= innerWidth; scrY= innerHeight;
    document.onmousemove= function(){
        if(scrX<innerWidth-10 || scrY<innerHeight-10 || scrX>innerWidth+10 || scrY>innerHeight+10){
            scrX = innerWidth;
            scrY = innerHeight;
            initFoldout();
        }
    };
}

//object constructor...
function makeMenu(obj,nest){
    nest= (!nest)?"":'document.'+nest+'.';
    this.el= bw.ie4?document.all[obj]:bw.ns4?eval(nest+'document.'+obj):document.getElementById(obj);   
      this.css= bw.ns4?this.el:this.el.style;
    this.ref= bw.ns4?this.el.document:document;       
    this.x= (bw.ns4||bw.opera5)?this.css.left:this.el.offsetLeft;
    this.y= (bw.ns4||bw.opera5)?this.css.top:this.el.offsetTop;
    this.h= (bw.ie||bw.ns6)?this.el.offsetHeight:bw.ns4?this.ref.height:bw.opera5?this.css.pixelHeight:0;
    this.vis= b_vis;
    this.hideIt= b_hideIt;
    this.showIt= b_showIt;
    this.moveIt= b_moveIt;
    return this
}
//object methods...
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=='HIDDEN' || this.css.visibility=='hide') return true;}
function b_moveIt(x,y){this.x=x; this.y=y; this.css.left=this.x+px; this.css.top=this.y+px}

/************************************************************************************
This is the function that changes the sub menus to folded or unfolded state.
************************************************************************************/
function menu(num){
    if(bw.bw){
        if (!stayFolded){
            for (var i=0; i<oSub.length; i++){
                if (i!=num){
                    oSub[i].hideIt()
                    if (foldImg)oTop[i].ref["imgA"+i].src = unImg.src
                }
            }
            for(var i=1; i<oTop.length; i++){
                oTop[i].moveIt(0,oTop[i-1].y+oTop[i-1].h)
            }
        }
        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(var i=1; i<oTop.length; i++){
            if (!oSub[i-1].vis()) oTop[i].moveIt(0,oTop[i-1].y+oTop[i-1].h+oSub[i-1].h+mainOffsetY)
            else oTop[i].moveIt(0,oTop[i-1].y+oTop[i-1].h+mainOffsetY)
        }
    }
}

/*********************************************************************
The init function... there should be no need to change anything here.
*********************************************************************/
function initFoldout(){
    //Fixing the browsercheck for opera... this can be removed if the browsercheck has been updated!!
    bw.opera5 = (navigator.userAgent.indexOf("Opera")>-1 && document.getElementById)?true:false
    if (bw.opera5) bw.ns6 = 0

    oTop = new Array()
    oSub = new Array()
    //Making the objects and hiding the subs...
    for (var i=0; i<FoldNumber; i++){
        oTop[i] = new makeMenu('divTop'+i,'divCont')
        oSub[i] = new makeMenu('divSub'+i,'divCont.document.divTop'+i)
        oSub[i].hideIt()
    }
   
    //Positioning the top objects...
    oTop[0].moveIt(0,0)
    for (var i=1; i<oTop.length; i++){
        oTop[i].moveIt(0, oTop[i-1].y+oTop[i-1].h+mainOffsetY)
    }
   
    //Making the containing menu object and showing it...
    oCont = new makeMenu('divCont')
    oCont.showIt()
}

// If the browser is ok, the script is started onload...
if(bw.bw) onload = initFoldout;
</script>
</head>

<body bgcolor="#FFFFFF" text="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="100%" border="0" cellspacing="0" cellpadding="0" height="565">
  <tr>
    <td valign="top" width="271" height="565">
      <img src="grafik/top.gif" width="271" height="236" usemap="#Map" border="0">
      <table border="0" width="100%" height="328">
        <tr>
                <div id="divCont"> <!-- These are the contents of the foldoutmenu. -->
               
                <div id="divTop0" class="clTop"><a href="#" onClick="parent.iframe.location.href = 'start.htm'; document.images['menu'].src = 'grafik/menu_start.gif'; return false; return false" onfocus="this.blur()" onMouseOver="window.status='Tilbage til forsiden'; return true;" onMouseOut="window.status=''"><img src="grafik/fmenu_closed.gif" name="imgA0" width=12 height=12 alt="" border="0">Forside</a><br>
        <div id="divSub0" class="clSub">
        </div><br>
        </div>
               
                <div id="divTop1" class="clTop"><a href="#" onClick="parent.iframe.location.href = 'Hvad_er_AMD.htm'; document.images['menu'].src = 'grafik/menu_hvad_er.gif'; return false; return false" onfocus="this.blur()" onMouseOver="window.status='Hvad er AMD?'; return true;" onMouseOut="window.status=''"><img src="grafik/fmenu_closed.gif" name="imgA1" width=12 height=12 alt="" border="0">Hvad er AMD?</a><br>
        <div id="divSub1" class="clSub">
        </div><br>
        </div>
       
        <div id="divTop2" class="clTop"><a href="#" onclick="menu(2); return false" onfocus="this.blur()" target="Mainpage" onMouseOver="window.status='To former for AMD'; return true;" onMouseOut="window.status=''"><img src="grafik/fmenu_Closed.gif" name="imgA2" width=12 height=12 alt="" border="0">To former for AMD</a><br>
        <div id="divSub2" class="clSub">
            <a href="#" onClick="parent.iframe.location.href = 'Toer_AMD.htm'; document.images['menu'].src = 'grafik/menu_Toer_AMD.gif'; return false; onMouseOver="window.status='Information om T&oslash;r AMD'; return true;" onMouseOut="window.status=''">T&oslash;r AMD</a><br>
            <a href="#" onClick="parent.iframe.location.href = 'Vaad_AMD.htm'; document.images['menu'].src = 'grafik/menu_Vaad_AMD.gif'; return false; onMouseOver="window.status='Information om V&aring;d AMD'; return true;" onMouseOut="window.status=''">V&aring;d AMD</a><br>
        </div><br>
        </div>
       
        <div id="divTop3" class="clTop"><a href="#" onclick="menu(3); return false" onfocus="this.blur()" target="Mainpage" onMouseOver="window.status='Sider for mine gamle klassekammerater'; return true;" onMouseOut="window.status=''"><img src="grafik/fmenu_Closed.gif" name="imgA3" width=12 height=12 alt="" border="0">Skole Venner</a><br>
        <div id="divSub3" class="clSub">
            <a href="Overlund/loginOverlund.asp" target="Mainpage" onMouseOver="window.status='For 9.A fra Overlund Skole 1996'; return true;" onMouseOut="window.status=''">Overlund Skole</a><br>
            <a href="VAG/loginVAG.asp" target="Mainpage" onMouseOver="window.status='For 3.U fra Viborg Amtsgymnasie og Hf 1999'; return true;" onMouseOut="window.status=''">VAG</a><br>
            <a href="LUC/loginLUC.asp" target="Mainpage" onMouseOver="window.status='For Datamatikere fra LUC sommeren 2002'; return true;" onMouseOut="window.status=''">LUC</a><br>
        </div><br>
        </div>
       
        <div id="divTop4" class="clTop"><a href="#" onclick="menu(4); return false" onfocus="this.blur()" target="Mainpage" onMouseOver="window.status='Sider for mine gamle klassekammerater'; return true;" onMouseOut="window.status=''"><img src="grafik/fmenu_Closed.gif" name="imgA4" width=12 height=12 alt="" border="0">Skole Venner</a><br>
        <div id="divSub4" class="clSub">
            <a href="Overlund/loginOverlund.asp" target="Mainpage" onMouseOver="window.status='For 9.A fra Overlund Skole 1996'; return true;" onMouseOut="window.status=''">Overlund Skole</a><br>
            <a href="VAG/loginVAG.asp" target="Mainpage" onMouseOver="window.status='For 3.U fra Viborg Amtsgymnasie og Hf 1999'; return true;" onMouseOut="window.status=''">VAG</a><br>
            <a href="LUC/loginLUC.asp" target="Mainpage" onMouseOver="window.status='For Datamatikere fra LUC sommeren 2002'; return true;" onMouseOut="window.status=''">LUC</a><br>
        </div><br>
        </div>
       
        <div id="divTop5" class="clTop"><a href="#" onclick="menu(5); return false" onfocus="this.blur()" target="Mainpage" onMouseOver="window.status='Sider for mine gamle klassekammerater'; return true;" onMouseOut="window.status=''"><img src="grafik/fmenu_Closed.gif" name="imgA5" width=12 height=12 alt="" border="0">Skole Venner</a><br>
        <div id="divSub5" class="clSub">
            <a href="Overlund/loginOverlund.asp" target="Mainpage" onMouseOver="window.status='For 9.A fra Overlund Skole 1996'; return true;" onMouseOut="window.status=''">Overlund Skole</a><br>
            <a href="VAG/loginVAG.asp" target="Mainpage" onMouseOver="window.status='For 3.U fra Viborg Amtsgymnasie og Hf 1999'; return true;" onMouseOut="window.status=''">VAG</a><br>
            <a href="LUC/loginLUC.asp" target="Mainpage" onMouseOver="window.status='For Datamatikere fra LUC sommeren 2002'; return true;" onMouseOut="window.status=''">LUC</a><br>
        </div><br>
        </div>
       
        <div id="divTop6" class="clTop"><a href="#" onclick="menu(6); return false" onfocus="this.blur()" target="Mainpage" onMouseOver="window.status='Sider for mine gamle klassekammerater'; return true;" onMouseOut="window.status=''"><img src="grafik/fmenu_Closed.gif" name="imgA6" width=12 height=12 alt="" border="0">Skole Venner</a><br>
        <div id="divSub6" class="clSub">
            <a href="Overlund/loginOverlund.asp" target="Mainpage" onMouseOver="window.status='For 9.A fra Overlund Skole 1996'; return true;" onMouseOut="window.status=''">Overlund Skole</a><br>
            <a href="VAG/loginVAG.asp" target="Mainpage" onMouseOver="window.status='For 3.U fra Viborg Amtsgymnasie og Hf 1999'; return true;" onMouseOut="window.status=''">VAG</a><br>
            <a href="LUC/loginLUC.asp" target="Mainpage" onMouseOver="window.status='For Datamatikere fra LUC sommeren 2002'; return true;" onMouseOut="window.status=''">LUC</a><br>
        </div><br>
        </div>
       
        <div id="divTop7" class="clTop"><a href="#" onclick="menu(7); return false" onfocus="this.blur()" target="Mainpage" onMouseOver="window.status='Sider for mine gamle klassekammerater'; return true;" onMouseOut="window.status=''"><img src="grafik/fmenu_Closed.gif" name="imgA7" width=12 height=12 alt="" border="0">Skole Venner</a><br>
        <div id="divSub7" class="clSub">
            <a href="Overlund/loginOverlund.asp" target="Mainpage" onMouseOver="window.status='For 9.A fra Overlund Skole 1996'; return true;" onMouseOut="window.status=''">Overlund Skole</a><br>
            <a href="VAG/loginVAG.asp" target="Mainpage" onMouseOver="window.status='For 3.U fra Viborg Amtsgymnasie og Hf 1999'; return true;" onMouseOut="window.status=''">VAG</a><br>
            <a href="LUC/loginLUC.asp" target="Mainpage" onMouseOver="window.status='For Datamatikere fra LUC sommeren 2002'; return true;" onMouseOut="window.status=''">LUC</a><br>
        </div><br>
        </div>
       
       
       
        </div> <!-- Here ends the foldoutmenu. -->
       
        </tr>
        <tr>
          <td width="100%" valign="top">
          </td>
        </tr>
      </table>
    </td>
    <td valign="top" height="565">
      <table width="603" border="0" cellspacing="0" cellpadding="0" height="200">
        <tr>
          <td height="76" valign="top" width="629">&nbsp;</td>
        </tr>
        <tr>
          <td background="grafik/baggrund.gif" valign="top" width="629"><img src="grafik/menu_start.gif" width="601" height="160" border="0" name="menu"></td>
        </tr>
      </table>
      <table width="600" border="0" cellspacing="0" cellpadding="0" >
      <tr>
          <td width="1" background="grafik/prikker.gif"></td>
          <td width="19">&nbsp;</td>
          <td valign="top" width="405"><IFRAME name="iframe" SRC="start.htm" scrolling="yes" frameborder="0" border="0" width="587" height="331"></IFRAME></td>
        </tr>
      </table>
     
    </td>
  </tr>
</table>


Som det kan ses, er den normale metode at lave underlinksne på ved at skrive følgende:

<div id="divSub5" class="clSub">
            <a href="Overlund/loginOverlund.asp" target="Mainpage" onMouseOver="window.status='For 9.A fra Overlund Skole 1996'; return true;" onMouseOut="window.status=''">Overlund Skole</a><br>
            <a href="VAG/loginVAG.asp" target="Mainpage" onMouseOver="window.status='For 3.U fra Viborg Amtsgymnasie og Hf 1999'; return true;" onMouseOut="window.status=''">VAG</a><br>
            <a href="LUC/loginLUC.asp" target="Mainpage" onMouseOver="window.status='For Datamatikere fra LUC sommeren 2002'; return true;" onMouseOut="window.status=''">LUC</a><br>
        </div>

Men det jeg gerne vil have til at stå der er:

<div id="divSub2" class="clSub">
            <a href="#" onClick="parent.iframe.location.href = 'Toer_AMD.htm'; document.images['menu'].src = 'grafik/menu_Toer_AMD.gif'; return false; onMouseOver="window.status='Information om T&oslash;r AMD'; return true;" onMouseOut="window.status=''">T&oslash;r AMD</a><br>
            <a href="#" onClick="parent.iframe.location.href = 'Vaad_AMD.htm'; document.images['menu'].src = 'grafik/menu_Vaad_AMD.gif'; return false; onMouseOver="window.status='Information om V&aring;d AMD'; return true;" onMouseOut="window.status=''">V&aring;d AMD</a><br>
        </div>

Er der nogen der kan hjælpe mig??

Eller har et andet skript hvor jeg kan få det til at virke, som gør det sammen???
Avatar billede moejensen Nybegynder
15. august 2002 - 22:26 #1
Har løst problemet...
Avatar billede Slettet bruger
15. august 2002 - 22:27 #2
Hmm hvad var problemet??
Avatar billede moejensen Nybegynder
15. august 2002 - 22:47 #3
Som det kan ses, er den normale metode at lave underlinksne på ved at skrive følgende:

<div id="divSub5" class="clSub">
            <a href="Overlund/loginOverlund.asp" target="Mainpage" onMouseOver="window.status='For 9.A fra Overlund Skole 1996'; return true;" onMouseOut="window.status=''">Overlund Skole</a><br>
            <a href="VAG/loginVAG.asp" target="Mainpage" onMouseOver="window.status='For 3.U fra Viborg Amtsgymnasie og Hf 1999'; return true;" onMouseOut="window.status=''">VAG</a><br>
            <a href="LUC/loginLUC.asp" target="Mainpage" onMouseOver="window.status='For Datamatikere fra LUC sommeren 2002'; return true;" onMouseOut="window.status=''">LUC</a><br>
        </div>

Men det jeg gerne vil have til at stå der er:

<div id="divSub2" class="clSub">
            <a href="#" onClick="parent.iframe.location.href = 'Toer_AMD.htm'; document.images['menu'].src = 'grafik/menu_Toer_AMD.gif'; return false; onMouseOver="window.status='Information om T&oslash;r AMD'; return true;" onMouseOut="window.status=''">T&oslash;r AMD</a><br>
            <a href="#" onClick="parent.iframe.location.href = 'Vaad_AMD.htm'; document.images['menu'].src = 'grafik/menu_Vaad_AMD.gif'; return false; onMouseOver="window.status='Information om V&aring;d AMD'; return true;" onMouseOut="window.status=''">V&aring;d AMD</a><br>
        </div>
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