Søg
Avatar billede venchil Nybegynder
18. maj 2006 - 16:40 Der er 16 kommentarer og
1 løsning

Fold -ud og ind div til menu

Hej eksperter!
Jeg er igang med et nyt website, og til menuen skal jeg have en slags "fold-ud" menu... Så ved et tryk på et billede skulle der gerne blive vist en div med f.eks et specielt ID... Før der bliver trykket skal DIV'en ikke kunne ses. Når man trykker 2. gang skal DIV'en selvfølgelig "folde ind" igen.

Er der nogen der ved hvordan jeg gør dette?
Avatar billede psykochicken Nybegynder
18. maj 2006 - 16:53 #1
Hvad mener du med "en slags fold-ud menu" - er det noget i stil med http://myplayhouse.dk/menu2/ du tænker på ?

ellers kig f.eks på http://www.dynamicdrive.com/dynamicindex1/index.html

/psc
Avatar billede venchil Nybegynder
19. maj 2006 - 15:26 #2
Hejsa...

Efter at have kigget lidt her: http://tutorials.alsacreations.com/deroulant/, og have modificeret koden lidt, skal jeg have noget hjælp igen... Det hele virker egentlig meget godt, men der er nogle ting jeg skal have på plads... Min kode er her:

--------------------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Nyt dokument</title>
<meta name="generator" content="TSW WebCoder">

<link rel="stylesheet" type="text/css" href="style.css">

<script type="text/javascript">
<!--
window.onload=show;
function show(id) {
var d = document.getElementById(id);
    for (var i = 1; i<=10; i++) {
        if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
    }
if (d) {d.style.display='block';}
}
//-->
</script>

<style type="text/css" media="screen">
<!--
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute; /* Menu position that can be changed at will */
top: 0;
left: 0;
}
#menu {
width: 100%;
}
#menu dt {
height: 15px;
line-height: 15px;
text-align: left;
font-weight: bold;
background-color: #CCCCCC;
}
#menu li a, #menu dt a {
color: #000000;
line-height: 15px;
text-decoration: none;
display: block;
border: 0 none;
height: 100%;
}
#menu li a:hover, #menu dt a:hover {
background: #E0DDD0;
}
-->
</style>

</head>

<body>

<dl id="menu">

        <dt>Menu 2<img src="menu_foldud.gif" alt="Fold menuen ud" onclick="java script:show('smenu2');" style="cursor:pointer;"></dt>
            <dd id="smenu2">
                <ul>
                    <li><a href="#">sub-menu 2.1</a></li>
                    <li><a href="#">sub-menu 2.2</a></li>
                    <li><a href="#">sub-menu 2.3</a></li>
                </ul>
            </dd>

        <dt>Menu 3<img src="menu_foldud.gif" alt="Fold menuen ud" onclick="java script:show('smenu2');" style="cursor:pointer;"></dt>
            <dd id="smenu3">
                <ul>
                    <li><a href="#">sub-menu 3.1</a></li>
                    <li><a href="#">sub-menu 3.1</a></li>
                    <li><a href="#">sub-menu 3.1</a></li>
                    <li><a href="#">sub-menu 3.1</a></li>
                    <li><a href="#">sub-menu 3.1</a></li>
                    <li><a href="#">sub-menu 3.1</a></li>
                </ul>
            </dd>

        <dt>Menu 4<img src="menu_foldud.gif" alt="Fold menuen ud" onclick="java script:show('smenu2');" style="cursor:pointer;"></dt>
            <dd id="smenu4">
                <ul>
                    <li><a href="#">sub-menu 4.1</a></li>
                    <li><a href="#">sub-menu 4.1</a></li>
                </ul>
            </dd>

</dl>

</body>
</html>
--------------------------------------------------------------------------

Siden virker jo OK, men der er 2 problemer:
- Når man har foldet en menu ud, kan man ikke folde andre ud
- Når man har foldet en menu ud, kan man ikke folde den ind igen

Er der nogen der kan komme med noget kode, der løser disse problemer? Hvis det virker ordentligt belønner jeg gerne med 20 point mere...
Avatar billede venchil Nybegynder
19. maj 2006 - 15:40 #3
Har løst problem nr 2.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Nyt dokument</title>
<meta name="generator" content="TSW WebCoder">

<link rel="stylesheet" type="text/css" href="style.css">

<script type="text/javascript">
<!--
window.onload=show;
function show(id) {
var d = document.getElementById(id);
    for (var i = 1; i<=10; i++) {
        if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
    }
if (d) {d.style.display='block';}
}
//-->
</script>

<style type="text/css" media="screen">
<!--
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute; /* Menu position that can be changed at will */
top: 0;
left: 0;
}
#menu {
width: 100%;
}
#menu dt {
height: 15px;
line-height: 15px;
text-align: left;
font-weight: bold;
background-color: #090730;
color: #FFFFFF;
}
#menu li a, #menu dt a {
color: #000000;
line-height: 15px;
text-decoration: none;
display: block;
height: 100%;
}
#menu li a:hover, #menu dt a:hover {
background: #E0DDD0;
}
-->
</style>

</head>

<body>

<dl id="menu">

        <dt>Menu 2<img src="menu_foldud.gif" alt="Fold menuen ud" onclick="java script:show('smenu1');" style="cursor:pointer;"></dt>
            <dd id="smenu1">
                <ul>
                    <li><a href="#">sub-menu 2.1</a></li>
                    <li><a href="#">sub-menu 2.2</a></li>
                    <li><a href="#">sub-menu 2.3</a></li>
                </ul>
            </dd>

        <dt>Menu 3<img src="menu_foldud.gif" alt="Fold menuen ud" onclick="java script:show('smenu2');" style="cursor:pointer;"></dt>
            <dd id="smenu2">
                <ul>
                    <li><a href="#">sub-menu 3.1</a></li>
                    <li><a href="#">sub-menu 3.1</a></li>
                    <li><a href="#">sub-menu 3.1</a></li>
                    <li><a href="#">sub-menu 3.1</a></li>
                    <li><a href="#">sub-menu 3.1</a></li>
                    <li><a href="#">sub-menu 3.1</a></li>
                </ul>
            </dd>

        <dt>Menu 4<img src="menu_foldud.gif" alt="Fold menuen ud" onclick="java script:show('smenu3');" style="cursor:pointer;"></dt>
            <dd id="smenu3">
                <ul>
                    <li><a href="#">sub-menu 4.1</a></li>
                    <li><a href="#">sub-menu 4.1</a></li>
                </ul>
            </dd>

</dl>

</body>
</html>
Avatar billede psykochicken Nybegynder
19. maj 2006 - 15:58 #4
prøv med:

<script type="text/javascript">
function show(id) {
var d = document.getElementById(id);
  if(d.style.display=='none'){ closeall(); d.style.display='block'; }
  else{ closeall(); }
}
function closeall(){
  for (var i=1;i<10; i++) {
    if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
  }
}
window.onload=closeall;
</script>

..og så brug onclick="show('smenu1');" i stedet for onclick="java script:show('smenu3');" ....det er ikke nødvendigt at fortælle javascript-fortolkeren at den skal læse javascript ;o)

/psc
Avatar billede venchil Nybegynder
19. maj 2006 - 16:36 #5
Det virker... Men jeg kan ikke have 2 åbne på samme tid :( - har du også et løsning på det? Der er et lille problem mere: jeg vil gerne skifte onclick-billedet når der bliver klikket... HAR PRØVET:

onclick="show('smenu1');if (this.src == 'menu_foldud.gif') this.src='menu_foldsammen.gif' else this.src='menu_foldud.gif';"

og diverse variationer heraf... Kan nogen hjælpe mig videre... Psykochicken er sikret point :) - du må gerne lægge et svar
Avatar billede psykochicken Nybegynder
19. maj 2006 - 17:08 #6
prøv med:
<script type="text/javascript">
function show(id, pic) {
var d = document.getElementById(id);
  if(d.style.display=='none'){ d.style.display='block';pic.src='menu_foldsammen.gif';  }
  else{ d.style.display='none';pic.src='menu_foldud.gif'; }
}
function closeall(){
  for (var i=1;i<10; i++) {
    if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
  }
}
window.onload=closeall;
</script>

/psc
Avatar billede psykochicken Nybegynder
19. maj 2006 - 17:10 #7
og så ....
onclick="show('smenu1', this);"
onclick="show('smenu2', this);"...osv

/psc
Avatar billede venchil Nybegynder
19. maj 2006 - 17:22 #8
Nu virker det helt perfekt! Du er mere end velkommen til at lægge et svar (færdigt resultat (ikke integreret i layout): http://www.madskjaer.dk/blog/dropdown.html
Avatar billede psykochicken Nybegynder
19. maj 2006 - 17:25 #9
velbekomme ;o)
Avatar billede venchil Nybegynder
19. maj 2006 - 17:41 #10
Der er lige en sidste ting, hvis du ikke er smuttet: Prøv at åbn en menu og hover det første menu-punkt her http://www.madskjaer.dk/blog/dropdown.html... Kan du se at den kun går til der hvor billedet starter ovenover... Fejlen er væk når jeg fjerner billedet, og den optræder kun på den første...

Hvad er der galt? :P
Avatar billede psykochicken Nybegynder
19. maj 2006 - 18:37 #11
tilføj højde i:
#menu li, #menu dt {....height:15px;...

...og i stedet for at skifte class (som ikke performer så godt), kunne du
fjerne dette fra style.css:
.menu_normal {
        line-height: 15px;
        height: 15px;
        background-color: #F4F2E9;
}

/psc

.menu_mouseover {
        line-height: 15px;
        height: 15px;
        background-color: #E0DDD0;
}

...og få en lidt mere overskuelig kode:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta name="generator" content="TSW WebCoder">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Nyt dokument</title>

<link rel="stylesheet" type="text/css" href="style.css">

<script type="text/javascript">
function show(id, pic) {
var d = document.getElementById(id);
  if(d.style.display=='none'){ d.style.display='block';pic.src='menu_foldsammen.gif';  }
  else{ d.style.display='none';pic.src='menu_foldud.gif'; }
}
function closeall(){
  for (var i=1;i<10; i++) {
    if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
  }
  var myli = document.getElementsByTagName('li');
  for(i=0;i<myli.length;i++){
    myli[i].onmouseover = function(){ this.style.backgroundColor='#E0DDD0'; }
    myli[i].onmouseout = function(){ this.style.backgroundColor='#F4F2E9'; }
  }
}
window.onload=closeall;
</script>

<style type="text/css" media="screen">
<!--
dl, dt, dd, ul, li {
margin: 0px;
padding: 0px;
list-style-type: none;
}
#menu {
position: absolute; /* Menu position that can be changed at will */
top: 0;
left: 0;
}
#menu {
width: 100%;
}
#menu dt {
margin-top: 1px;
padding: 0px 5px 0px 5px;
height: 15px;
line-height: 15px;
text-align: left;
font-weight: bold;
background-color: #090730;
color: #FFFFFF;
}
#menu li, #menu dt {
line-height: 15px;
height:15px;
display: block;
}
-->
    </style>

</head>

<body>

<dl id="menu">

  <dt>Menu<img src="menu_foldud.gif" alt="Fold menuen ind/ud" onclick="show('smenu1', this);" style="cursor:pointer;float:right;position:relative;top:-15px;"></dt>
    <dd id="smenu1">
      <ul>
        <li>&nbsp;-&nbsp;<a href="#">sub-menu 2.1</a></li>
        <li>&nbsp;-&nbsp;<a href="#">sub-menu 2.2</a></li>
        <li>&nbsp;-&nbsp;<a href="#">sub-menu 2.3</a></li>
      </ul>
    </dd>

  <dt>Menu<img src="menu_foldud.gif" alt="Fold menuen ind/ud" onclick="show('smenu2', this);" style="cursor:pointer;float:right;position:relative;top:-15px;"></dt>
    <dd id="smenu2">
      <ul>
        <li>&nbsp;-&nbsp;<a href="#">sub-menu 3.1</a></li>
        <li>&nbsp;-&nbsp;<a href="#">sub-menu 3.1</a></li>
        <li>&nbsp;-&nbsp;<a href="#">sub-menu 3.1</a></li>
        <li>&nbsp;-&nbsp;<a href="#">sub-menu 3.1</a></li>
        <li>&nbsp;-&nbsp;<a href="#">sub-menu 3.1</a></li>
        <li>&nbsp;-&nbsp;<a href="#">sub-menu 3.1</a></li>
      </ul>
    </dd>

  <dt>Menu<img src="menu_foldud.gif" alt="Fold menuen ud" onclick="show('smenu3', this);" style="cursor:pointer;float:right;position:relative;top:-15px;"></dt>
    <dd id="smenu3">
      <ul>
        <li>&nbsp;-&nbsp;<a href="#">sub-menu 4.1</a></li>
        <li>&nbsp;-&nbsp;<a href="#">sub-menu 4.1</a></li>
      </ul>
    </dd>

</dl>

</body>
</html>
Avatar billede psykochicken Nybegynder
19. maj 2006 - 18:38 #12
hov...underskriften røg ind midt i det hele..hehe

/psc
Avatar billede venchil Nybegynder
19. maj 2006 - 18:41 #13
Hmmm... Det giver mere overskuelig kode, men det hjælper ikke på det konkrete problem :(
Avatar billede psykochicken Nybegynder
19. maj 2006 - 18:45 #14
ok - så forstår jeg ikke hvad du mener med
"Kan du se at den kun går til der hvor billedet starter ovenover"

/psc
Avatar billede psykochicken Nybegynder
19. maj 2006 - 18:48 #15
aah så faldt ti-øren
tilføj:
html, body { width:100%; } til din css

/psc
Avatar billede venchil Nybegynder
20. maj 2006 - 10:29 #16
http://www.madskjaer.dk/blog/dropdown2.html - der sker stadig ikke noget :(
Har på fornemmelsen at det måske har noget at gøre med den måde jeg positionerer mine "foldud-foldind" billeder på:

<img src="menu_foldud.gif" alt="Fold menuen ind/ud" onclick="show('smenu1', this);" style="cursor:pointer;float:right;position:relative;top:-15px;">

De ligger alt for langt nede hvis jeg ikke har position:relative;top:-15px; på... Det har iværtfald noget at gøre med billedet, for hvis jeg fjerner der, virker det hele helt fint...
Avatar billede venchil Nybegynder
21. maj 2006 - 11:56 #17
Jeg har fundet et løsning :)
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 JavaScript kategorien

Titel Indlæg Oprettet Seneste aktivitet
problem med download i <a href=" " download> tag i JavaScript Af Peer i JavaScript 5 27/04/202620:09 03/05/202613:59
Validering af filnavn i formular Af Strawberry i JavaScript 8 14/04/202610:11 20/04/202611:14
Mangler et JavaScript til htm side med iframe i Joomla5 Af Peder Lund Nielsen i JavaScript 2 03/02/202614:19 04/04/202616:02
Åbne en PDF fil fra en mappe Af mbl i JavaScript 9 18/04/202516:52 22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript 2 14/02/202511:47 27/06/202514:34
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 går 11:48 Nyåbnede sider flimrer på Android tablet, hvorfor Af annam i Andet software
I går 11:03 Bitlocker fordele-ulemper, samt nulstille PC Af Uvanga i Windows
20/0511:00 IIS på Win10 64 bit Af bsn i Webservere
20/0509:01 Bitlocker Af Chevy396 i Windows
18/0501:57 Tjek alle checkbox i form Af bsn i ASP
White papers
Flere white papers »