Header - search v2
How do I make an header - search v2?
Version 2 of a new header search. When the input had focus it animates across the width of the header to reveal and second input. . What is a header - search v2? How do you make a header - search v2? This script and codes were developed by Josh Vogt on 18 November 2022, Friday.
Header - search v2 - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Header - search v2</title> <link rel='stylesheet prefetch' href='https://www.workopolis.com/assets/account/myworkopolis/styles/standard.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="header-fullwidth"> <div class="header-container"> <nav> <a><img src="http://placehold.it/40"></a> <a>Nav item One</a> <a>Nav item Two</a> <a>Nav item Three</a> <a>Nav item Four</a> </nav> <div class="global-search"> <form> <p> <input type="text" class="keyword search-field-trigger" placeholder="Job Title, Keywords" tabindex="1" /> </p> <p> <input type="text" class="location search-field-trigger" placeholder="Location" tabindex="2"/> </p> <button class="submit-search" tabindex="3"><span class="icon-search search-field-trigger"></span></button> </form> </div> </div>
</div>
<main> <h1>WORKOPOLIS</h1> <section class="worko-box"> <h3 class="worko-heading">Box of Content</h3> <p> Whilom ther was dwellynge at oxenford
A riche gnof, that gestes heeld to bord,
And of his craft he was a carpenter.
With hym ther was dwellynge a poure scoler,Hadde lerned art, but al his fantasye Was turned for to lerne astrologye, And koude a certeyn of conclusiouns,
To demen by interrogaciouns,
If that men asked hym in certein houres
Whan that men sholde have droghte or elles shoures,
Or if men asked hym what sholde bifalle </p> </section> <section class="content-box"> <h2>Awesome Headline</h2> <p> Of every thyng; I may nat rekene hem alle. This clerk was cleped hende nicholas.Of deerne love he koude and of solas; And therto he was sleigh and ful privee, And lyk a mayden meke for to see. A chambre hadde he in that hostelrye
Allone, withouten any compaignye,
Ful fetisly ydight with herbes swoote;
And he hymself as sweete as is the roote
Of lycorys, or any cetewale.
His almageste, and bookes grete and smale,
His astrelabie, longynge for his art,
His augrym stones layen faire apart,
On shelves couched at his beddes heed;
His presse ycovered with a faldyng reed;
And al above ther lay a gay sautrie,
On which he made a-nyghtes melodie
So swetely that all the chambre rong;
And angelus ad virginem he song;And after that he song the kynges noote.Ful often blessed was his myrie throte. </p> </section> <div class="images worko-box"> <h3 class="worko-heading">LOOK AT THESE PICS!</h3> <img src="http://lorempixel.com/400/400/" /> <img src="http://lorempixel.com/400/400/nature" /> <img src="http://lorempixel.com/400/400/sports" /> </div> <section class="content-box"> <h2>Awesome Headline</h2> <p> Of every thyng; I may nat rekene hem alle. This clerk was cleped hende nicholas.Of deerne love he koude and of solas; And therto he was sleigh and ful privee, And lyk a mayden meke for to see. A chambre hadde he in that hostelrye
Allone, withouten any compaignye,
Ful fetisly ydight with herbes swoote;
And he hymself as sweete as is the roote
Of lycorys, or any cetewale.
His almageste, and bookes grete and smale,
His astrelabie, longynge for his art,
His augrym stones layen faire apart,
On shelves couched at his beddes heed;
His presse ycovered with a faldyng reed;
And al above ther lay a gay sautrie,
On which he made a-nyghtes melodie
So swetely that all the chambre rong;
And angelus ad virginem he song;And after that he song the kynges noote.Ful often blessed was his myrie throte. </p> </section>
</main> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Header - search v2 - Script Codes CSS Codes
body { background: #eee;
}
body:before { background: none;
}
.header-fullwidth { height: 60px; width: 100%; position: fixed; background: #69be28; z-index: 1000;
}
.header-fullwidth .header-container { width: 960px; margin: 0 auto; height: inherit; position: relative; overflow: hidden;
}
.header-fullwidth nav { width: 600px; height: inherit; display: -webkit-box; display: -ms-flexbox; display: flex; float: left; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;
}
.header-fullwidth nav a { color: white; text-decoration: none; padding: 100% 10px; font-size: 16px; font-family: 'BryantRegular';
}
.header-fullwidth nav a:hover { background: #BED600;
}
.header-fullwidth .global-search { position: absolute; width: 900px; top: 5px; background: #69be28; -webkit-transform: translateX(76%); transform: translateX(76%); -webkit-transition: all .4s ease .1s; transition: all .4s ease .1s;
}
.header-fullwidth .global-search.expander { -webkit-transform: translateX(8%); transform: translateX(8%);
}
.header-fullwidth .global-search.expander p { width: 400px;
}
.header-fullwidth .global-search.expander p:nth-of-type(2) { -webkit-transform: scaleX(1); transform: scaleX(1);
}
.header-fullwidth .global-search.expander .submit-search { -webkit-transform: translateX(0); transform: translateX(0);
}
.header-fullwidth .global-search p { width: 225px; display: inline-block; margin-right: 20px; -webkit-transition: all 0.3s ease 0.1s; transition: all 0.3s ease 0.1s;
}
.header-fullwidth .global-search p:nth-of-type(2) { -webkit-transform: scaleX(0); transform: scaleX(0);
}
.header-fullwidth .global-search p input { padding: 0 10px;
}
.header-fullwidth .global-search .submit-search { -webkit-transform: translateX(-250px); transform: translateX(-250px); padding: 5px 6px 4px 6px; color: #69be28; background: #fff; border: none; font-size: 16px; -webkit-transition: all 0.3s ease 0.1s; transition: all 0.3s ease 0.1s;
}
main { padding: 80px 20px 20px 20px; width: 960px; margin: 0 auto;
}
main .worko-box { width: 30%; background: #fff;
}
main .content-box { width: 60%; float: left; margin-left: 20px;
}
main .images { display: -webkit-box; display: -ms-flexbox; display: flex; width: 960px;
}
main .images img { margin: 10px; -webkit-filter: grayscale(1) blur(3px); filter: grayscale(1) blur(3px); -webkit-transition: all .3s linear; transition: all .3s linear;
}
main .images img:hover { -webkit-filter: grayscale(0) blur(0); filter: grayscale(0) blur(0);
}
section { margin-bottom: 20px;
}
Header - search v2 - Script Codes JS Codes
$(".search-field-trigger").focus(function(){ $(this).closest("div").addClass("expander"); }).blur(function(){ $(this).closest("div").removeClass("expander"); })
Developer | Josh Vogt |
Username | josh_vogt |
Uploaded | November 18, 2022 |
Rating | 3 |
Size | 4,527 Kb |
Views | 18,216 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Toggle - just a dropdown | 1,542 Kb |
Making links into checkboxes | 2,891 Kb |
Password Reset | 3,172 Kb |
Items sliding out of list | 1,938 Kb |
CSS modals and sheets animations | 2,294 Kb |
Hidden Panel | 3,232 Kb |
CSS Grid Layout - Off Canvas Navigation | 2,830 Kb |
Header - search v1 | 4,595 Kb |
Toggle - Slider | 3,074 Kb |
A Pen by Josh Vogt | 2,910 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Comment Jquery | SquishyAndroid | 2,421 Kb |
Responsive Advert | James_zedd | 2,354 Kb |
TweetBox with React JS | J0zelito | 3,325 Kb |
Animated Logo | Shakdaniel | 2,672 Kb |
A Pen by Dalton Liu | Liudalton | 12,437 Kb |
RPG Style Text Dialogue | Odylic | 2,635 Kb |
Pure CSS Menu | Bronsrobin | 3,321 Kb |
Scroll to view if element partially out of view port height | ChrisMaki | 2,104 Kb |
Hard-Stop Gradients | Mackdoyle | 2,288 Kb |
Zeichensatz | Moklick | 2,058 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!