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

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

Werbepost

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

b3317133

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?

SirEctor

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.

clark

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.

b3317133

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.

clark

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

b3317133

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.

clark

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.

b3317133

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.

clark

Sauber!
Ganz lieben Dank!! (Ich klick hier auch ab und zu mal auf Werbung ;-)

SirEctor

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.

Willkommen! Melden Sie sich an oder registrieren Sie sich.

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

Jetzt mitmachen!