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

Suchfeld-Lösung für mobile Ansicht (nur Icon anzeigen, Klick, Suchfeld erscheint...)

Dieses Thema im Forum "Design" wurde erstellt von clark, 6. September 2019.

  1. clark

    clark Well-Known Member

    Registriert seit:
    19. September 2006
    Beiträge:
    53
    Zustimmungen:
    0
    Das Suchfeld erscheint in der Desktopansicht voll ausgestreckt im Headbereich, so dass man direkt den Suchbegriff eingeben kann und auf "los" klickt.
    In der mobilen Ansicht würde das Suchfeld aber zu viel Platz wegnehmen. Ich möchte gern eine Lösung wie auf vielen Webseiten realisieren, z.B. ähnlich wie auf www.bauhaus.info. Dort wird in der mobilen Ansicht statt des Suchfeldes nur ein Icon sichtbar. Man muss auf das Icon klicken und darunter erscheint dann das Suchfeld. Dann Begriff eingeben und "los".

    Genau hierfür möchte ich gern eure Lösungen wissen, wie ich das umsetze und dass es in möglichst vielen Browsern funktioniert.

    Lieben Dank!
     
  2. b3317133

    b3317133 Well-Known Member

    Registriert seit:
    21. November 2014
    Beiträge:
    11.634
    Zustimmungen:
    1.778
    Link zu Deiner Seite?
     
  3. SirEctor

    SirEctor Well-Known Member
    Ehrenmitglied

    Registriert seit:
    28. Oktober 2008
    Beiträge:
    12.361
    Zustimmungen:
    427
    Du gibst der Suchleiste eine ID oder Class, blendest diese mittels CSS für mobile Geräte aus. Per Javascript/jQuery kannst du die dann per addClass wieder einblenden lassen. Das wäre das was mir als erstes einfällt.
     
  4. clark

    clark Well-Known Member

    Registriert seit:
    19. September 2006
    Beiträge:
    53
    Zustimmungen:
    0
    Ok, mit Javascript+addClass habe ich leider keine Ahnung.

    Hier habe ich mal eine Testinstallation gemacht:
    https://templatetest.de/

    Die Suche bei Bildschirmbeiten von mind 1.021px komplett sichtbar.
    Bis 1.020px Bildschirmbreite ist sie erstmal ausgeblendet (#header div.searchwrapper) und die (#header div.search) bekommt ein "Lupen"Icon als Hintergrund.

    Meine Vorstellung ist, dass dann das Icon geklickt wird und darunter das Suchfeld erscheint.
     
  5. b3317133

    b3317133 Well-Known Member

    Registriert seit:
    21. November 2014
    Beiträge:
    11.634
    Zustimmungen:
    1.778
    Als kleiner Denkansatz, der aber natürlich noch verfeinert werden muss, z.B. CSS wie dieses hinzufügen:
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Dann kannst Du z.B. in der Browser Konsole bzw. per Klick-Event damit das Feld ein- und ausblenden:
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Wahrscheinlich wäre es besser, den Trigger-Button für mobile für das Klick-Event extra hinzuzufügen und bei breiteren Screens auszublenden, statt wie jetzt den Hintergrund und die Grösse zu modifizieren.
     
  6. clark

    clark Well-Known Member

    Registriert seit:
    19. September 2006
    Beiträge:
    53
    Zustimmungen:
    0
    hab ich erstmal gemacht.

    Den CSS-Code habe ich hinzugefügt.

    Wie gesagt bin ich in punkto JS nicht bewandert, wie erledige ich nun den Teil mit dem Klickevent? Baut man das ins CSS ein, oder in den Quellcode als <script>..</script>?
     
  7. b3317133

    b3317133 Well-Known Member

    Registriert seit:
    21. November 2014
    Beiträge:
    11.634
    Zustimmungen:
    1.778
    Jetzt hast Du die ganze Struktur verändert. Stelle den Zustand von vorher wieder her, bau den Trigger-Button mit innerhalb von <div class="search"> ein und blende bei mobile nur den <div class="searchwrapper"> aus.
     
  8. clark

    clark Well-Known Member

    Registriert seit:
    19. September 2006
    Beiträge:
    53
    Zustimmungen:
    0
    habe ich erledigt.
     
  9. b3317133

    b3317133 Well-Known Member

    Registriert seit:
    21. November 2014
    Beiträge:
    11.634
    Zustimmungen:
    1.778
    Ok. Jetzt kannst Du den o.g. Script-Code z.B. so in footer.php Deines Themes einfügen:
    HTML:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Oder alternativ (sauberere Lösung) im Child-Theme oder in einem kleinen Plugin als eigene Scriptdatei via wp_enqueue_scripts Action mit Dependency zu jquery einbinden.
     
    clark gefällt das.
  10. clark

    clark Well-Known Member

    Registriert seit:
    19. September 2006
    Beiträge:
    53
    Zustimmungen:
    0
    Sauber!
    Ganz lieben Dank!! (Ich klick hier auch ab und zu mal auf Werbung ;)
     
  11. SirEctor

    SirEctor Well-Known Member
    Ehrenmitglied

    Registriert seit:
    28. Oktober 2008
    Beiträge:
    12.361
    Zustimmungen:
    427
    Klick auf Werbung interessiert uns nicht bzw. die freiwilligen Helfer und Mods haben nichts davon.

    Im Beitrag selber kannst du auf "Gefällt mir" klicken.
     
  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