Dropdown mit eigenem Link (nur css + html)

[diviti]

Hallo,

ich habe mir ein schönes Navigationsmenü zusammengebaut, mit dem ich ganz zufrieden bin. Aber ein Problem habe ich noch:

Beim Dropdown-Menü möchte ich auch das Parent-Element (also den Dropdown-Button) mit einem Link auf "seite2.html" versehen.

Ich würde mich sehr über eine Hilfe freuen!

Hier der Ausschnitt aus der HTML-Datei:

    <nav class="topnav">
      <a href="seite1.htm">Seite 1</a>
      <nav class="dropdown">
        <button class="dropbtn">Seite 2<i class="fa fa-caret-down"></i></button>
        <nav class="dropdown-content">
          <a href=link1.htm>Link 1</a>
          <a href=link2.htm>Link 2</a>
        </nav>
      </nav>
      <a href="seite3">Seite 3</a>
    </nav> 

Hier noch die (vielleicht) wichtigen CSS-Zeilen:

.dropdown {
    float: left;
    overflow: hidden;
}
.dropdown-content {
    display: none;
    position: absolute;
    background-color: black;
}
.dropdown-content a {
    float: none;
}
.dropdown:hover .dropdown-content {
    display: block;
}

[marctrix]

Hej diviti,

Beim Dropdown-Menü möchte ich auch das Parent-Element (also den Dropdown-Button) mit einem Link auf "seite2.html" versehen.

Hier der Ausschnitt aus der HTML-Datei:

    <nav class="topnav">
      <a href="seite1.htm">Seite 1</a>
      <nav class="dropdown">
        <button class="dropbtn">Seite 2<i class="fa fa-caret-down"></i></button>
        <nav class="dropdown-content">
          <a href=link1.htm>Link 1</a>
          <a href=link2.htm>Link 2</a>
        </nav>
      </nav>
      <a href="seite3">Seite 3</a>
    </nav> 

Hmm - wo ist das Problem, statt button einfach a zu nehmen?

Davon abgesehen verwendest du das nav-Element nicht korrekt. So kann man das leider nciht einsetzen. Es ist ein Container für die Hauptnavigation, in der Regel benötigst du daher auch keine Klasse wie topnav, weil die Mehrzahl der Seiten nur eine Hauptnavigation hat.

Darin solltest du die Links dann in einer verschachtelten ul organisieren.

Ich persönlich würde übrigens auf presentational Markup <i class="fa fa-caret-down"></i>verzichten und es gibt viele Gründe für SVGs statt Icon-Fonts.

Die Macher von Fontawesome wissen das natürlich auch und darum bieten die auch die Möglichkeit, SVG-Sprites statt die Font-Variante zu nehmen.

Marc

[Gunnar Bittersmann]

@@diviti

ich habe mir ein schönes Navigationsmenü zusammengebaut, mit dem ich ganz zufrieden bin.

Damit solltest du nicht zufrieden sein, denn die Nutzer deiner Seiten sind es nicht. Das Menü ist für etliche Nutzer nicht bedienbar. Nur für einen sehr eingeschränkten Nutzerkreis, die eine Maus verwenden. Nicht auf Touch-Geräten; nicht mit Tastaturbedienung.

Ein Pull-down-Menü funktioniert nur mit JavaScript.

(Es sei denn mit :focus-within, d.h. nicht in Edge und IE. Wie man an diesem Beispiel sieht, kann von „funktionieren“ da auch keine Rede sein: Um vom 24. ins 25. Jahrhundert zu gelangen, muss man per Tastatur durch sämtliche Untermenüs durchtabben. Nicht machen. Ein Pull-down-Menü funktioniert nur mit JavaScript.)

LLAP 🖖

[beatovich]

hallo

Beim Dropdown-Menü möchte ich auch das Parent-Element (also den Dropdown-Button) mit einem Link auf "seite2.html" versehen.

Und was soll entscheiden, ob der Button gerade die Funktion "öffne Box" oder die Funktion "navigiere festgelegten Link" ausführt?

[Rolf B]

Hallo beatovich,

.dropdown:hover

Ich hätte da eine Idee, was er vorhat.

Rolf

[beatovich]

hallo

Hallo beatovich,

.dropdown:hover

Ich hätte da eine Idee, was er vorhat.

Das ist kaum das Code-Gemüse wert

<nav>
  <a href="1">... 
  <ul>
     <li><a href="1a"> ...

Da reicht

nav:focus-within a:focus, nav ul:focus-within {}

Dann haben mindestens Mäuse UND Tastaturen etwas davon.