• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Dropdown menu

kaepten

kaepten

Mitglied
Hallo,

ich hätte gerne ein Dropdown menu meiner Seite. Jedoch habe ich mein Menu ohne <ul> und <li>

Jetzt habe ich dieses Tutorial gefunden
http://www.silent-fran.de/css/tutorial/aufklappmenue.html

Ich wollte es auch so machen. Nur leider klappt das nicht so wie bei mir

Code: 
    <nav>
      
            <a href="index.html">Home</a>
            <a href="">Testberichte</a>
            <a href="">Tipps & Tricks</a>
            <a class="active" href="faq.html">FAQ</a>
            <a href="kontakt.html">Kontakt</a>
        </nav>


am besten schaut ihr euch das hier mal an --> https://jsfiddle.net/v5oxmg3a/

Aber jetzt zu meiner Frage wie kann ich bei "Testberichte" ein Dropdownmenü einfügen ???? Ohne Aufzählungszeichen
 
Werbung:
Was hast du gegen eine Aufzählung? Ohne dem wird's wohl nicht gehen.
 
Werbung:
Wenn's Dir letztlich darum geht, die Navigation ohne Aufzählungszeichen zu präsentieren:
CSS: 
ul {list-style:none}
Auf JavaScript sollte weitesgehend verzichtet werden, insbesondere bei einem Dropdown-Menü, das sich heutzutage problemlos mit CSS realisieren lässt - halt mit einer verschachtelten Listenelement-Struktur (siehe Dein verlinktes Tutorial).
 
Zuletzt bearbeitet:
Werbung:
Hallo

Eine Liste ist nicht notwendig. Das Drop-Down-Menü kann auch in einen Container (zum Beispiel div) hinter den entsprechenden Menüpunkt geschrieben und dann mittels CSS aus- und eingeblendet werden. Das kann dann im Quelltext so ausschauen:

Code: 
<body>
   <nav>
      <a href="">Home</a>
      <a href="">Testberichte</a>
      <div>
         <a href="">VW</a>
         <a href="">Opel</a>
         <a href="">Ford</a>
         <a href="">Trabant</a>
         <a href="">Wartburg</a>
      </div>
      <a href="">Tipps &amp; Tricks</a>
      <a href="">FAQ</a>
      <a href="">Kontakt</a>
   </nav>
</body>

Wobei natürlich die grundsätzlichen Probleme eines Drop-Down-Menüs bei Touchscreens immer bedacht werden sollten. Touchscreens wie Smartphones und Tablets aber auch andere kennen schließlich keinen hover-Effekt. Das wird von Webseitenerstellern vor ihren großen Desktop-Monitoren leider immer wieder vergessen. Spätere Anpassungen sind teils sehr aufwändig.

Gruss

MrMurphy
 
Danke MrMurphy,
sowas habe ich gesucht.
Bin im großen Internet auf das hier gestoßen..
Code: 
.submenue
{
  display: none;
}

.submenue:hover
{
  display:block;
}

Nun meine frage, kannst du mir zeigen wie das gehen sollte das die Unterpunkt "ausfahren"
 
Werbung:
kaepten schrieb:
Bin im großen Internet auf das hier gestoßen..
Code: 
.submenue
{
  display: none;
}

.submenue:hover
{
  display:block;
}
Zum Vergrößern anklicken....
Ziemlich sinnfreier Code: die versteckte Klasse soll beim Überfahren derselbigen angezeigt werden.

Denk mal selbstkritisch darüber nach, wie das funktionieren soll ;)
kaepten schrieb:
Nun meine frage, kannst du mir zeigen wie das gehen sollte das die Unterpunkt "ausfahren"
Zum Vergrößern anklicken....
"Grundprinzip" für obige HTML-Struktur:
CSS: 
a + div {display:none}
a:hover + div {display:block}
 
MrMurphy schrieb:
Wobei natürlich die grundsätzlichen Probleme eines Drop-Down-Menüs bei Touchscreens immer bedacht werden sollten.
Zum Vergrößern anklicken....
Ich möchte mich mal hier einklinken, auch wenn meine Frage eigentlich nichts mit dem ursprünglichen Thema zu tun hat. Gilt deine Bemerkung auch die mit Bootstrap erstellten Drop-Down Menüs. Ich hoffe doch nicht, denn die heißen eigentlich nur so, nutzen aber nicht den hover, sondern blenden die Menüpunke mehr oder weniger dauerhaft ein.

Ich baue im Moment meine Seite auf Basis von Bootstrap um und was mir an meinem Design nicht gefällt (siehe meinen Test unter http://bootstrap.netaktiv.de) sind die folgenden 2 Punkte:
  1. Wird die Seite zu schmal, dann klappt das Menü oben um und nimmt mehrere Zeilen ein. Wäre da ein seitliches Scrollen nicht besser? Oder kann/sollte man das sonst anders machen?
  2. Ich gebe meiner Seite eine 100% Höhe mit Copyright unten. Wird die Seite zu schmal, dann stimmt aber der Abschluss unten wegen 1. nicht mehr, mein grauer Hintergrund ist zu kurz, da ich einen festen Wert für Höhe des Menüs angenommen habe. Der verdoppelt oder verdreifacht sich aber gar.
Sollte die Frage hier nicht passen, dann mache ich noch einen extra Punkt auf. Aber ich finde, das sind auch Folgen, die auf den Käptn zukommen können.

Grüße, Rainer
 
Werbung:
Spicelab schrieb:
Schau mal hier ...
Zum Vergrößern anklicken....
Ich sag's ja immer, im Vorteil ist, wer lesen kann, danke für den schnellen Hinweis. Wenn diese Doku nur nicht immer so umfangreich wäre :( aber dann könnte die Software auch weniger :)

Also das geht schon in die richtige Richtung und der Screenshot hier zeigt, was das Beispiel macht und was ich mir wünschen würde. Das Problem beim Beispiel ist, dass es auch 2-zeilig wird und dass es nach dem wieder 1-zeilig werden nur noch einen einzigen Menüpunkt zeigt. Ich würde mir wünschen, dass das Menü 1-zeilig bleibt und die Menüpunkte schrittweise im Hamburger Menü verschwinden. Ich nehme an, mit etwas Studium und Gefummel lässt sich das hoffentlich auch machen.
 

Anhänge

  • menu_rr.png
    menu_rr.png
    59,2 KB · Aufrufe: 5
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben