How to Create a Search Box with a Sliding Effect in Drupal 8

One of OSTraining members asked how to create a search box with a sliding out effect. Their goal was to arrive at the search box similar to the one you can find at the top of Drupal’s own website.

In this tutorial, you will learn how to create a search box that expands once you clicked on the icon. Also, while it stays expanded, it blur out your main menu.

We’re going to use a Bootstrap subtheme for this demonstration.

Step #1. Create a Bootstrap Subtheme

This tutorial assumes that you have already downloaded the Bootstrap theme and created a subtheme as explained in the “How to Create a Drupal 8 Bootstrap Subtheme” lesson.

Once you’ve done that, we can move on to the next part of the subtheme setup.

• Configure the libraries file to point to the css/style.css and js/script.js files:

• Create an empty style.css file inside the css folder of your theme.
• Create an empty script.js file inside the js folder of your theme.

Step #2. Rearrange the Block Layout

• Click Structure > Block layout.
• Drag and drop the blocks until they match the ones in the image:

Step #3. Add the CSS

The first thing you need to do is to identify the CSS selector of the input element:

• Once you’ve found it, add in there the following CSS code:

.input-group input[type=search] {width: 150px;  float: right;  -webkit-transition: width 0.4s ease-in-out;  transition: width 0.4s ease-in-out;}

This code will resize the search box and move it to the right of the site.

It will also prepare the transition of the element, that will be triggered by the focus event.

• Target the same element, this time add the :focus pseudo-class:

.input-group input[type=search]:focus {width: 100%;}

This code will resize the search box when it receives the focus:

• Target two more classes to dim the header and move the search box upwards:

.dimmed {filter: blur(3px);  opacity: .2;  transition: all .3s;}.sbox {  transform: translate(0, -4em);  -webkit-transition: transform 1s ease-in-out;  -moz-transition: transform 1s ease-in-out;  -o-transition: transform 1s ease-in-out;  transition: transform 1s ease-in-out;}

These two CSS classes will be injected with the help of jQuery when the search box get the focus.

Step #4. Add the jQuery

• Add the following code to your script.js file:

jQuery(".input-group input[type=search]").focus(function(event){jQuery("#navbar").addClass("dimmed");}); jQuery(".input-group input[type=search]").blur(function(event){jQuery("#navbar").removeClass("dimmed");});

The first statement adds the dimmed class to the element with the id=”navbar” when the input[type=search] selector gets the focus.

The second statement removes the class when the input[type=search] selector loses the focus.

Please, take notice that you have to use the word jQuery instead of the $ symbol.

• Save the file.
• Refresh the site.

• To add the sbox CSS class to the element with id=”search-block-form” when the input field gets the focus, add another line to each one of your jQuery statements:

This is a very basic example of what’s possible to achieve in your site with CSS and JS.

There are many ways to do this. If you think there’s a better way, please leave us your comments below.

What’s Next?

Would you like to learn how to build great websites with Drupal? Sign up to ostraining.com now and right away download our bestselling “Drupal 8 Explained” book.