expanding search box

anneke
96 Posts
anneke posted this 25 January 2016

HI,

Is it possible to create a expanding search box? See: http://tympanus.net/Tutorials/ExpandingSearchBar/
so the search field will expand after clicking on a search icon?

Kind regards,

HI, Is it possible to create a expanding search box? See: http://tympanus.net/Tutorials/ExpandingSearchBar/ so the search field will expand after clicking on a search icon? Kind regards,
Vote to pay developers attention to this features or issue.
4 Comments
Order By: Standard | Newest
Support Team
Support Team posted this 26 January 2016

Hi,

There is no such option in the application. You can try to search for some plug-in that will add such search box style.

Sincerely,
Hella

Hi, There is no such option in the application. You can try to search for some plug-in that will add such search box style. Sincerely, Hella
Stagger Lee
1838 Posts
Stagger Lee posted this 26 January 2016

I managed to make several different. Except this example. It is a lot of JS code and very much same repeating code Themler already has as jQuery. Did not work, dont know why. Could not connect it to the WordPress search.

Use in Google Bootstrap expanding search. You will easy yfind several snippets. Just paste all code inside HTML control. HTML and JS inside HTMP part, CSS inside CSS part.

Put all JS code inside <script></script>

I managed to make several different. Except this example. It is a lot of JS code and very much same repeating code Themler already has as jQuery. Did not work, dont know why. Could not connect it to the WordPress search. Use in Google Bootstrap expanding search. You will easy yfind several snippets. Just paste all code inside HTML control. HTML and JS inside HTMP part, CSS inside CSS part. Put all JS code inside &lt;script&gt;&lt;/script&gt;
Stagger Lee
1838 Posts
Stagger Lee posted this 26 January 2016

Replace all $ with jQuery. Forum cuts some text from comment.

You can make it with Hover Box Control too. I did it.
Insert Hover Box. In background slide insert SVG Icon control, style it and give it width of icon self, say 60px.
In over/hover background insert Search control and style button with icon to have same style as icon control. Play with height of input field, make it fast for better control.

Use fade option in Hover Box, slide options make some undesired effects in some situations.

It works.

This example in your link is fancy but very stupid and unlogical. You need to keep this space at the left empty whole the time because of search input field. Then as it is so you can have search open whole the time. Unlogical and stupid, fast I understand it looks modern for some people.

If you play with position:absolute and z-index options you can eliminate empty space at the left of closed button/icon.

Replace all $ with jQuery. Forum cuts some text from comment. You can make it with Hover Box Control too. I did it. Insert Hover Box. In background slide insert SVG Icon control, style it and give it width of icon self, say 60px. In over/hover background insert Search control and style button with icon to have same style as icon control. Play with height of input field, make it fast for better control. Use fade option in Hover Box, slide options make some undesired effects in some situations. It works. This example in your link is fancy but very stupid and unlogical. You need to keep this space at the left empty whole the time because of search input field. Then as it is so you can have search open whole the time. Unlogical and stupid, fast I understand it looks modern for some people. If you play with position:absolute and z-index options you can eliminate empty space at the left of closed button/icon.

Last edited 26 January 2016 by Stagger Lee

Stagger Lee
1838 Posts
Stagger Lee posted this 26 January 2016

This one is much better and logical. Use Section and adapt it as you need it.
Add menu and search icon in row, two columns. For better control for responsive.

http://attachments.answers.billiondigital.com/936/9936/2016-01-26-154839.jpg

This one is much better and logical. Use Section and adapt it as you need it. Add menu and search icon in row, two columns. For better control for responsive. ![http://attachments.answers.billiondigital.com/936/9936/2016-01-26-154839.jpg][1] [1]: http://attachments.answers.billiondigital.com/936/9936/2016-01-26-154839.jpg

Last edited 26 January 2016 by Stagger Lee

You must log in or register to leave comments