I am working on creating a search bar that consists of a search input, an Options button, and a 3rd button that expands to the left when hovered, pushing the previous elements over.
Despite my attempts with CSS, I have been unable to smoothly slide the other elements over. I suspect this may need to be implemented with jQuery instead?
When the user hovers over the arrow, the div should open to the left and reveal the word 'search' alongside a 20% gray overlay.
The 'options' button is supposed to slide to the left while the search button expands, but the width of the entire search wrap should remain unchanged and in place.
This is where I currently stand in terms of code:
HTML:
<div class="search-box">
<input name="" type="text" placeholder="search" class="input"><a href="#" class="option">options</a>
<div id="search-button">
<div id="search-button-text">search </div>
<a href="#"><img src="/static/images/search-btn.jpg" alt=""></a>
</div>
</div>
Some unsuccessful JS attempts:
$(".search-button").hover(function() {
$('search-button-text').style.display = 'block-inline';
});
The CSS:
.search-box {
width:582px;
float:right;
clear:both;
}
.search-box .input {
float:left;
/*min-width: 500px;*/
border:1px solid #231f20;
height:25px !important;
font:16px "JosefinSans Regular", Arial, Helvetica, sans-serif;
margin:0px;
}
.search-box .option {
display: block-inline;
float:left;
height:20px !important;
width: 50px;
border:1px solid #231f20;
padding-top:7px;
text-align: center;
border-left:none;
border-right:none;
color:#000;
text-decoration:none;
font-size:13px;
}
#search-button {
display:inline-block;
}
#search-button-text {
display: none;
visibility: hidden;
}