Mehrere Fragen Navbar /Dropdown /Toggle?

Also, warum wird das Dropdown-Menü nach rechts versetzt, obwohl ich

top: 100%;

und

left: 0;

gesetzt habe?

Außerdem ist das Menü in der mobilen Ansicht nicht zentriert. Woran liegt das?

Warum rutscht das Menü eigentlich nach unten, wenn ich in

ul li

das

margin

auf

setze?

Dann noch eine Frage: Wie kann ich das Menü-Dropdown nicht per

hover

, sondern per Klick öffnen?

Und wie kann ich es in der mobilen Version so gestalten, dass sich das Untermenü in neuen Spalten innerhalb der

column

öffnet und nicht über die anderen Menüeinträge legt?

Vielen, vielen Dank!

Ich wünsche euch einen schönen Tag!

1 Antwort

Mirko Marek

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Mediengestalter Digital und Print

12.02.2025, 11:27

Hi Trismegisto,

gerne will ich versuchen so gut wie möglich deine Fragen zu beantworten.

Die Versetzung nach rechts kann mehrere Ursachen haben. Das Dropdown ist möglicherweise innerhalb eines relative positionierten Elements, das nicht den gesamten Bereich abdeckt. Ein weiterer Grund könnte sein das es ein Padding oder Margin des Elternelements vorhanden ist, das den Dropdown-Container nach rechts verschiebt. Die Lösung ist das du dem übergeordneten li die Eigenschaft position: relativ; gibst.

Wenn dein Menü nicht zentriert angezeigt wird, kann man entweder text-align: center; verwenden oder Flexbox und dann mit justify-content: center; ausrichten.

Warum rutscht das Menü nach unten bei der Nutzung von margin: 0;

Das kann mehrere Gründe haben, aber der wesentliche Grund liegt daran das standardmäßig viele Browser ein bestehenden margin und padding. Das kann man beheben indem man diese auf Null setzt.

Du kannst Hover auch ausschalten und einen Klick-Event mithilfe eines Event Listener in JavaScript umsetzen. Das könnte so aussehen:

document.querySelectorAll(".dropdown-toggle").forEach(button => { button.addEventListener("click", () => { let dropdownMenu = button.nextElementSibling; dropdownMenu.classList.toggle("show"); }); });

Viel Erfolg

Woher ich das weiß:Berufserfahrung – Ich bin gelernter Mediengestalter Digital und Print(IHK)

Ähnliche Beiträge

DropDown-Menu Links für Handy?

wenn ich mein dropdown-menu habe, und ich will dass wenn sich dieses dropdown-menu öffnet und die kategorien zum auswählen bereitstellt, dass wenn ich auf die Kategorie klicke dann sich ein link öffnet, dies funktioniert mit meinem html code (auf der website version) perfekt, jedoch funktioniert dies nicht in der smartphone ansicht, warum das ?

Falls es hilft hier dier html-code

<!DOCTYPE html>

<head>

<title>Language Selection</title>

<style>

/* Dropdown Button */

.dropbtn {

font-size: 16px;

border: none;

}

/* The container <div> - needed to position the dropdown content */

.dropdown {

position: relative;

display: inline-block;

}

/* Dropdown Content */

.dropdown-content {

display: none;

position: absolute;

background-color: transparent;

min-width: 100px;

box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);

z-index: 1;

top: 100%;

left: 50%;

transform: translateX(-50%);

margin: 8px 0;

}

/* Links inside the dropdown */

.dropdown-content a {

color: transparent;

padding: 15px 13px;

text-decoration: none;

}

/* Change color of dropdown links on hover */

.dropdown-content a:hover {

background-color: transparent; /* Ändere die Hintergrundfarbe beim Hover */

}

/* Show the dropdown menu when hovering over the dropdown */

.dropdown:hover .dropdown-content {

display: block;

}

/* Keep the dropdown menu open when hovering over it */

.dropdown:hover .dropbtn {

background-color: transparent;

}

</style>

</head>

<body>

<div id="gtco-logo"><a href="index.html">Endo<em>scopy</em></a></div>

</div>

<ul>

<li><a href="#" data-nav-section="practice-areas">Anwendungsbereiche</a></li>

<li><a href="#" data-nav-section="technics">Operationstechniken</a></li>

<li><a href="#" data-nav-section="our-team">Unser Team</a></li>

<li class="btn-cta"><a href="#" data-nav-section="contact"><span>Kontakt</span></a></li>

<a href="#" class="dropbtn">Deutsch ∨</a>

<p><a href="italiano.html" class="italiano">Italiano</a></p>

<p><a href="english.html" class="english">English</a></p>

</div>

</li>

</ul>

</div>

</nav>

</div>

// JavaScript to handle dropdown menu clicks

document.addEventListener("DOMContentLoaded", function() {

var dropdownButtons = document.querySelectorAll(".dropdown .dropbtn");

var dropdownContents = document.querySelectorAll(".dropdown .dropdown-content");

// Function to toggle the dropdown content visibility

function toggleDropdown(index) {

if (dropdownContents[index].classList.contains("show")) {

dropdownContents[index].classList.remove("show");

} else {

dropdownContents[index].classList.add("show");

}

// Close dropdown content if clicked outside the dropdown

window.addEventListener("click", function(event) {

if (!event.target.matches('.dropbtn')) {

dropdownContents.forEach(function(content) {

content.classList.remove("show");

});

}

});

// Handle dropdown button clicks

dropdownButtons.forEach(function(button, index) {

button.addEventListener("click", function(event) {

event.stopPropagation(); // Prevent the document click event

toggleDropdown(index);

});

// Handle dropdown options clicks

var dropdownOptions = document.querySelectorAll(".dropdown-content a");

dropdownOptions.forEach(function(option) {

option.addEventListener("click", function(event) {

// Prevent default action

event.preventDefault();

// Redirect to the selected page

window.location.href = option.getAttribute("href");

});

</script>

</body>

</html>

...zum Beitrag

Bootstrap 5.3 Dropdown Pfeil?

Hallo, in einem Dropdown was ich mit Bootstrap erstelle wird der Pfeil unten statt auf der rechten Seite angezeigt

Hier ist der HTML Code von dem Toggle Button des Dropdowns:

<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
   <div class="d-flex">
      <span class="material-symbols-outlined">language</span>
      <span class="ms-2">Automatisch</span>
   </div>
</button>

Ich hab schon herausgefunden das der Fehler vom Div kommt, allerdings wenn ich das Div Entferne sieht es so aus:

Wie man sieht ist dort, dann allerdings das Icon nicht mehr Zentriert. Weiß jemand wie man entweder die Positionierung vom Dropdown Pfeil oder die Ausrichtung vom Icon in Ordnung bringen kann.

Vielen Dank schon mal im Voraus für jede Antwort!

...zum Beitrag

Wie erstelle ich ein Erweitertes Dropdown Menü in Google Docs?

Hallo Freunde der Sonne,

Ich habe erfolgreich ein Dropdown Menu in Google Docs erstellt. Meine Frage: Kann ich in der darauf folgenden Spalte ein sich darauf basierendes Dropdown Menu erstellen? Beispiel: Ich wähle aus Spalte A im Dropdown Menu unter folgenden Kategorien "Restaurants", "Partys", "Schwimbäder" nur die Kategorie "Restaurants" aus. Nun möchte ich in Spalte B ausschließlich nach den Subkategorien von "Restaurants" gefragt werden.

Geht das?

...zum Beitrag

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.

...zum Beitrag

Wer weiß wie Dropdown Menu in meinem Code?

Hey, suche den Simpelsten weg um hier ein Dropdown einzubauen, ausserdem ist der Code Generell ok so oder sollte ich eine andere Herangehensweise wählen?

Danke!

Ich hoffe der Link geht:

https://codepen.io/McCoer/pen/PwYMERp

...zum Beitrag

Google Tabelle Dropdown menü?

Hey ich möchte in Google Tabellen eine Liste erstellen mit abhängigen DropDown Menü oder wie das heißt ich versuche es mal zu erkären.

Spalte B stehen die Marken Apple Samsung LG

Spalte C-D-E stehen dann die Modelle

Ich möchte nun auf ein seperaten Tabellenblatt eine DropDown Liste erstellen wo in einer Spalte die Marken sind und in der anderen dann die Modelle das wenn ich die Marke Apple anklicke mir im Dropdown menü nur alle Apple Modelle angezeigt werden.

Ich hoffe das war verständlich und vtl kann mir ja einer helfen.

Liebe Grüße

...zum Beitrag

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!

...zum Beitrag

Automatisches Ausfüllen nach Dropdown-Mehrfachauswahl? Sverweis?

Hallo zusammen,

Ich habe eine Tabelle mit 3 voneinander abhängigen Spalten: Spalte A hat ein einfaches Dropdown-Menü (z.B. Länder), in Spalte B gibt es ein Dropdown-Menü, das abhängig von Spalte A verschiedene Werte zur Mehrfachauswahl anbietet (z.B. Städte aus dem Land in Spalte A). In Spalte C sollen nun automatisch Werte ausgegeben werden, die in Verbindung zu den Werten in Spalte B stehen (z.B. die Postleitzahl jeder der in Spalte B gelisteten Stadt, abgetrennt durch zb Kommas)

Spalten A und B habe ich soweit hinbekommen (Liste, Indirekt, VBA für Mehrfachdropdown), bei Spalte C bin ich ratlos. Der Sverweis gibt ja nur einen Wert aus, aber nicht mehrere als Bedingung von mehreren Werten in der Bezugszelle.

Ich hoffe, ihr versteht was ich meine und könnt helfen.

Viele Grüße

...zum Beitrag

HTML/CSS: Bestimmtes <li> nur collapsed menu zeigen?

"Startseite" verschwindet in der mobilen Ansicht aus dem Header und ist dann nur noch in der ausgeklappten Menü-Version verfügbar.
Ich möchte jetzt allerdings ein Element (ähnlich wie "Startseite") haben, das NUR in der collapsed-Version sichtbar ist. Könnt ihr mir da helfen?

...zum Beitrag

Gibt es so eine webseite?

Gibt es eine webseite bei der man seine eigene url eingeben kann, die webseite sie dann analysiert und dir dann zeigt was du noch wie für SEO optiomieren kannst?

...zum Beitrag

Karussell für Kleidungsstücke?

Hey, ich will eine Webseite programmieren und ein Kleidungskarussell erstellen.

Im Grunde so wie in diesem Video

Wie kann ich so etwas programmieren mit php, css, js & html? Brauche ich dafür libs?

Die Bilder hätte ich bereits

...zum Beitrag

Excel via Dropdown wert kopieren?

Hallo habe nochmal eine Frage zu Excel.

Würde gerne ein Dropdown Menü erstellen wo zb

PayPal und Bankeinzug drin ist.

Das Dropdownmenü habe ich hinbekommen.

Beispiel :

Dropdownmenü ist auf Spalte E7 // PayPal und Bankkonto

Spalte F7 Ist die Bankkonto Zahlstelle

Und Spalte G7 Ist PayPal Zahlstelle

In Spalte D7 ist der Geldwert, der via Dropdown entweder in F7 für das Bankkonto kopiert werden soll oder in G7 auf Paypal kopiert werden soll.

Sprich Wert „D7 --→ Dropdown --→ F7 Bankkonto

--→G7 PayPal

Gibt es da was an Formel ???

Randy

...zum Beitrag

Fehler bei password verify php?

Ich habe ein Testprogramm geschrieben, in dem man ein Passwort eingibt, dass dann gehasht in einer Datenbank gespeichert wird. Wenn ich mit dem Passwort vergleiche kommt aber nicht true sondern false raus. Das ganze habe ich in WebFTP gemacht.

Als Ausgabe bekomme ich:

123456789 $2y$10$4TMgUO3xGJMCy5iZnd6Be.TBRkIO2Z55GGwgQ5oeToD.ryJZAvvte Richtig In Datenbank übertragen $2y$10$4TMgUO3xGJMCy5iZnd6Be.TBRkIO2Z55GGwgQ5oeToD.ryJZAvvte Falsch Richtig übertragen

Bedeutet das gehashte Passwort wurde richtig gespeichert, aber passwort verify hat beim zweiten mal false zurück gegeben.

Hier ist der php Teil dazu:

<?php
if (isset($_POST["start"])) {
    $password = $_POST["password"];
    $email = $_POST["email"];
    echo $password . " ";
    $passwordHash = password_hash($password, PASSWORD_DEFAULT);
    echo $passwordHash . " ";
    if (password_verify($password, $passwordHash)){
        echo "Richtig ";
    }else{
        echo "Falsch ";
    }
    require_once "data.php"; //Hier wird die Datenbankverbindung gespeichert
    $statement = $pdo->prepare("INSERT INTO tab (email, password) VALUES (?, ?)");
    $statement->execute(array($email, $passwordHash));
    if ($statement){
        echo "In Datenbank übertragen ";
        $sql = "SELECT * FROM tab WHERE email='$email'";
        $user = $pdo->query($sql)->fetch();
        $passwordTest = $user["password"];
        echo $passwordTest . " ";
        if (password_verify($password, $passwordTest)){
            echo "Richtig ";
        }else{
            echo "Falsch ";
            if ($passwordHash == $passwordTest){
                echo "Richtig übertragen ";
            }else{
                echo "Falsch übertragen ";
            }
        }
        die();
    }else{
        die("Es ist etwas schief gelaufen");
    }
}
?>

...zum Beitrag

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.

...zum Beitrag

Was möchtest Du wissen?

Deine Frage stellen