Search Window

opens and expands below the navigation bar

by sfoster

HTML

<header id="header-1" class="header">
    <nav class="header-nav">
      <div class="search-button">
        <a href="#" class="search-toggle" data-selector="#header-1"></a>
      </div>
      <ul class="menu">
        <li><a href="#">For Business</a></li>
        <li><a href="#">For Personal</a></li>
        <li><a href="#">Pricing</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
      <form action="" class="search-box">
        <input type="text" class="text search-input" placeholder="Type here to search..." />
      </form>
    </nav>
  </header>

CSS

@import url(https://fonts.googleapis.com/css?family=Roboto:400);
body {
  font-family: 'Roboto', sans-serif; }

.header {
  max-width: 720px;
  margin: 2em auto 10em; }

.header-nav {
  position: relative;
  padding-right: 3em; }
  .header-nav:before, .header-nav:after {
    content: '';
    display: table; }
  .header-nav:after {
    clear: both; }

.menu {
  display: inline-block;
  float: right;
  list-style-type: none;
  margin: 0;
  padding: 0; }
  .menu li {
    display: inline-block; }
    .menu li a {
      color: #0097bf;
      display: block;
      padding: 10px;
      position: relative;
      transition: color 0.3s;
      text-decoration: none; }

.search-button {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translate(0, -50%); }

.search-toggle {
  position: relative;
  display: block;
  height: 10px;
  width: 10px; }
  .search-toggle::before, .search-toggle::after {
    content: '';
    position: absolute;
    display: block;
    transition: all 0.1s; }
  .search-toggle::before {
    border: 2px solid #0097bf;
    border-radius: 50%;
    width: 100%;
    height: 100%;
    left: -2px;
    top: -2px; }
  .search-toggle::after {
    height: 2px;
    width: 7px;
    background: #0097bf;
    top: 10px;
    left: 8px;
    transform: rotate(45deg); }
  .search-toggle.active::before {
    width: 0;
    border-width: 1px;
    border-radius: 0;
    transform: rotate(45deg);
    top: -1px;
    left: 4px; }
  .search-toggle.active::after {
    width: 12px;
    left: -1px;
    top: 4px; }

.search-input:focus {
  outline: none; }

#header-1 {
  border-bottom: 2px solid #0097bf; }
  #header-1 .search-box {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;
    max-height: 0;
    transform: translateY(100%);
    background-color: #0097bf;
    transition: all 0.3s; }
    #header-1 .search-box .search-input {
      width: 100%;
      height: 100%;
      padding: 0 1em;
      border: 0;
      background-color: transparent;
    ...

JavaScript

document.querySelector('.search-toggle').addEventListener('click', function(e) {
  // find the header element using the data attribute
	var selector = e.target.dataset.selector;
  var container = document.querySelector(selector);
  // add/remove the class to engage/disengage the CSS rule which shows/hides the search box
  container.classList.toggle('show');
  container.querySelector('.search-input').focus();
  // add/remove the class to change the search icon 
  e.target.classList.toggle('active');
  // the search toggle is a link, don't actually load its href attribute
  // this could also just be a button 
  e.preventDefault();
});