HomeDeveloper & CSS
Creating a slick, animated Full Screen
Search Form with CSS3 and JavaScript

Categories:AllFree JS/ AppletsTutorialsReferences

Creating a slick, animated Full Screen
Search Form with CSS3 and JavaScript

Created: Feb 8th, 17'

A well designed and
accessible search UI encourages users to interact with your site's search
function more frequently, leading to higher user satisfaction and
increased page views. To that end, and with the dominance of small screen
devices, the trend for search boxes has been to make them extremely
large and bold. In this tutorial, we'll go over step by step how to
create a slick, well engineered full screen search form that works
beautifully across all modern browsers and devices.

Creating the header and search icon interface

To begin, we'll quickly put together a header section using the classic
pattern of a logo on the left, and some navigational links plus the
search icon on the far right, with everything centered vertically.
Eventually clicking on the icon is what will trigger the full screen
search box.
Instead of using CSS floats, we'll turn to
CSS flexbox instead to
achieve this layout in a succinct, future proof manner:

The header is set to be fixed in position and display:flex,
which turns the 3 children elements inside - the logo, the UL menu, and
the search box label - into flex elements, making it effortless to
position these elements the way we want to. Specifically, by adding justify-content:
space-between to the header, the three child elements are spaced
horizontally apart evenly (we tweak the UL menu later to break from
this), and with align-items: center, all the child elements
are vertically centered inside the header.

Our flex box settings at this point has the 3 header components spaced
apart equally on the horizontal axis, though personally I prefer the UL
menu to be right aligned next to the search box label. To do this in CSS
flex box, we just add margin-left: auto to the menu UL.
More details on this technique here.

And finally, for the search box label, or the gateway to our full screen
search form, we choose to use a label instead of a regular DIV or span,
so when it's clicked on, focus is automatically set on the associated
INPUT element. On mobile browsers, this behaviour also automatically
triggers the mobile keyboard, which makes for good design. What may not
be the best design choice is the use of an image for the "search" icon. When actually deploying
you may want to opt for a SVG or icon font that scales without
resolution loss, such as one from the excellent
IcoMoon.

Creating the Full Screen Search Form

Now it's time for the real fun, creating the search form that's triggered
by the search label we defined earlier:

Figure #2: Full Screen Search Form that pops up when "search" label
is clicked on

We want the form to appear when the user clicks (or taps in
mobile browsers) on the search icon label, and to dismiss it when the
user clicks on the label again, or anywhere outside the search field.

Lets break down the important bits in the CSS. For the #searchcontainer
DIV, we set it to "position:fixed" with "top:90px"
so it doesn't obscure the header element when visible while spanning the
rest of the page. And speaking of visibility, the DIV is initially
hidden by setting its opacity to 0, but also in addition, its left
property to -100%. This ensures that the DIV doesn't overlay (and
obstruct) the page when it's not visible on the screen. We didn't
opt for using "visibility:hidden", as that prevents
any form INPUT inside it from receiving focus, which negates the benefit
of using a form LABEL element to trigger the search container's
visibility.

To toggle the CSS transitions that reveal and hide the search container
and search field, we dynamically add/ remove a CSS class "opensearch"
to the #searchcontainer DIV using JavaScript. Inside the "opensearch"
class, we define two sets of transitions, one targeting the #searchcontainer
DIV, the other the INPUT field inside it. The two are run sequentially,
by making use of
transition-delay inside the CSS
transition shorthand property to stall the later transition. The first transition runs
immediately when activated, fading in and shifting downwards slightly
into its final resting page the #searchcontainer DIV.
Notice the "left" property is set to explicitly not
transition and without delay (left 0s 0s), so the container
appears in the proper coordinates horizontally immediately when opened.
Contrast that with when its time to hide the container, by removing the
"opensearch" class from it. The default transition
property settings inside #searchcontainer stipulates that
the left property in that case should also not transition,
but kick in after a delay of ".5s" (left 0s .5s)
into the declared value of "-100%", so the other
transition properties such as "opacity" and "transform"
have time to play out first.

The second transition applies to the form inside #searchcontainer
(div#searchcontainer.opensearch form{}), and kicks in after
the first to reveal the search INPUT itself.

And last but certainly not least, we arrive at the JavaScript portion of
the script. The first line returns a Boolean indicating whether the User
Agent falls into one of the major mobile devices category. We use this
Boolean to decide whether to bind to the "click" or "touchstart"
event on the various elements. Mobile devices also support "click"
any way should our Boolean fail to properly categorize a mobile device
in use, though "touchstart" reacts more quickly, without
the infamous 300ms delay of "click" on mobile devices.

When the user clicks on the search label inside the header element, we
toggle the visibility of the full screen search container by toggling
the CSS class "opensearch" on it. If the current action is
to close the search container- by checking that the class "opensearch"
is missing from the container - we blur the search INPUT field while
suppressing the default label action of setting focus on the element
from kicking in. The act of setting focus and blurring on a form field
has the added advantage of automatically bringing up and dismissing the
virtual keyboard on most mobile browsers.

To dismiss the search container when the user clicks anywhere on the
document other than on the label or the search field itself, we attach a
"click/ touchstart" event to the document
element that accomplishes this. Calling e.stopPropagation()
inside the search label and field prevents the same action inside these
elements from reaching the document.

And finally, our JavaScript makes use of the
classList API to handle CSS classes, which is not supported in IE9
or lower. There's a good
classList pollyfill if you need legacy browsers support.