Auf Thema antworten 2026

Beitrag

<blockquote data-quote="Elaii" data-source="post: 2236152" data-attributes="member: 638001"><p>Hallo erstmal !</p><p></p><p>Bin neu hier, ich hoffe ich hab das Thema an der richtigen Stelle erstellt <img src="/styles/default/xenforo/smilies/rolleyes.gif"&nbsp; class="smilie" loading="lazy" alt=":rolleyes:" title="Roll Eyes&nbsp; &nbsp; :rolleyes:" data-shortname=":rolleyes:" /></p><p></p><p>Folgendes Problem:</p><p></p><p>Ich brauche ein DropDown Menü, das mit Klick auf bestimmte Listenpunkte weitere Listenpunkte zum Vorschein bringt. Soweit so gut, das hab ich geschafft !</p><p>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.</p><p></p><p>Das ganze sieht bis jetzt so aus:</p><p></p><p>HTML:</p><p>&lt;div id=&quot;menu&quot;&gt;</p><p>&nbsp; &nbsp; &lt;div id=&quot;mainmenu&quot;&gt;&lt;a href=&quot;#&quot; onclick=&quot;toggle(&#039;submenu1&#039;)&quot;&gt;Thema 1&lt;/a&gt;&lt;/div&gt;</p><p>&nbsp; &nbsp; &nbsp; &nbsp; &lt;div id=&quot;submenu1&quot; style=&quot;display:none&quot;&gt;</p><p>&nbsp; &nbsp; &nbsp; &nbsp; &lt;div id=&quot;submenu&quot;&gt;&lt;a href=&quot;#&quot;&gt;Unterpunkt&lt;/a&gt;&lt;/div&gt;</p><p>&nbsp; &nbsp; &nbsp; &nbsp; &lt;div id=&quot;submenu&quot;&gt;&lt;a href=&quot;#&quot;&gt;Unterpunkt&lt;/a&gt;&lt;/div&gt;</p><p>&nbsp; &nbsp; &nbsp; &nbsp; &lt;div id=&quot;submenu&quot;&gt;&lt;a href=&quot;#&quot;&gt;Unterpunkt&lt;/a&gt;&lt;/div&gt;</p><p>&nbsp; &nbsp; &nbsp; &nbsp; &lt;div id=&quot;submenu&quot;&gt;&lt;a href=&quot;#&quot;&gt;Unterpunkt&lt;/a&gt;&lt;/div&gt;</p><p>&nbsp; &nbsp; &nbsp; &nbsp; &lt;div id=&quot;submenu&quot;&gt;&lt;a href=&quot;#&quot;&gt;Unterpunkt&lt;/a&gt;&lt;/div&gt;</p><p>&nbsp; &nbsp; &nbsp; &nbsp; &lt;div id=&quot;submenu&quot;&gt;&lt;a href=&quot;#&quot;&gt;Unterpunkt&lt;/a&gt;&lt;/div&gt;</p><p>&nbsp; &nbsp; &nbsp; &nbsp; &lt;div id=&quot;submenu&quot;&gt;&lt;a href=&quot;#&quot;&gt;Unterpunkt&lt;/a&gt;&lt;/div&gt;</p><p>&nbsp; &nbsp; &lt;/div&gt;</p><p>&nbsp; &nbsp; &lt;div id=&quot;mainmenu&quot;&gt;&lt;a href=&quot;#&quot; onclick=&quot;toggle(&#039;submenu2&#039;)&quot;&gt;Thema 2&lt;/a&gt;&lt;/div&gt;</p><p>&nbsp; &nbsp; &lt;div id=&quot;submenu2&quot; style=&quot;display:none&quot;&gt;</p><p>&nbsp; &nbsp; &lt;div id=&quot;submenu&quot;&gt;&lt;a href=&quot;#&quot;&gt;Unterpunkt&lt;/a&gt;&lt;/div&gt;</p><p>&nbsp; &nbsp; &lt;div id=&quot;submenu&quot;&gt;&lt;a href=&quot;#&quot;&gt;Unterpunkt&lt;/a&gt;&lt;/div&gt;</p><p>&nbsp; &nbsp; &lt;/div&gt;</p><p>&nbsp; &nbsp; &lt;div id=&quot;mainmenu&quot;&gt;&lt;a href=&quot;#&quot; onclick=&quot;toggle(&#039;submenu3&#039;)&quot;&gt;Thema 3&lt;/a&gt;&lt;/div&gt;</p><p>&nbsp; &nbsp; &lt;div id=&quot;submenu3&quot; style=&quot;display:none&quot;&gt;</p><p>&nbsp; &nbsp; &lt;div id=&quot;submenu&quot;&gt;&lt;a href=&quot;#&quot;&gt;Unterpunkt&lt;/a&gt;&lt;/div&gt;</p><p>&nbsp; &nbsp; &lt;div id=&quot;submenu&quot;&gt;&lt;a href=&quot;#&quot;&gt;Unterpunkt&lt;/a&gt;&lt;/div&gt;</p><p>&nbsp; &nbsp; &lt;/div&gt;</p><p>&nbsp; &nbsp; &lt;div id=&quot;mainmenu&quot;&gt;&lt;a href=&quot;#&quot;&gt;Thema 4&lt;/a&gt;&lt;/div&gt;</p><p>&nbsp; &nbsp; &lt;div id=&quot;submenu5&quot; style=&quot;display:none&quot;&gt;</p><p>&nbsp; &nbsp; &lt;/div&gt;</p><p>&nbsp; &nbsp; &lt;div id=&quot;mainmenu&quot;&gt;&lt;a href=&quot;#&quot;&gt;Thema 5&lt;/a&gt;&lt;/div&gt;</p><p>&nbsp; &nbsp; &lt;div id=&quot;submenu6&quot; style=&quot;display:none&quot;&gt;</p><p>&nbsp; &nbsp; &lt;/div&gt;</p><p>&nbsp; &nbsp; &lt;div id=&quot;mainmenu&quot;&gt;&lt;a href=&quot;#&quot;&gt;Thema 6&lt;/a&gt;&lt;/div&gt;</p><p>&nbsp; &nbsp; &lt;div id=&quot;submenu7&quot; style=&quot;display:none&quot;&gt;</p><p>&nbsp; &nbsp; &lt;/div&gt;</p><p>&nbsp; &nbsp; &lt;div id=&quot;mainmenu&quot;&gt;&lt;a href=&quot;#&quot;&gt;Thema 7&lt;/a&gt;&lt;/div&gt;</p><p>&nbsp; &nbsp; &lt;div id=&quot;submenu8&quot; style=&quot;display:none&quot;&gt;</p><p>&nbsp; &nbsp; &lt;/div&gt;</p><p>&nbsp; &nbsp; &lt;div id=&quot;mainmenu&quot;&gt;&lt;a href=&quot;#&quot;&gt;Thema 8&lt;/a&gt;&lt;/div&gt;</p><p>&nbsp; &nbsp; &lt;div id=&quot;submenu9&quot; style=&quot;display:none&quot;&gt;</p><p>&nbsp; &nbsp; &lt;/div&gt;</p><p>&nbsp; &nbsp; &lt;/div&gt;</p><p></p><p>CSS:</p><p>#menu {</p><p>&nbsp; &nbsp; font-family: Verdana, Arial, Helvetica, sans-serif;</p><p>&nbsp; &nbsp; font-size: 10px;</p><p>&nbsp; &nbsp; font-weight: normal;</p><p>&nbsp; &nbsp; left: 20px;</p><p>&nbsp; &nbsp; top: 20px;</p><p>&nbsp; &nbsp; }</p><p></p><p>&nbsp; &nbsp; #menu #mainmenu a {</p><p>&nbsp; &nbsp; color: #FFFFFF;</p><p>&nbsp; &nbsp; text-decoration: none;</p><p>&nbsp; &nbsp; display: block;</p><p>&nbsp; &nbsp; background-color: #990066;</p><p>&nbsp; &nbsp; padding-top: 2px;</p><p>&nbsp; &nbsp; padding-right: 5px;</p><p>&nbsp; &nbsp; padding-bottom: 2px;</p><p>&nbsp; &nbsp; padding-left: 5px;</p><p>&nbsp; &nbsp; width: 150px;</p><p>&nbsp; &nbsp; position:relative;</p><p>&nbsp; &nbsp; }</p><p></p><p>&nbsp; &nbsp; #menu #mainmenu a:hover {</p><p>&nbsp; &nbsp; background-color: #CC6699;</p><p>&nbsp; &nbsp; }</p><p></p><p>&nbsp; &nbsp; #menu #submenu a {</p><p>&nbsp; &nbsp; color: #FFFFFF;</p><p>&nbsp; &nbsp; text-decoration: none;</p><p>&nbsp; &nbsp; display: block;</p><p>&nbsp; &nbsp; background-color: #CC0066;</p><p>&nbsp; &nbsp; padding-top: 2px;</p><p>&nbsp; &nbsp; padding-right: 5px;</p><p>&nbsp; &nbsp; padding-bottom: 2px;</p><p>&nbsp; &nbsp; padding-left: 5px;</p><p>&nbsp; &nbsp; width: 135px;</p><p>&nbsp; &nbsp; left: 15px;</p><p>&nbsp; &nbsp; position:relative;</p><p>&nbsp; &nbsp; }</p><p>&nbsp; &nbsp; </p><p>&nbsp; &nbsp; #menu #submenu a:hover {</p><p>&nbsp; &nbsp; background-color: #CC6699;</p><p>&nbsp; &nbsp; }</p><p></p><p></p><p>JAVASCRIPT:</p><p>function toggle(submenu) {</p><p>&nbsp; &nbsp; if (document.getElementById(submenu).style.display == &quot;none&quot;)</p><p>&nbsp; &nbsp; document.getElementById(submenu).style.display = &quot;block&quot;;</p><p>&nbsp; &nbsp; else if (document.getElementById(submenu).style.display == &quot;block&quot;)</p><p>&nbsp; &nbsp; document.getElementById(submenu).style.display = &quot;none&quot;</p><p>&nbsp; &nbsp; else alert(&quot;An error occured in the menu. Contact the web master.&quot;);</p><p>&nbsp; &nbsp; }</p><p></p><p>Also wenn man jetzt auf einen Unterpunkt klickt, sollen sich weitere Unterpunkte öffnen und schließen lassen <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="smilie smilie--sprite smilie--sprite1" alt=":)" title="Smile&nbsp; &nbsp; :)" loading="lazy" data-shortname=":)" /></p><p>Ich hoffe mir kann da jemand helfen !</p></blockquote><p></p>

[QUOTE="Elaii, post: 2236152, member: 638001"] 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 ! [/QUOTE]

Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.

Authentifizierung

Wenn ▲ = 5, ▼ = 2 und ■ = 7, was ist ▲ × ▼ + ■?