CSS Library

Professional Services Playground - Latest and Greatest

z. Search Effects

Status: In Progress

Sliding Search on Hover Example

Brief Explanation & Notes

Some designs show a small search icon, and then when a user hovers over the search area, it expands to show the search input box. A transition to slide out the search box, rather than just appearing is an optional, but nice flourish. This effect works by adjusting the width of the Search Box on hover and focus. 

Sliding Search 1 expands when a user hovers over the content container. Sliding Search 2 expands when a user hovers over the search block. Both styles utilize a max-width, so that the search input does not get too wide. As you can see, the behavior with max-width is a little different when hovering over the search block, because you can hover over the area, but stil have to move the mouse to the right to get to the search input box. Without the max-width on search style 2, the search area would expand the full width and it would appear to hover behavior would be the same as search style 1.

Usability Notes

The search input box must also remain open once a user clicks in it, so we utilize the :focus pseudo class for that. 

Because mobile devices don't have hover states, and iOS has poor support for hover styles on anything other than a link, you will need to set the search box to expanded for mobile devices, using the .mobile class that is on the HTML tag.

How To:

List of 4 items.

  • Search Box

    To set up the search box to expand, in the normal (off) state, set the transition speed and a narrow width. 

    To achieve this style, also apply the background style for the left area to the search box.
    padding: 6px 7px;
    margin: 0;
    width: 1px;
    -webkit-transition: width .5s;
    -moz-transition: width .5s;
    transition: width .5s;
  • Search Box:focus

    To keep the search box active once a user clicks on it, so that it doesn't collapse if the user hovers off the search box, apply the expanded style to the focus pseudo class.
    width: calc(100% - 50px);
    padding: 6px 10px;
  • Custom CSS | Content:hover Search Box

    To make the search box slide out when a user hovers over any part of the search, set the search expanded styles when you hover over the content or the search container (may vary depending on design and desired behavior). This will need to be done in custom css. This is preferable to just setting the hover state on the Search, because if a user hovers over the input button, the search will still expand if set on content:hover.
    Custom CSS

    .style-14609 div.content-wrap:hover .search-text{  
    width: 80%; /*fallback width for older browsers*/
    width: calc(100% - 50px);
    padding: 6px 10px;
    }/*Right Aligned Expanding Search - expanding on hover*/
  • Custom CSS | Mobile Devices Search Box

    Because there is no hover state on a touch device, and hover events are not well supported on iOS, you should set the search box to it's expanded state on mobile devices.
    Custom CSS

    .mobile .style-14609 .search-text{  width: calc(100% - 50px); padding: 6px 10px;}/*ML: Search - setting search box to expanded for mobile devices*/
Designed and built by a monkey with a paintbrush
Maintained by a group of children who call themselves professionals