Expanding search
How do I make an expanding search?
What is a expanding search? How do you make a expanding search? This script and codes were developed by Stuart Allen on 29 November 2022, Tuesday.
Expanding search - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>expanding search</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <div class="header"> <div class="header__left"> <div class="logo">WILEY ONLINE LIBRARY</div> <div class="access">ACCESS BY...</div> </div> <div class="header__right"> <div id="search-area" class="search-area"><input id="search" type="search" onclick="expandSearch()" value="Search"></div> <div class="login">LOG IN</div> </div> </div>
</div>
<div class="notes">Click the search input</div> <script src="js/index.js"></script>
</body>
</html>
Expanding search - Script Codes CSS Codes
.container { width: 100%; background-color: #f1f1f1; position: relative; box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25);
}
.notes { margin-top: 20px; text-align: center;
}
.header { position: relative; margin: 0 auto; width: 1200px; overflow: hidden; padding: 10px;
}
.header__left { float: left;
}
.header__right { float: right;
}
.logo { display: inline-block; font-weight: 600; padding: 20px;
}
.access { display: inline-block; padding: 20px; border-left: 1px solid black;
}
.search-area { position: absolute; display: inline-block; padding: 15px; background-color: #f1f1f1; left: 900px; right: 110px; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; -webkit-transition-property: all; transition-property: all;
}
.search-area input { width: 100%; height: 28px;
}
.search-area.search--active { left: 0; right: 0;
}
.login { display: inline-block; padding: 20px; border-left: 1px solid black;
}
Expanding search - Script Codes JS Codes
var searchArea = document.getElementById("search-area");
document.onclick = function() { if (document.activeElement == document.getElementById("search")) { searchArea.classList.add("search--active"); } else { searchArea.classList.remove("search--active"); }
}
Developer | Stuart Allen |
Username | rarebush |
Uploaded | November 29, 2022 |
Rating | 3 |
Size | 2,681 Kb |
Views | 10,120 |
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 |
Dashboard Builder - piechart | 2,982 Kb |
Animated leaderboard - image | 257,123 Kb |
HTML email | 4,277 Kb |
WOL 2 styleguide | 38,783 Kb |
WOL 2 Bootstrap | 48,265 Kb |
Blur background on search focus | 2,833 Kb |
Research ecosystem graphic-chord | 2,901 Kb |
AAA Header | 17,153 Kb |
Hub styleguide | 5,547 Kb |
ChemPlanner Colours | 2,157 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 |
Dribbble Inspired Registration Form | Lancebush | 2,358 Kb |
A Pen by Xand0r | Xand0r | 1,928 Kb |
To Do List with Delete | Mattlbrody | 2,068 Kb |
Multiple jCarousel | Pafnuty | 2,461 Kb |
Getting Started | Viblast | 1,500 Kb |
A bit of elegance | Hackthevoid | 9,095 Kb |
Portfolio Landing Page | FDfranklin | 3,585 Kb |
Filter inputs | Rowinf | 1,721 Kb |
Siema - add pagination to prototype | Pawelgrzybek | 2,575 Kb |
Profile box | Daniesy | 2,766 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!