Header Search

header-search.markdown

Header Search

Header search form with some animations.

A Pen by Aleksandar Čugurović on CodePen.

License.

index.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>

<header id="header-2" class="header">
  <nav class="header-nav">
    <div class="search-button">
      <a href="#" class="search-toggle" data-selector="#header-2"></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>

<header id="header-3" class="header">
  <nav class="header-nav">
    <div class="search-button">
      <a href="#" class="search-toggle" data-selector="#header-3"></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>

script.js

$('.header').on('click', '.search-toggle', function(e) {
  var selector = $(this).data('selector');

  $(selector).toggleClass('show').find('.search-input').focus();
  $(this).toggleClass('active');

  e.preventDefault();
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.scss

@import url(https://fonts.googleapis.com/css?family=Roboto:400);

$blue: #0097bf;
$white: #fff;
$black: #000;
$text: #424242;

@mixin cf {
	&:before,
	&:after {
		content: '';
		display: table;
	}

	&:after {
		clear: both;
	}
}

body {
  font-family: 'Roboto', sans-serif;;
}

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

.header-nav {
	@include cf;
	position: relative;
	padding-right: 3em;
}

.menu {
	display: inline-block;
	float: right;
	list-style-type: none;
	margin: 0;
	padding: 0;

	li {
		display: inline-block;

		a {
			color: $blue;
			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;

	&::before,
	&::after {
		content: '';
		position: absolute;
		display: block;
		transition: all 0.1s;
	}

	&::before {
		border: 2px solid $blue;
		border-radius: 50%;
		width: 100%;
		height: 100%;
		left: -2px;
		top: -2px;
	}

	&::after {
		height: 2px;
		width: 7px;
		background: $blue;
		top: 10px;
		left: 8px;
		transform: rotate(45deg);
	}

	&.active {
		
		&::before{
			width: 0;
			border-width: 1px;
			border-radius: 0;
			transform: rotate(45deg);
			top: -1px;
			left: 4px;
		}

		&::after {
			width: 12px;
			left: -1px;
			top: 4px;
		}
	}
}

.search-input {

	&:focus {
		outline: none;
	}
}


#header-1 {
	border-bottom: 2px solid $blue;

	.search-box {
		position: absolute;
		bottom: 0;
		width: 100%;
		height: 100%;
		max-height: 0;
		transform: translateY(100%);
		background-color: $blue;
		transition: all 0.3s;

		.search-input {
			width: 100%;
			height: 100%;
			padding: 0 1em;
			border: 0;
			background-color: transparent;
			opacity: 0;
      color: $white;

			&::-webkit-input-placeholder {
				color: rgba($white, 0.4);
			}
		}
	}

	&.show {

		.search-box {
			max-height: 40px;

			.search-input {
				opacity: 1;
			}
		}
	}
}

#header-2 {
	overflow: hidden;

	.menu {

		li {
			opacity: 1;
			transition: transform 0.3s, opacity 0.2s 0.1s;

			$time-offset: 0.3;
			@for $i from 1 through 5 {
				&:nth-child(#{$i}) {
					$time-offset: $time-offset + 0.1;
					transition-delay: #{$time-offset}s;
				}
			}
		}
	}

	.search-box {
		position: absolute;
		left: 0;
		height: 100%;
    width: 0;
		padding-left: 2em;
		transform: translateX(20%);
		opacity: 0;
		transition: all 0.4s 0.3s;

		.search-input {
			border: 0;
			width: 100%;
			height: 100%;
			background-color: transparent;
		}

		.search-toggle {
			width: 14px;
			height: 14px;
			padding: 0;
			position: absolute;
			left: 5px;
			top: 50%;
			transform: translateY(-50%);
		}
	}

	&.show {

		.menu {

			li {
				transform: scale(0.8);
				opacity: 0;
			}
		}

		.search-box {
			width: calc(100% - 5em);
			transform: translateX(0);
			opacity: 1;
		}
	}
}

#header-3 {

	.menu {

		li {
			opacity: 1;
			transition: all 0.3s 0.3s;
		}
	}

	.search-box {
		position: absolute;
		right: 48px;
		height: 100%;
		width: 0;
		padding: 0;
		opacity: 0;
		transition: all 0.3s;

		.search-input {
			border: 0;
			width: 100%;
			height: 100%;
			background-color: transparent;
		}

		.search-toggle {
			width: 14px;
			height: 14px;
			padding: 0;
			position: absolute;
			left: 5px;
			top: 50%;
			transform: translateY(-50%);
		}
	}

	&.show {

		.menu {

			li {
				opacity: 0;
				transition: all 0.3s;

				&:nth-child(even) {
					transform: translateY(-100%);
				}

				&:nth-child(odd) {
					transform: translateY(100%);
				}
			}
		}

		.search-box {
			width: calc(100% - 5em);
			opacity: 1;
			transition: all 0.3s 0.3s;
		}
	}
}