Ankündigung

Einklappen
Keine Ankündigung bisher.

ul Flyout funktion

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • ul Flyout funktion

    Hallo Leute,

    ich bin derzeit dabei ein neues Design für einen WP-Blog zu schreiben. Dabei habe ich vor einen Effekt der Seite spd.de zu nutzen.

    Das Top Menü scheint sich unter der ersten ul ebene herauszuschieben, wenn es sichtbar wird.

    Wie nennt sich dieser Effekt und wie kann ich diesen Effekt nachbauen?

    Das würde mich sehr interessieren, vielen Dank für eure Antworten.

    Gruß Sven
    irgendwann werde ich auch helfen können - vielleicht.


  • #2
    Die Unordered List hält nur relativ positioniertes Elemente die als Anker für die Flyouts, die jeweils absolut in den relativ positionierten Li's liegen, fest. Das ist auch schon die ganze "DOM-Magie" dahinter. Der rest ist ein Fade-In / Slide-In. Kriegt man theoretisch gänzlich ohne Javascript hin.
    [URL="https://gitter.im/php-de/chat?utm_source=share-link&utm_medium=link&utm_campaign=share-link"]PHP.de Gitter.im Chat[/URL] - [URL="https://raindrop.io/user/32178"]Meine öffentlichen Bookmarks[/URL] ← Ich habe dir geholfen ? [B][URL="https://www.amazon.de/gp/wishlist/348FHGUZWTNL0"]Beschenk mich[/URL][/B].

    Kommentar


    • #3
      eine reine css lösung wäre mir in der tat lieber. aber dienen satz hab ich nicht ganz auseinanderdividieren können^^

      vielleicht kannst du mir ein kleines beispiel geben, da ich meine lists nicht relativ positioniert habe.

      hier ist meine blogbaustelle, vielleicht kannst du dir das ja kurz anschauen. http://www.spd-bernkastel-wittlich.de/wp2/
      irgendwann werde ich auch helfen können - vielleicht.

      Kommentar


      • #4
        Klar: http://jsfiddle.net/tRq5G/
        [URL="https://gitter.im/php-de/chat?utm_source=share-link&utm_medium=link&utm_campaign=share-link"]PHP.de Gitter.im Chat[/URL] - [URL="https://raindrop.io/user/32178"]Meine öffentlichen Bookmarks[/URL] ← Ich habe dir geholfen ? [B][URL="https://www.amazon.de/gp/wishlist/348FHGUZWTNL0"]Beschenk mich[/URL][/B].

        Kommentar

        Lädt...
        X