Antworten auf deine Fragen:
Neues Thema erstellen

vertikales DropDown Menü mit Javascript

E

Elaii

Noch nicht viel geschrieben

Hallo erstmal !

Bin neu hier, ich hoffe ich hab das Thema an der richtigen Stelle erstellt :rolleyes:

Folgendes Problem:

Ich brauche ein DropDown Menü, das mit Klick auf bestimmte Listenpunkte weitere Listenpunkte zum Vorschein bringt. Soweit so gut, das hab ich geschafft !
Mein Problem ist jetzt nur, dass ein paar der sich öffnenden Listenpunkte nach Klick nochmals weitere Listenpunkte öffnen sollen. Also ne Navi mit mehreren Ebenen, die sich mit Klick öffnen und schließen lassen sollen.

Das ganze sieht bis jetzt so aus:

HTML:
<div id="menu">
<div id="mainmenu"><a href="#" onclick="toggle('submenu1')">Thema 1</a></div>
<div id="submenu1" style="display:none">
<div id="submenu"><a href="#">Unterpunkt</a></div>
<div id="submenu"><a href="#">Unterpunkt</a></div>
<div id="submenu"><a href="#">Unterpunkt</a></div>
<div id="submenu"><a href="#">Unterpunkt</a></div>
<div id="submenu"><a href="#">Unterpunkt</a></div>
<div id="submenu"><a href="#">Unterpunkt</a></div>
<div id="submenu"><a href="#">Unterpunkt</a></div>
</div>
<div id="mainmenu"><a href="#" onclick="toggle('submenu2')">Thema 2</a></div>
<div id="submenu2" style="display:none">
<div id="submenu"><a href="#">Unterpunkt</a></div>
<div id="submenu"><a href="#">Unterpunkt</a></div>
</div>
<div id="mainmenu"><a href="#" onclick="toggle('submenu3')">Thema 3</a></div>
<div id="submenu3" style="display:none">
<div id="submenu"><a href="#">Unterpunkt</a></div>
<div id="submenu"><a href="#">Unterpunkt</a></div>
</div>
<div id="mainmenu"><a href="#">Thema 4</a></div>
<div id="submenu5" style="display:none">
</div>
<div id="mainmenu"><a href="#">Thema 5</a></div>
<div id="submenu6" style="display:none">
</div>
<div id="mainmenu"><a href="#">Thema 6</a></div>
<div id="submenu7" style="display:none">
</div>
<div id="mainmenu"><a href="#">Thema 7</a></div>
<div id="submenu8" style="display:none">
</div>
<div id="mainmenu"><a href="#">Thema 8</a></div>
<div id="submenu9" style="display:none">
</div>
</div>

CSS:
#menu {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
left: 20px;
top: 20px;
}

#menu #mainmenu a {
color: #FFFFFF;
text-decoration: none;
display: block;
background-color: #990066;
padding-top: 2px;
padding-right: 5px;
padding-bottom: 2px;
padding-left: 5px;
width: 150px;
position:relative;
}

#menu #mainmenu a:hover {
background-color: #CC6699;
}

#menu #submenu a {
color: #FFFFFF;
text-decoration: none;
display: block;
background-color: #CC0066;
padding-top: 2px;
padding-right: 5px;
padding-bottom: 2px;
padding-left: 5px;
width: 135px;
left: 15px;
position:relative;
}

#menu #submenu a:hover {
background-color: #CC6699;
}


JAVASCRIPT:
function toggle(submenu) {
if (document.getElementById(submenu).style.display == "none")
document.getElementById(submenu).style.display = "block";
else if (document.getElementById(submenu).style.display == "block")
document.getElementById(submenu).style.display = "none"
else alert("An error occured in the menu. Contact the web master.");
}

Also wenn man jetzt auf einen Unterpunkt klickt, sollen sich weitere Unterpunkte öffnen und schließen lassen :)
Ich hoffe mir kann da jemand helfen !
 

E

Eyes_Only

Nicht mehr ganz neu hier

AW: vertikales DropDown Menü mit Javascript

Ich kann dir gerade nicht bei der Umsaetzung helfen, aber was mir sofort auffällt ist, dass du ein und dieselbe ID mehrmals vergeben hast... Das geht so nicht. IDs werden immer nur einmal an EIN Objekt vergeben. Sollen mehrere Objekte die gleichen Eigenschaften bekommen, musst du 'class' nehmen.
 
Duddle

Duddle

Posting-Frequenz: 14µHz

AW: vertikales DropDown Menü mit Javascript

Bitte pack in Zukunft Code in die entsprechenden BBCodes, also [HTML ]html-Code[/HTML ] (ohne die Leerzeichen).

Zweitens kannst du deine jetzige Lösung problemlos auf ein Unter-Untermenü anwenden. Du musst nur die IDs richtig vergeben und die onclick-Funktionen an die entsprechenden Links binden.


Duddle
 
E

Elaii

Noch nicht viel geschrieben

AW: vertikales DropDown Menü mit Javascript

Habs mit dem Menü jetzt geschafft und klappt super !

Jetz habe ich nur noch ein Problem und zwar, springt meine Seite bei jedem Klick auf einen Menüpunkt nach oben, sodass ich wieder nach unten scrollen muss und mich dann erst mal wieder orientieren muss, wo ich denn im Menü gerade am schauen war.

Hab leider keine Ahnung wie man das beheben kann ?
 
Myhar

Myhar

Hat es drauf

AW: vertikales DropDown Menü mit Javascript

Ohne genauen Code lässt sich nur mutmaßen. Aber ich denke, das liegt daran, dass du kein preventDefault bei deinen Links verwendest und jeder Link auf einen leeren Anker verweist. Da es kein Element gibt, auf den das Linkziel # passt, wird der Dokumentenanfang verwendet. Es ist generell nicht zu empfehlen,
 
E

Elaii

Noch nicht viel geschrieben

AW: vertikales DropDown Menü mit Javascript

Ich hätte hier noch eine Frage und zwar hätte ich gerne, dass das Menü bei der jeweiligen aktiven Seite offen bleibt

Mein Menü sieht jetz vom Schema her ungefähr so aus(ich hoff ich bin jetz mit den divs auf die Schnelle nich durcheinander gekommen):

HTML: 
<div id="menu">
<div id="mainmenu"><a onclick="toggle('submenu1')">Thema 1</a></div>
        <div id="submenu1" style="display:none">
            <div id="mainmenu2"><a onclick="toggle('subsubmenu1')">Unterpunkt 1</a></div>
            <div id="subsubmenu1" style="display:none">
                <div id="mainmenu3"><a onclick="toggle('subsubsubmenu4')">Unterpunkt 1_1</a></div>
                <div id="subsubsubmenu4" style="display:none">
                    <div id="subsubsubmenu"><a href="#">Unterpunkt 1_1_1</a></div>
                    <div id="subsubsubmenu"><a href="#">Unterpunkt 1_1_2</a></div>
                    <div id="subsubsubmenu"><a href="#">Unterpunkt 1_1_3</a></div>
                </div>
                  <div id="mainmenu3"><a onclick="toggle('subsubsubmenu5')">Unterpunkt 1_2</a></div>
                <div id="subsubsubmenu5" style="display:none">
                    <div id="subsubsubmenu"><a href="#">Unterpunkt 1_2_1</a></div>
                    <div id="subsubsubmenu"><a href="#">Unterpunkt 1_2_2</a></div>
                </div>
                <div id="subsubmenu"><a href="#">Unterpunkt 1_3</a></div>
            </div>
        <div id="mainmenu2"><a onclick="toggle('subsubmenu2')">Unterpunkt 2</a></div>
        <div id="subsubmenu2" style="display:none">
                <div id="mainmenu3"><a onclick="toggle('subsubsubmenu1')">Unterpunkt 2_1</a></div>
                <div id="subsubsubmenu1" style="display:none">
                    <div id="subsubsubmenu"><a href="#">Unterpunkt 2_1_1</a></div>
                    <div id="subsubsubmenu"><a href="#">Unterpunkt 2_1_2</a></div>
                    <div id="subsubsubmenu"><a href="#">Unterpunkt 2_1_3</a></div>
                </div>
        </div>
</div>
und das Javascript dazu, so:

function toggle(submenu) {
if (document.getElementById(submenu).style.display == "none")
document.getElementById(submenu).style.display = "block";
else if (document.getElementById(submenu).style.display == "block")
document.getElementById(submenu).style.display = "none"
else alert("An error occured in the menu. Contact the web master.");
}

function toggle(subsubmenu) {
if (document.getElementById(subsubmenu).style.display == "none")
document.getElementById(subsubmenu).style.display = "block";
else if (document.getElementById(subsubmenu).style.display == "block")
document.getElementById(subsubmenu).style.display = "none"
else alert("An error occured in the menu. Contact the web master.");
}

function toggle(subsubsubmenu) {
if (document.getElementById(subsubsubmenu).style.display == "none")
document.getElementById(subsubsubmenu).style.display = "block";
else if (document.getElementById(subsubsubmenu).style.display == "block")
document.getElementById(subsubsubmenu).style.display = "none"
else alert("An error occured in the menu. Contact the web master.");
}

Wie ist es denn möglich, das Menü bei den jeweiligen Seiten offen zu lassen ?

Hatte es erst mit PHP versucht, in dem ich

PHP: 
<?php if($activeE1 == "link1") echo "id=\"current\"" ;?>

in den <a></a> Tag mit rein mache und dann auf der jeweiligen Seite

PHP: 
<? 
$activeE1="link1"; 
$activeE2="link1_1"; 
 
?>

schreibe. Aber das klappt leider nich
 
Zuletzt bearbeitet:
cythux

cythux

Aktives Mitglied

AW: vertikales DropDown Menü mit Javascript

wozu die ganzen div's ? Mittel ul li kannst du, die ganzen Submenu ebenfalls erstellen
 
E

Elaii

Noch nicht viel geschrieben

AW: vertikales DropDown Menü mit Javascript

hatte ich auch erst, aber habs dann aus irgendeinem Grund geändert ..... den Grund weiß ich aber leider jetz grad nich mehr, aber es gab einen ! ^^

einen Lösungsvorschlag für mein Problem hast du nich zufällig auch dabei ? :)
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden
Zu den Gratis-Inhalten

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Gesamt: 124 (Mitglieder: 7, Gäste: 117)
Robots: 841

Statistik des Forums

Themen
118.635
Beiträge
1.538.449
Mitglieder
67.556
Neuestes Mitglied
Ggirl
Oben