Warum funktioniert mein Dropdown Menü nicht?

Hallo könnte sich bitte einmal jemand meinem Code ansehen?
Wenn ich über den Menü Punkt Hover wird das Untermenü nicht angezeigt.
Ebenso wenn ich in der mobile Version auf das Hamburger Icon klicke
Ich finde den Fehler einfach nicht.

Link zum Code https://codepen.io/Bastian_code21/pen/YzKooXY

Danke schonmal!

1 Antwort

regex9

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, Technik, HTML

01.10.2019, 18:03

Dein Markup ist falsch. Die Sublisten müssen mit im jeweiligen Listeneintrag stehen.

<!-- ... -->
<li>
  <a href="#">Über uns <i class="fa fa-sort-desc"></i></a>
  <ul>
    <li><a href="#">Grundsätze des RK</a></li>
    <!-- ... -->
  </ul>
</li>
<!-- ... -->

01Basti21

Fragesteller

01.10.2019, 18:26

Hey Vielen Dank jetzt funktioniert es. Das Mobile Menu geht leider immer noch nicht, es zeigt keine Reaktion auf den Klick

regex9

01.10.2019, 18:36

@01Basti21

So wie ich das sehe, hast du nirgendwo jQuery eingebunden.

01Basti21

Fragesteller

01.10.2019, 18:46

@regex9

Vielen Vielen Dank es funktioniert :D

Ähnliche Fragen

Dropdown Menü mit Links - HTML?

Ich möchte gerne ein Dropdown Menü auf meiner Webseite einfügen, in den man verschiedene links in den "Auswahlfeldern" hat.

Gemeint:

[Dropdown Menü]
[Link 1]
[Link 2]
[Link 3]
[Link 4]
[Link 5]

Wie kann ich es machen das diese Links funktionieren?

Könnt ihr mir eine Beispiele Code zeigen?

Geht das in HTML?

...zur Frage

Dropdown Menü springt andauernd auf die erste Auswahl zurück - wie kann ich das verhindern?

Ich habe schon an mehreren Stellen nach einer Antwort gesucht, aber keiner konnte mir weiter helfen. Und zwar geht es um eine Software, die ich auf meinem Webspace verwende. Dort gibt es ein paar Dropdown Menüs mit Auswahlmöglichkeiten (Bearbeitungsbereich von einem Userprofil). Soweit, so gut. Wenn ich jetzt aber einen Punkt auswähle und auf "speichern" klicke, springt die Auswahl in dem Dropdown Menü zurück auf den ersten Punkt, sodass ich ihn auf die nächste Bearbeitung erneut auswählen muß. Das will ich aber nicht, denn auf Dauer wird das richtig nervtötend. Ich möchte, dass die zuletzt gesetzte Auswahl abgespeichert wird, sodass ich das bei der Bearbeitung nicht ständig vom neuen setzen muß.

Aber wo kann ich in der Programmierung den Befehl dafür setzen?

Bisher habe ich nur mit CSS Dropdown Menüs gearbeitet, aber soweit ich heraus gefunden habe, läuft dieses hier über JavaScript (hatte noch nie damit zu tun, ist - zumindest im Bereich Dropdown Menü - totales Neuland für mich). Dazu habe ich eine (die einzige) Datei gefunden, wo es einen Befehl dafür gibt, nur leider werde ich nicht so ganz schlau daraus. Vielleicht hat mir ja einer einen Rat dazu? Hier der Ausschnitt:

function(a){var c="dropdown",f="4.0.0",g="bs.dropdown",h="."+g,i=".data-api",j=a.fn[c],k={HIDE:"hide"+h,HIDDEN:"hidden"+h,SHOW:"show"+h,SHOWN:"shown"+h,CLICK:"click"+h,CLICK_DATA_API:"click"+h+i,KEYDOWN_DATA_API:"keydown"+h+i},l={BACKDROP:"dropdown-backdrop",DISABLED:"disabled",OPEN:"open"},m={BACKDROP:".dropdown-backdrop",DATA_TOGGLE:'[data-toggle="dropdown"]',FORM_CHILD:".dropdown form",

Ich bin für jede Hilfe dankbar! Denn so langsam verzweifle ich daran.

...zur Frage

Wie kann man 2 Menüs erstellen das für Desktop und Mobile funktioniert?

In der einen sollen ein Menüs das für Mobile design ist mit "Hamburger" Schaltfläche und da soll per Fullscreen das Menü zu sehen sehen (Mit Dropdown das wenn man ein anderen Hovered wieder zusammenfährt.)

Und ab 1028 x () soll dann das Menü für die Desktop Anwendung zusehen sein das per Mega Menü Angebote oder sonst noch Links anbietet (wenn man darauf hovered).

(Ich weis das man den Browser verkleinern kann, das soll nicht das Problem sein. Es soll auch die gleichen Links sein nur das man im Desktop Menü halt noch Bilder und Text sehen kann)

Ich hoffe man kann mir irgendwie helfen dieses Problem zu lösen.

Weil ich komme momentan echt nicht weiter.

...zur Frage

Responsives Webseiten-Menü nur mit HTML5/CSS?

Ich habe eine Webseite (http://hobbyfunk.de), welche bereits ein responsives Menü nutzt - die Ansichtumschaltung zwischen Dekstop und Mobile funktioniert. Nur: Das Menü sieht im Mobile k*cke aus ;-) Ich würde es dort gerne auf ein Hamburger-Menü umstellen.

Ich bitte um Hilfe und Unterstützung in dieser Angelegenheit. Ich kann gerne HTML und CSS zuschicken, aber nicht hier öffentlich.

Ich versuche das schon seit zwei Tagen, komme aber einfach nicht klar damit. Egal welches Beispiel ich im Netz gefunden haben und welches ich versuche zu adaptieren - immer klappt irgendwas nicht.

Ja, ich kann lesen, ja ich kann im Netz suchen, und ja ich habe schon einiges gefunden. Wenn dem nicht so wäre, würde ich hier nicht um Hilfe rufen ;-)

...zur Frage

Jimdo: mobiles Menü ("Hamburger") für Tablet aktivieren?

Hallo Welt,

weiß jemand wie ich per Script oder CSS das mobile Menü ("Burger-Menü") auch schon für Tablets anzeigen lasse, und nicht nur für Smartfones?

Grüße, Tho

...zur Frage

DropDown-Kästchen bei CSS nach Bildschirm anpassen?

Schönen guten Abend,

ich würde gerne mein DropDown-Menü so ändern, dass er auf die Bildschirmgröße angepasst ist. Kann mir da wer einer helfen?.

Mein bisheriger code für die Boxen des Menüs:

...zur Frage

HTML Javascript funktioniert nicht?

Hey Leute,

Ich versuche gerade einen Random Name Generator mit HTML/Javascript zu erstellen. Ich bin relativ neu, was das Thema Javascript angeht.
Ich habe mir einfach mal einen Beispielcode für einen Random Name Generator geholt und versucht das ganze selbst zu machen. Allerdings bekomme ich es nicht hin, dass Javascript mitspielt. Es passiert einfach nichts trotz Javascript. Wenn ich den ganze Code via codepen.io laufen lassen, funktioniert es einwandfrei. Hier mal der codepen.io link: https://codepen.io/Johnny3_3/pen/Exjdxom

Hier der Code, den ich in meiner HTML Datei/Javascript Datei stehen habe.

HTML:

Javascript:

...zur Frage

HTML/CSS: Wie kann ich diesem Slider einen Text hinzufügen?

Hi,

würde gerne bei diesem Slider: https://codepen.io/valaxin/pen/jmEBL

Text (mit Überschrift) an die rechte Seite stellen, der sich mit jedem Bild ändert. Wie muss ich den Code dafür ändern?

...zur Frage

Wie lasse ich ein Bild in CSS einem DIV-Element überlappen?

Hallo,

ich veranstalte bald eine Reihe von Gewinnspielen anlässlich des 10-jährigen Bestehens. Über die volle Breite des Bildschirms soll am unteren Rand fixiert eine Leiste zu sehen sein, mit der man schnell per Klick zum Gewinnspiel kommt.

Links im DIV soll ein Bild von einem Luftballon zu sehen sein, der dann sozusagen über dem DIV "schwebt"; also die Styles des DIVs nicht übernimmt, sondern transparent einfach darüber liegt.

Ich habe jetzt folgenden Codepen: https://codepen.io/gooloonetwork/pen/KKvXoMO

Aber irgendwie sieht man das Bild nicht. Hat jemand einen Tipp, wie ich es hinbekomme, dass das Bild zu sehen bleibt (und vielleicht auch eine Idee, wie sich Bild und Text nicht beißen, also der Text aus dem ersten DIV nicht aus Versehen in den Hintergrund des Bilds schwappen)?

...zur Frage

Html und Css; Wieso wird der Text am Ende als Link dargestellt?

Hallo,

es geht um folgenden Code:

<!doctype html>
<html lang="de">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="widt=device-width, initale-scale=1">
        <meta name="description" content="Beschreibung">
        <title>Test html Grundgeruest</title>
    </head>
    <body>
    </body>
</html>

</br>
</br>
</br>

ERSTELLUNG EINES LINKS</br>
<a href="irgendwohin.html">Hier Klicken</a>
Nach "href=" steht die Datei, die aufgerufen werden soll, diese muss in Gänsefüsschen stehen.</br>
"Hier Klicken" ist der für den Benutzer sichtbare Text, der angeklickt </br>
werden soll. Achtung Attribute wie href stehen immer nur im Start-Tag, nie im End-Tag.</br>
</br>
</br>
</br>

EINFÜGEN VON BILDERN</br>
<img src="https://localhost/Schulung_Html_und_Css/Html/Vorgang_02_HTML_Grundgeruest/Bilder/test.jpeg" alt="kurzbeschreibung" width="50px" height="50px">
</br>
</br>



    <!--
    - Beachte dass das Bild im selben Ordner liegen muss oder ein eindeutiger Link erzeugt werden muss.
    Wobei darauf zu achten ist, in welche die "/" schauen.
    -->
</br>
</br>
</br>
</br>



<p> Hier kann ein Text dargestellt werden </P>
<p> Hier kann ein weiterer Text dargestellt werden </p>
    <!--
    - Hat den Vorteil dass mit einem Stylesheet alle mit <p> gekennzeichneten "Container" mit einer Eingabe oder Umstellung Formatiert werden können.
    -->



<ul>
    <li><a href="https://www.google.com/">Google</></li>
    <li><a href="https://www.youtube.com/">Youtube</></li>
    <li><a href="https://www.bing.com/">Bing</></li>
    <li><a href="https://www.y-informer.com">y-informer.com</></li>
</ul>    

</br>
</br>
</br>

<p> Dies ist die Xampp installation</p>


    <!-- so wird ein Kommentar eingefügt. Dieser ist für den Besucher der Webseite nicht lesbar.
        Innerhalb des kommentars können auch html Befehle  eingegeben werden. Diese sollen zumindest
        keine auswirkungen auf die Eingabe haben.
        
        - Fehler der mir unterlaufen ist. Beim Einfügen von Bildern, sofern dieser im selben Ordner liegt muss hinter dem
        <img src noch ein "=" Zeichen. Wenn das Bild in einem leserlichen Format ist klappt es.
        -- Sofern das Bild an einem anderen Ort liegt, klappt es aber nicht, an der Lösung wird noch gearbeitet.
        
        Beachte:
        - Dateifadsangaben im internet -> "/"
        - Dateifadsangaben im Betriebssystem -> "\"
        - Die Angabe "localhost" beinhaltet bereits die "htdocs" entsprehcend ist im weiteren nur noch der Projektordner anzugeben.
        
        Merke: bei dem eigentlichen Turtorial:
        - Die Xamp Installation und Konfiguration durchgehen
        - kurze einführung wie das funktioniert mit dem Webspace -> PC -> Server -> Webspace -> Domain und so weiter.
        
    -->

Wenn ich mir den Code im Browser ansehe wird der Teil unten:


<p> Dies ist die Xampp installation</p>

als Link dargestellt wieso ist das so?

...zur Frage

Wie kann man mit CSS etwas "ausblenden"?

Ich habe mir ein Kontextmenü gebaut, dass auch Untermenüs hat:

https://jsbin.com/vaxayibeme/1/edit?html,css,output

Die Untermenüs sollen zur Benutzerfreundlichkeit mit einer Fade-Animation ein- und ausgeblendet werden, dass wenn man ein paar Millisekunden außerhalb war mit der Maus wieder rein gehen kann, um es offen zu halten.

Wenn man mit der Maus in diesem Bereich ist:

öffnen sich allerdings gleich die beiden Untermenüs Darüber/Darunter. Das ist vor allem am Handy problematisch, weil man dort nur mit Klicks steuert. So kann es leicht vorkommen, dass man versehentlich etwas einfügt, wenn man nur das Menü wegdrücken wollte (oder den Typ ändert und damit potentiell Daten löscht).

Die Einträge, die nicht aktiv sind, habe ich mit opacity: 0 ausgeblendet (weil man das mit transition animieren kann, um diesen Fade-Effekt zu bekommen). Das hat aber natürlich den Nachteil, dass es nur "unsichtbar" ist aber immer noch klickbar.

Vorher hatte ich es mit display: none versteckt, dass es auch wirklich weg ist allerdings kann man das nicht animieren, was es weniger benutzerfreundlich macht.

Hat jemand eine Idee, wie man die Untermenüs mit CSS ausblenden könnte? (muss nicht unbedingt der Fade-Effekt sein, nur irgendwie dass sie nicht mehr aus Versehen geöffnet werden können also dass man mit der Maus in dem Bereich aus Bild 2 sein kann ohne dass es geöffnet wird).

Code für alle die nicht auf JS Bin gehen wollen füge ich gleich an (ist sonst zu lang).

...zur Frage

Denselben Drowdown-Punkt in mehreren Excel-Zeilen zugleich mit weniger Aufwand auswählen?

Kann ich in einer Exceltabelle, die in einer Spalte in jeder Zeile dasselbe Dropdown-Menü besitzt mehrere Zeilen bzw Zellen pro Spalte markieren und für alle mit einem / weniger Klicks denselben Dropdown-Punkt auswählen? Wenn ich also in A1; A4, A5; A8; A21;A26 usw. denselben Punkt aus dem Dropdown-Menü auswählen und dabei Zeit (und Nerven) sparen möchte.. Kennt jemand einen Trick? Ich muss nämlich teilweise bis zu 350 Zeilen bearbeiten und möchte nicht in jeder Zeile einzeln das Dropdown-Menü öffnen müssen.

...zur Frage

Clickfunnel: Wieso funktioniert nur jedes zweite JavaScript-Element?

Ich habe in meinem ClickFunnel vier JavaScript-Elemente. Sie sind nicht direkt hintereinander, aber genau gleich gecodet.

Es handelt sich dabei um Dropdown-Elemente.

Mein Problem ist, dass das erste und dritte Element problemlos funktioniert, aber das zweite und vierte nicht. Da kommt kein Dropdown, wenn ich darauf klicke, obwohl alle Elemente gleich gecodet sind.

Woran könnte das liegen? Stehen die einander vielleicht im Weg? Ich kann es auch leider nicht anders machen, da zwischen den Elementen Bilder sind, die dazu gehören.

Hier mein Code (HTML / JS) von einem Element:

<div class="all4">
  <div class="obj">
    <button class="Produkte" style="margin-right: 1vw;">Kompressor</button>
    <div class="panel">
      <p>
        Tankinhalt: 2 × 50 Liter</br>
        Energiequelle: Honda 4Takt GX200 bleifrei</br>
        Antrieb: Riemen</br>
        Atom. Standgas: Ja</br>
        Start: Zugseil</br>
        Abgabeleistung: 490 Liter Minute bei 12 bar</br>
        Abgabeleistung: 550 Liter Minute bei 6 bar</br>
        Max. Druck: 12 bar</br>
        Abmessungen: 95cm × 51cm × 85cm (ohne Transportgriffe)</br>
        Gewicht: ca. 75 Kg</br>
        Lärm: ca. 95 Db</br>
        Garantie: 1 Jahr</br>
      </p>
    </div>
  </div>
  <script>
    var acc = document.getElementsByClassName("Produkte");
    var i;

    for (i = 0; i < acc.length; i++) {
      acc[i].addEventListener("click", function() {
        this.classList.toggle("active");
        var panel = this.nextElementSibling;

        if (panel.style.display === "block") {
          panel.style.display = "none";
        }
        else {
          panel.style.display = "block";
        }
      });
    }
  </script>

...zur Frage

Chrome Extension - Javascript Code nach öffnen eines Tabs ausführen?

Hallo Leute, ich brauche mal kurz eure Hilfe. Wie kann ich bei Chrome Extensions nach dem öffnen eines Tabs ein Javascriptcode auf dieser Seite ausführen?

Hier unten im Link seht ihr meinen momentanen Stand.

Im HTML Code befindet sich die manifest.json
Im JS Code die background.js

http://codepen.io/anon/pen/JKAkaN

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen