1. Herzlich willkommen bei WPDE.org, dem grössten und ältesten deutschsprachigen Community-Forum rund um das Thema WordPress. Du musst angemeldet oder registriert sein, um Beiträge verfassen zu können.
    Information ausblenden

gedrehtes Menü mit Pointer

Dieses Thema im Forum "Design" wurde erstellt von viewpointmedia, 4. Oktober 2019.

  1. viewpointmedia

    viewpointmedia Active Member

    Registriert seit:
    22. Mai 2018
    Beiträge:
    42
    Zustimmungen:
    3
    Hi!

    Hat jemand eine Idee, wie ich das Menü wie im Anhang darstellen kann? Die Drehung des Textes ist mir klar, das setze ich mit "transform: rotate(-90deg)" um.

    Allerdings hab ich keine Idee, wie ich den Balken an den Text bekomme.

    Liebe Grüße aus Wien,
    Andreas
     

    Anhänge:

    • menu.png
      menu.png
      Dateigröße:
      5,8 KB
      Aufrufe:
      8
  2. r23

    r23 Well-Known Member

    Registriert seit:
    9. Dezember 2006
    Beiträge:
    7.318
    Zustimmungen:
    582
    Wenn Text kein Problem ist - warum nicht das Zeichen für Schwarz nehmen
    HTML dezimal: ⏹
    U+23F9
    HTML hex: ⏹
     

    Anhänge:

  3. b3317133

    b3317133 Well-Known Member

    Registriert seit:
    21. November 2014
    Beiträge:
    11.638
    Zustimmungen:
    1.778
    z.B. mit einem passenden span und background-color o.ä.
     
  4. viewpointmedia

    viewpointmedia Active Member

    Registriert seit:
    22. Mai 2018
    Beiträge:
    42
    Zustimmungen:
    3
    Hallo!

    naja, der Balken soll eine vorgegebene Breite und Höhe sowie Farbe haben, hier werde ich also um eine Grafik nicht herum kommen, aber wie bringe ich diese Grafik an das Ende vom Menüeintrag?

    Liebe Grüße,
    Andreas
     
  5. b3317133

    b3317133 Well-Known Member

    Registriert seit:
    21. November 2014
    Beiträge:
    11.638
    Zustimmungen:
    1.778
    Wozu eine Grafik?

    Hier ein Beispiel mit einem span, ganz ohne span geht es natürlich auch...

    Wie man es am besten umsetzt, ergibt sich aus den Anforderungen, die aus Deinem Anhang nicht weiter hervorgehen.

    Das ganze ist auch eher was für ein CSS-Forum, mit WordPress hat es nichts zu tun.
     
  6. SirEctor

    SirEctor Well-Known Member
    Ehrenmitglied

    Registriert seit:
    28. Oktober 2008
    Beiträge:
    12.361
    Zustimmungen:
    427
    Versuche es mal mit der Pseudoklasse :after. Sollte funktionieren.
     
  7. viewpointmedia

    viewpointmedia Active Member

    Registriert seit:
    22. Mai 2018
    Beiträge:
    42
    Zustimmungen:
    3
    Naja, soll ja in eine Wordpress-Seite kommen ;)

    Endlich wurden die Anforderungen nun genau definiert. Wichtig ist, dass die Ausgangsfarbe mit einem kurzen Balken weiß ist, fährt man mit der Maus über die Schrift oder den Balken, soll ein höherer schwarzer Balken zu sehen sein der langsam von oben ins Menü fährt. Das ganze soll ein Menü werden, also mit Verlinkung.

    Momentan ist es mit Grafik und Text umgesetzt und sieht soweit auch ganz gut aus, der Hover-Effekt beschränkt sich allerdings auf den Text. Lässt sich der Hover-Effekt gleichzeitig auf Text und Grafik einsetzen?
     
  8. SirEctor

    SirEctor Well-Known Member
    Ehrenmitglied

    Registriert seit:
    28. Oktober 2008
    Beiträge:
    12.361
    Zustimmungen:
    427
    dann gib uns mal bitte einen Link
     
  9. viewpointmedia

    viewpointmedia Active Member

    Registriert seit:
    22. Mai 2018
    Beiträge:
    42
    Zustimmungen:
    3
    #9 viewpointmedia, 15. Oktober 2019
    Zuletzt von einem Moderator bearbeitet: 15. Oktober 2019
  10. b3317133

    b3317133 Well-Known Member

    Registriert seit:
    21. November 2014
    Beiträge:
    11.638
    Zustimmungen:
    1.778
    viewpointmedia gefällt das.
  11. viewpointmedia

    viewpointmedia Active Member

    Registriert seit:
    22. Mai 2018
    Beiträge:
    42
    Zustimmungen:
    3
    Genial... haben gestern noch überlegt, ob nun alles mit einer reinen Grafik umgesetzt werden soll. Ich denke das können wir nun wieder umdenken.

    Vielen Dank!
     
    #11 viewpointmedia, 16. Oktober 2019
    Zuletzt von einem Moderator bearbeitet: 16. Oktober 2019
  12. b3317133

    b3317133 Well-Known Member

    Registriert seit:
    21. November 2014
    Beiträge:
    11.638
    Zustimmungen:
    1.778
    Das ist der exakt gleiche Ansatz wie das zweite Beispiel in #5 bzw. der Hinweis von @SirEctor in #6 oben...
     
    maxe gefällt das.
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden