Søg
Avatar billede lademan Novice
03. juni 2003 - 11:15 Der er 12 kommentarer og
1 løsning

Menu i layers

Hej.

Jeg har en menu, lavet i php, som jeg gerne vil have lavet om, så den virker vha layers:
www.surfersinfo.dk/Cool/

Hvordan laver man sådan en, således at indholdet under et layer bliver skubbet nedad (ligesom på eksperten)?

Jeg er taknemmelig overfor eksempler.

Mvh

Lademan
Avatar billede lademan Novice
03. juni 2003 - 11:16 #1
Og det skal helst virke i de mest brugte browsere :-)
Avatar billede roenving Novice
03. juni 2003 - 12:24 #2
Eksempel (den flytter sig ikke fuldstændigt, hvis der er flere end tre punkter -- men den gør som jeg vil have !-)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<HTML>

<HEAD>

<TITLE>Turneringsmenu</TITLE>

<LINK HREF="turnstyle.css" REL="stylesheet" TYPE="text/css">
<SCRIPT LANGUAGE="javascript" TYPE="text/javascript" SRC="funktioner.js"></SCRIPT>

<META NAME="Generator" CONTENT="Stone's WebWriter 3.5">

<SCRIPT LANGUAGE="javascript" TYPE="text/javascript">
var men = 5;// Number of active menus

function posText(){
  for(i=1;i<=men;i++){
    punkt=document.getElementById('menupunkt'+i)
    objX=parseInt(punkt.offsetLeft)+parseInt(punkt.offsetParent.offsetLeft) +parseInt(punkt.offsetParent.offsetParent.offsetLeft) +parseInt(punkt.offsetParent.offsetParent.offsetParent.offsetLeft) +45+"px";
    objY=parseInt(punkt.offsetTop)+parseInt(punkt.offsetParent.offsetTop)+parseInt(punkt.offsetParent.offsetParent.offsetTop)+parseInt(punkt.offsetParent.offsetParent.offsetParent.offsetTop)+5+"px";
    obj=document.getElementById('menutext'+i);
    obj.style.left=objX;
    obj.style.top=objY;
  }
}

function showFrame(frm){
  par=getI(top.document,frm).parentNode;
  frms=getTs(par,"IFRAME");
  for (i=0;i<frms.length;i++){
    if (frms[i].id==frm){
      frms[i].style.display="block"
    }else{
      frms[i].style.display="none"
    }
  }
}

function showMenu(nr){
    obj=document.getElementById('menutext'+nr);
    obj.style.display="block";
}

function hideMenu(nr){
    document.getElementById('menutext'+nr).style.display='none';
}
</SCRIPT>

</HEAD>

<BODY BGCOLOR="#0099CC" STYLE="display:block;overflow:no" ONLOAD="posText()">
<DIV ID="menu" STYLE="display:block;overflow:no">

    <DIV ID="menuover" CLASS="menuOverskrift" STYLE="display:block">Hvad vil du</DIV><BR><BR>
  <TABLE ONMOUSEOVER="showMenu(1);" ONMOUSEOUT="hideMenu(1);"><TR><TD>
    <DIV ID="menupunkt1" CLASS="menuPunkt" STYLE="display:block"><A HREF="java script:showFrame('Start');">Start/Instruktion</A><BR>
    <DIV ID="menutext1" CLASS="menuText" STYLE="display:none;z-index:2;position:absolute;"><A HREF="java script:showFrame('Start');">&nbsp;&nbsp;Start&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</A></DIV></DIV>
    </TD></TR></TABLE>
  <BR>
    <TABLE ONMOUSEOVER="showMenu(2);" ONMOUSEOUT="hideMenu(2);"><TR><TD>
    <DIV ID="menupunkt2" CLASS="menuPunkt" STYLE="display:block">Indtastning m.v.<BR><BR>
    <DIV ID="menutext2" CLASS="menuText" STYLE="display:none;z-index:2;position:absolute;"><A HREF="java script:showFrame('Init');">&nbsp;&nbsp;Start&nbsp;ny&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</A><BR><A HREF="java script:showFrame('Players');">&nbsp;&nbsp;Spillere&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</A></DIV></DIV>
    </TD></TR></TABLE>

    <TABLE ONMOUSEOVER="showMenu(3);" ONMOUSEOUT="hideMenu(3);"><TR><TD>
    <DIV ID="menupunkt3" CLASS="menuPunkt" STYLE="display:block">Menu 3    <BR><BR>
    <DIV ID="menutext3" CLASS="menuText" STYLE="display:none;z-index:2;position:absolute;">&nbsp;&nbsp;menutext3&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<BR>&nbsp;&nbsp;menutext3&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<BR>&nbsp;&nbsp;menutext3&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<BR></DIV></DIV>
    </TD></TR></TABLE>

    <TABLE ONMOUSEOVER="showMenu(4);" ONMOUSEOUT="hideMenu(4);"><TR><TD>
    <DIV ID="menupunkt4" CLASS="menuPunkt" STYLE="display:block">Menu 4    <BR><BR>
    <DIV ID="menutext4" CLASS="menuText" STYLE="display:none;z-index:2;position:absolute;">&nbsp;&nbsp;menutext4&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<BR>&nbsp;&nbsp;menutext4&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<BR>&nbsp;&nbsp;menutext4&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<BR></DIV></DIV>
    </TD></TR></TABLE>

    <TABLE ONMOUSEOVER="showMenu(5);" ONMOUSEOUT="hideMenu(5);"><TR><TD>
    <DIV ID="menupunkt5" CLASS="menuPunkt" STYLE="display:block">Menu 5    <BR><BR>
    <DIV ID="menutext5" CLASS="menuText" STYLE="display:none;z-index:2;position:absolute;">&nbsp;&nbsp;menutext5&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<BR>&nbsp;&nbsp;menutext5&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<BR>&nbsp;&nbsp;menutext5&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<BR></DIV></DIV>
    </TD></TR></TABLE>


</DIV>

</BODY>

</HTML>
Avatar billede lademan Novice
03. juni 2003 - 12:50 #3
Hov... jeg fandt i mellemtiden en her på eksperten, der umiddelbart virker.

Ved i om den kan ses i de gængse browsere?
Her er den: www.surfersinfo.dk/Cool/
Avatar billede roenving Novice
03. juni 2003 - 12:54 #4
Denne kodeblok giver et meget godt eksempel på, hvor den dur ...

ns4 = (document.layers)? true:false
ie4 = (document.all)? true:false
ie5 =(document.getElementById)? true:false
ns6 = (document.getElementById && !document.all)?true:false;

-- jeg syn's jeg kender koden, er der mon een, som har fjernet en copyright-meddelelse ?-)
Avatar billede roenving Novice
03. juni 2003 - 12:55 #5
-- den dur kort sagt overalt -- lige minus de 3 net-surfere, som stadig bruger ie3 ;O)
Avatar billede lademan Novice
03. juni 2003 - 13:03 #6
Jeg går ud fra at du omtaler den kode som ligger på sitet og ikke din kode, og at du dermed siger god for den i de nævnte browsere?

Det er en kode som jeg har fundet her på eksperten, og der var ingen copyrights på.
Avatar billede roenving Novice
03. juni 2003 - 13:13 #7
-- ja, ja, det er det som jeg kunne se på surfersinfo ...

-- nej, jeg tror gerne der ikke var noget på, og det kan jo også være det er noget custom -- jeg syntes bare jeg kunne genkende kode-stilen, men f.eks. kunne jeg udelukke Thomas Brattli, så den er ikke fra dhtmlcentral !-)

-- men de fleste menusystemer har en disclaimer, som hvis den medtages gør det helt gratis at bruge den (altså ikke en copyright !-)

Jeg er ret overbevist om, at den dur i _alt_ fra og med ie4 og ns4

-- den kræver understøttelse af css diplay-property'en -- og er på objekt-niveau helt sikker fra de nævnte

-- så go!-]
Avatar billede lademan Novice
03. juni 2003 - 13:18 #8
Kanon!! Så skal den misbruges på det groveste :-)
Avatar billede roenving Novice
03. juni 2003 - 13:19 #9
*g*
Avatar billede tobiashm Nybegynder
04. juni 2003 - 02:41 #10
Denne metode er simpel og virker i alle nyere browsere:

<script type="text/javascript">
var menus = new Array("divmenu1", "divmenu2", "divmenu3", "divmenu4");

function expandMenu(menuId) {
    var el, style;
    for (var i = 0; i < menus.length; i++) {
        var el = document.getElementById(menus[i]);
        style = (menuId == menus[i]) ? "inherit" : "none";
        el.style.display = style;
    }
}
</script>

<div><a href="java script:expandMenu('divmenu1');">Min menu 1</a></div>
<div id="divmenu1" style="display:none">
    <a href="page1.html">Page 1</a><br>
    <a href="page2.html">Page 2</a><br>
    <a href="page3.html">Page 3</a><br>
    <a href="page4.html">Page 4</a>
</div>
<div><a href="java script:expandMenu('divmenu2');">Min menu 2</a></div>
<div id="divmenu2" style="display:none">
    <a href="page1.html">Page 1</a><br>
    <a href="page2.html">Page 2</a><br>
    <a href="page3.html">Page 3</a><br>
    <a href="page4.html">Page 4</a>
</div>
<div><a href="java script:expandMenu('divmenu3');">Min menu 3</a></div>
<div id="divmenu3" style="display:none">
    <a href="page1.html">Page 1</a><br>
    <a href="page2.html">Page 2</a><br>
    <a href="page3.html">Page 3</a><br>
    <a href="page4.html">Page 4</a>
</div>
<div><a href="java script:expandMenu('divmenu4');">Min menu 4</a></div>
<div id="divmenu4" style="display:none">
    <a href="page1.html">Page 1</a><br>
    <a href="page2.html">Page 2</a><br>
    <a href="page3.html">Page 3</a><br>
    <a href="page4.html">Page 4</a>
</div>
Avatar billede roenving Novice
04. juni 2003 - 02:49 #11
Ja, fra og med IE5 og NS 6 ;-|
Avatar billede tobiashm Nybegynder
04. juni 2003 - 03:20 #12
Jep - men de er jo også 'nyere' :0)
Avatar billede roenving Novice
25. november 2007 - 16:52 #13
Tak for point ;~}
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
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel Indlæg Oprettet Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML 18 10/09/202515:07 17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML 3 19/03/202522:16 20/03/202513:04
Se og ændre html på en webside Af magger i HTML 4 11/03/202513:55 12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML 5 02/03/202520:05 04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML 3 30/10/202409:37 01/01/202515:27
Se alle spørgsmål i kategorien Opret spørgsmål

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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I dag 14:10 Komme ind på : YouSeeMusic" Af Ikke-ekspert i Musik & videoafspillere
I dag 13:27 Send/modtag i Outlook 2024 Af ErikHg i E-mail programmer
10/0915:34 Installer alarmlyd på Samsung Galaxy XCover 7 Pro Af ErikHg i Mobiltelefoner
08/0913:06 Kan ikke starte min pc Af Malm i PC
07/0919:20 DVD program Af dcedata1977 i Andet software
White papers
Flere white papers »