Question

Just writing some CSS and I have a pretty cool Search form where you click on the search icon and it expands out using, “transition: width 0.5 ease-in-out” in CSS.
Great. That works fine.

However, I am planning to put my navigation bar next to the search div on the right of it but of course it will overlap when the user clicks the Search button.
I was wondering if anyone knew of a way where when the Search is expanded, the navigation Div automatically moves to the right with it. I also want the div to revert back to normal when the form loses focus (as the search bar goes back in with the “ease-in-out” function).

I think there maybe some JQuery out there that does it but I really don’t know how to write it if there is?

Answer 1

There is indeed a jQuery method that can help you with this. You can use jQuery’s .animate() to take care of the transition for you.

$('#search').click(function() {
    $('#navigation').animate({width: '100px'}, 500);
}

This would shrink the width of the navigation to 100px when you click on the search element and animate that transition over 0.5 seconds.

You would probably need to play around with the CSS to stop the flow of your page breaking, but setting the overflow property should take of that quite easily.