CODEWITHSUNDEEP
jqueryhtmlcss
Alex Zahir
Alex Zahir

Reputation: 969

CSS transitions for expanding search box

I am trying to use CSS transitions along with simple jQuery toggleClass to achieve the expanding search input effect.

My attempt has been mildly successful but still far from how I want it to be.

I have made a JSFiddle of what I have achieved so far:
https://jsfiddle.net/3jhr24u3/

This is a GIF of what I want to achieve exactly:

GIF screen of what I want to achieve

My HTML(as in JSFIDDLE):

<form class="search-box pull-right" action="#" method="post">
    <span class="icon-magnifier search-icon"><img src="https://cdn0.iconfinder.com/data/icons/30_Free_Black_ToolBar_Icons/40/Black_Search.png" alt="Search" /></span>
    <input type="text" name="search-bar" class="search-bar" />
</form>

My CSS(as in the JSFIDDLE):

.search-box {
    position: relative;
    margin-left: 400px;
}
.search-icon {
    font-size: 1.875em;
    color: #1CB6B5;
    position: relative;
    float: left;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}
.search-icon-open {
    z-index: 1000;
    color: #FFF;
    left: -290px;
}
.search-bar {
    background: #1cb6b5;
    border: 0 none;
    border-radius: 20px;
    width: 400px;
    height: 40px;
    color: #FFF;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    width: 0px;
    padding: 0;
    position: absolute;
    right: 0;
}
.search-bar-open {
    display: block;
    width: 400px;
    padding-left: 40px;
    padding-right: 10px;
    top: 0;
}

Upvotes: 3

Views: 5621

Answers (1)

Harry
Harry

Reputation: 89750

All you need to to is absolutely position the search icon with respect to the parent at right: 0px and change it to right: 400px (width of the search bar) when clicked on.

If you don't want the search icon to be aligned with the right side of the page then you can nullify the margin-left on the parent form and add a width depending on the needs.

.search-icon {
    font-size: 1.875em;
    color: #1CB6B5;
    position: absolute;
    right: 0px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.search-icon-open {
    z-index: 1000;
    color: #FFF;
    right: 400px;
}

Demo Fiddle (Stack Snippet is not working as library is not getting loaded. Not sure if it is just for me).

Upvotes: 4

Related Questions