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.