Hi guys!
I am trying the last two days to make a expandable search form like one that tripadvisor has. My first approach is to practically create a section/page dedicated to this search form and then use javascript when someone clicks on search box on my Front page to expand/show this section like we do usually with Hamburger menus for mobile versions of sites. But i have come across to some issues about the exact positioning of the hidden section/search form page since when you make a Hamburger button and menu a absolute positioning and a top:0 do the trick but my search bar is in the middle of the home page like tripadvisor. Any hints please about how i should approach it and what i should study about it?
Below a photo of what i have achieved till now!
Below my html and css code.
On Recently Reviewed headline will be later a script where with js queries will display some Listings from a WordPress Plug in…
But for now i want when i click on the search box in the center of the page to display underline the form that its on the top like tripadvisor does!
Html
<div class="search-page">
<div class="search-boxPage">
<input type="text" placeholder="Explore City">
</div>
<h3>Explore City</h3>
<div class="testflex">
<ul class="search-menu-list">
<li><a href="#">Our Daily Suggestions</a></li>
<li><a href="#">Shopping</a></li>
<li><a href="#">City Tours</a></li>
<li><a href="#">Restaurants</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">Things to do</a></li>
</ul>
</div>
<h3>Recently Reviewed</h3>
</div>
CSS
h3{
color:#fff;
margin-top:2rem;
}
.search-page {
position: absolute;
top:0;
height: fit-content;
max-width:100%;
display: block;
background-color :green;
text-align: center;
padding:4rem 0;
transition: all 0.3s ease;
z-index: 5;
}
.search-boxPage input[type="text"]{
width: 80%;
padding:2rem;
font-size: inherit;
border: none;
border-bottom: 3px solid white;
outline: none;
background-color: green;
color: white;
font-weight: 400;
}
.search-page .search-menu-list{
display:flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
.search-page .search-menu-list li{
list-style: none;
}
.search-page .search-menu-list li a:hover{
transform: translateY(-1rem);
}
.search-page .search-menu-list li a{
display: inline-block;
color:#fff;
padding:5px;
list-style: none;
text-decoration: none;
margin-right: 2.5rem;
transition: all 300ms ease-in-out;
border: solid 2px white;
border-radius: 1rem;
padding: 11px 13px 11px 14px;
margin: 10px;
}