# Menü mit Untermenü



## pontifex (7. März 2004)

Hallo Leute,
ich möchte in einer Seite ein Menü (vertikal) mit Unterpunkten einbauen. Die Buttons und Unterbuttons sind bereits vorhanden. 

Mein Problem ist nun, dass ich ganze so gestalten möchte, dass die Menüs nicht rechts zur Seite sichtbar werden, sondern vielmehr unter dem Menüpunkt.

Kennt jemand ein Tutorial ?

Danke

PM


----------



## Thomas Lindner (7. März 2004)

Das kannst Du mit Divs, bzw. vorallem mit der "eigenschaft:

display : block
display : none

erreichen....

(Suchbegriffe)


----------



## pontifex (7. März 2004)

hallo,
habt ihr dafür vielleicht ein BSp script?

Danke
PM


----------



## Thomas Lindner (7. März 2004)

Zuviel erwartet selber zu suchen? 

http://www.tutorials.de/tutorials130021.html

http://www.tutorials.de/tutorials24983.html

http://www.tutorials.de/tutorials130001.html


----------



## pontifex (7. März 2004)

Hallo,

dem Grundlagen Tut (http://www.tutorials.de/tutorials24983.html) folgendend, habe ich ganze soweit hinbekommen. Gerne würde ich noch eine Funktion hinzufügen. Wie wird das Menü wieder geschlossen, wenn der Besucher erneut auf den Button clickt?

Nochmal danke für Eure Hilfe!

PM


----------



## Thomas Lindner (7. März 2004)

> Damit wird die Funktion aufgerufen. cat1 natürlich gegen die gewünschte id des div's, der angezeigt werden soll, austauschen.
> 
> Und zur Veranschaulichung hab ich das ganze hier nochmal hochgeladen.



Dort  mal den Quelltext ansehen ( Menü:Ansicht -> Quelltext oder Rechtsklick : Quelltext...)

Dort steht im Grunde die gesamte Lösung drinne.


----------



## pontifex (7. März 2004)

sorry, aber ich weiss leider nicht worauf du hinauswillst. ?! Ich bin newbie auf diesem Gebiet. Also bitte so nett, und lass mich nicht raten, wie u. a. eine Lösung ausehen könnte...

Vielen Dank!
PM


----------



## Thomas Lindner (7. März 2004)

Man sollte sich etwas selber helfen können - damit man ( in diesem Fall : Du ) es selber lernt.
Daher habe ich passende Codestellen geliefert, die nur noch sehr *minimal* geändert werden müssten.

Najha, Du wirst auf diesem Wege für jede Änderung fragen müssen, weil Du die Basics nicht nachfolzogen hast - aber gut Deine Entscheidung:

Naja, da dieser Weg scheinbar nicht klappt, also : "Vorkauen und fertig servieren..."

Zeige mal den CodeSchnipsel, also das was Du bisher gescriptet hast und erkläre, was Du Dir genau vorstellst, dann wollen wir mal sehen!


----------



## pontifex (7. März 2004)

Hallo,
hinsichtlich der zweiten Funktion, also dem erneuten Schließen des Menüs, wurden von mir keine Codefragmente erzeugt, zumal ich keine Ahnung habe, wie dies zu bewerkstelligen ist. 

Aus diesen Anlass wäre ich sehr dankbar, wenn Ihr anhand des Quellcodes: (http://www.tutorials.de/tutorials24983.html)

mir ein funktionierendes Beispiel erzeugen könntet.

Danke!

Ciao
PM


----------



## Thomas Lindner (7. März 2004)

```
<html>
<head>
<script type="text/javascript">
<!--
var zustand = "0"
function submenue(divid) {
d=document;
if(zustand == "0")
{
d.getElementById(divid).style.display = 'block';
zustand = "1"
return false
}
d.getElementById(divid).style.display = 'none';
zustand = "0"
}
//-->
</script>
</head>
<body>
<div id="haupt_one" onclick="submenue('cat1')" style="cursor : hand">Menü 1</div>
<div id="cat1" style="display:none">
<a href="#">Sub 1</a><br>
<a href="#">Sub 2</a><br>
<a href="#">Sub 3</a><br>
</body>
</html>
```


----------



## pontifex (7. März 2004)

Hallo,
ich habe jetzt meinen Quellcode (hier: http://test.dcserver2.com/js/quell.txt)
um die notwendige Submenu Struktur ergänzt. Meine Frage, die sich aus dem Testen des Ganzen ergab, ist nun die folgende. 

Wenn ich auf den Button/link drücke, schloss sich das eine Menü und das andere öffnete sich. Jetzt bleibt das aktivierte Menü stehen. Wie kann ich dieses verändern.

Danke!

CU
PM


----------



## Thomas Lindner (7. März 2004)

Das ist eine ganz andere Bedigung, wie noch vorhin gefordert,, - ich habe *jetzt* keine Zeit das Script auf diesen Wunsch anzupassen, also, entweder Geduld oder Glück, das hier noch jemand anderer Zeit hat.


----------



## Thomas Lindner (7. März 2004)

Naja, eigentlich keine Zeit gehabt, aber noch schnell was zusammengeschustert:


```
<html>
<head>
<script type="text/javascript">
<!--
var last = ""
function submenue(divid)
{
if(last != "")
d.getElementById(last).style.display = 'none'
d=document;
d.getElementById(divid).style.display = 'block'
last = divid 
}
//-->
</script>
</head>
<body>
<div id="haupt_one" onclick="submenue('cat1')" style="cursor : hand">Menü 1</div>
<div id="cat1" style="display:none">
<br>
<a href="#">Sub 1</a><br>
<a href="#">Sub 2</a><br>
<a href="#">Sub 3</a><br>
</div>
<div id="haupt_two" onclick="submenue('cat2')" style="cursor : hand">Menü 2</div>
<div id="cat2" style="display:none">
<br>
<a href="#">Sub 1</a><br>
<a href="#">Sub 2</a><br>
<a href="#">Sub 3</a><br>
</div>
<div id="haupt_three" onclick="submenue('cat3')" style="cursor : hand">Menü 2</div>
<div id="cat3" style="display:none">
<br>
<a href="#">Sub 1</a><br>
<a href="#">Sub 2</a><br>
<a href="#">Sub 3</a><br>
</div>
</body>
</html>
```


----------



## pontifex (7. März 2004)

Hallo,
ja klar, verstehe ich zu 100%. Wäre nur cool, wenn Du, sofern ein wenig Zeit vorhanden wäre, noch mal reinschauen könntest...

Vielen Dank!
PM


----------



## Thomas Lindner (7. März 2004)

...würde  sagen -done- , siehe oben....


----------



## Quaese (7. März 2004)

Hi,

meintest Du es so:


```
<script language="javascript" type="text/javascript">
  <!--
  var g_intAktiveNav = 0;		// Welche Navigation ist im Augenblick aktiv

  // Funktion zum Ein- und Ausblenden der Unternavigationen
function show(strNavName, navAktuell, navCount){
    // Alle Hauptnavigationen durchlaufen
    for(i=1; i <= navCount; i++){
        // ID-String generieren
        strID = strNavName + i;

        // Falls es sich um die Navigation handelt, die angeklickt wurde
        if(i == navAktuell){

            // Falls die Navigation bereits aufgeklappt ist
            if(navAktuell == g_intAktiveNav){
                // Navigation wieder zuklappen
                document.getElementById(strID).style.display = "none";
                g_intAktiveNav = 0;
            }else{
                // Sonst - Navigation aufklappen und in globaler Variable markieren
                document.getElementById(strID).style.display = "inline";
                g_intAktiveNav = navAktuell;
            }	// ENDE -- if(navAktuell == intAktiveNav)

        }else{
            document.getElementById(strID).style.display = "none";
        }	// ENDE -- if(i == navAktuell)

    }	// ENDE -- for(i=1; i <= navCount; i++)

}	// ENDE -- function show
  -->
</script>
```

Der entsprechende Code im Body muss dann folgendermassen heissen:

```
<a class="Nav" href="#" onclick="show('cat', 1, 2)">Nav1</a><br>
<div id="cat1" style="display:none">
    <a class="SubNav" href="#">Sub 1</a><br>
    <a class="SubNav" href="#">Sub 2</a><br>
    <a class="SubNav" href="#">Sub 3</a><br>
</div>
<a class="Nav" href="#" onclick="show('cat', 2, 2)">Nav2</a><br>
<div id="cat2" style="display:none">
    <a class="SubNav" href="#">Sub 1</a><br>
    <a class="SubNav" href="#">Sub 2</a><br>
    <a class="SubNav" href="#">Sub 3</a><br>
</div>
```

Ciao
Quaese


----------



## pontifex (7. März 2004)

super super super... bin Euch allen zu Dank verpflichtet!

Schönen Sonntag wünsche ich noch

Ciao
PM


----------

