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

    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 http://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!

    • Gerade eben
    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

    Zitat von clark

    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...


    Link zu Deiner Seite?

    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.

    Das Geheimnis des Könnens liegt im Wollen!
    [size=12]Bitte keine Hilfegesuche per PN (auch keine "privaten" Links). Das ist ein öffentliches Forum.[/SIZE]

    Zitat

    Per Javascript/jQuery kannst du die dann per addClass wieder einblenden lassen. Das wäre das was mir als erstes einfällt.


    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.

    Als kleiner Denkansatz, der aber natürlich noch verfeinert werden muss, z.B. CSS wie dieses hinzufügen:

    CSS
    #header .search.searchmobile div.searchwrapper {
    width: 200px;
    top: 38px;
    display: block !important;
    visibility: visible !important;
}
#header .search.searchmobile div.searchwrapper .searchsubmit {
    top: 1px;
}


    Dann kannst Du z.B. in der Browser Konsole bzw. per Klick-Event damit das Feld ein- und ausblenden:

    Code
    jQuery('#header .search').toggleClass('searchmobile');


    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.

    Zitat

    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.


    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>?

    Jetzt hast Du die ganze Struktur verändert. Stelle den Zustand von vorher wieder her, bau den Trigger-Button mit innerhalb von [FONT=Courier New]<div class="search">[/FONT] ein und blende bei mobile nur den [FONT=Courier New]<div class="searchwrapper">[/FONT] aus.

    Zitat

    bau den Trigger-Button mit innerhalb von <div class="search"> ein und blende bei mobile nur den <div class="searchwrapper"> aus.


    habe ich erledigt.

    Ok. Jetzt kannst Du den o.g. Script-Code z.B. so in footer.php Deines Themes einfügen:

    HTML
    <script>
jQuery(document).ready(function() {
    jQuery(document).on('click', '#header .search .btn-triggersearch', function(event) {
        event.preventDefault();
        jQuery('#header .search').toggleClass('searchmobile');
    });
});
</script>

    Oder alternativ (sauberere Lösung) im Child-Theme oder in einem kleinen Plugin als eigene Scriptdatei via wp_enqueue_scripts Action mit Dependency zu [FONT=Courier New]jquery[/FONT] einbinden.

    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.

    Das Geheimnis des Könnens liegt im Wollen!
    [size=12]Bitte keine Hilfegesuche per PN (auch keine "privaten" Links). Das ist ein öffentliches Forum.[/SIZE]

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden