[magucio]

Chce zmienić tradycyjną szukajke w ikonę z wysuwanym paskiem do szukania danej frazy. Po angielsku to search dropdown. Niestety nie mogę znaleźć żadnych poradników jak to zrobić, tylko wszędzie gotowe pluginy.
Ma ktoś może pomysł jak to ugryźć? Nie oczekuje gotowego rozwiązania, ale nawet nie wiem od czego zacząć. Potrzebna będzie nowa funkcja specjalnie pod taką szukajke?
#woocommerce #wordpres #php

[januzi]

@magucio: jQuery ;)
Diva z formularzem szukania dajesz jako ukryty, do ikonki dajesz onclick, w którym będzie toggle() na tym divie. Jak chcesz jakieś wyjeżdżanie i inne cuda, to dostosowujesz tylko styl diva + dodajesz animate() do obsługi kliknięcia.

[magucio]

@januzi: znajdzie gdzieś gotowe jQuery do tego? Bo szczerze mówiąc raczkuje dopiero w html, a jQeuery to nigdy nawet nie ruszyłem

[januzi]

@magucio: https://jsfiddle.net/zdcmmfe9/1/
takie coś?

[magucio]

@januzi: wolałbym żeby się wysuwalo w dół i w bok, bo tam mam wolną przestrzeń, a chce to umieścić po prawej stronie headera i tak gorzej byłoby zmieścić prostokąt. Żeby taki efekt uzyskać, to wystarczy zmienić animate()?

[januzi]

@magucio: Wstaw sobie wyszukiwarkę tak, żeby była we właściwej pozycji. Jak już to będziesz mieć obcykane, to w stylach domyślnych dodajesz: overflow: hidden; height: 0; Natomiast do styli robionych po kliknięciu myszką dajesz height: ...px; Reszta sama się zrobi przy pomocy transition. Jeśli jeszcze ma jechać gdzieś w bok, to dodatkowo jakiś left, albo padding-left.

[magucio]

@januzi: jak chce to zrobić w wordpressie, to pewnie jQuery muszę wrzucić w funkcji, którą dodam w functions.php? Bo jak inaczej?

[januzi]

@magucio: W szablonie na pewno siedzi scripts.js, plugin.js, common.js, vendor.js lub coś podobnego. Tam się możesz dokleić ze swoją funkcją.