Skip to content

Instantly share code, notes, and snippets.

@darthmall

darthmall/search.html

Last active January 23, 2019 21:35
Show Gist options
  • Save darthmall/1097ed6634e552925a7741de877bf0d0 to your computer and use it in GitHub Desktop.
Save darthmall/1097ed6634e552925a7741de877bf0d0 to your computer and use it in GitHub Desktop.
Download ZIP
Drop down search with no (well, minimal) JavaScript
Raw
search.html
<!DOCTYPE html>
<head>
<title>Pure CSS Search Form Test</title>
<style>
html {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit
}
.site-nav {
display: flex;
flex-direction: row;
list-style: none;
justify-content: center;
margin: none;
padding: none;
}
.site-nav .site-nav-item {
padding: 0.5em 2em;
}
.site-nav .site-nav-item + .site-nav-item {
border-left: 1px solid #333;
}
.search-form {
background-color: aquamarine;
display: flex;
flex-direction: row;
padding: 3em 5em;
transform: translateY(-100%);
transition: transform 300ms ease-in-out;
position: fixed;
left: 0;
right: 0;
top: 0;
}
.search-form:target {
transform: translateY(0);
}
.search-form > .field {
flex-grow: 1;
}
.search-form > .close {
align-self: center;
margin-left: 0.5em;
}
</style>
</head>
<body>
<nav>
<ul class="site-nav">
<li class="site-nav-item -active"><a href="/">Home</a></li>
<li class="site-nav-item"><a href="/foo">Foo</a></li>
<li class="site-nav-item"><a href="#site-search">Search</a></li>
</ul>
</nav>
<form id="site-search" class="search-form">
<input type="search" name="query" class="field" />
<input type="submit" value="Search!" />
<a class="close" href="javascript:history.back()">Close</a>
</form>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment