How to make input box show up from right to left?


Tags: css

Problem :

I have the following HTML:

<div class="menus">

  <di class="menu-option">
    Weather
  </di>
  <di class="menu-option">
    Travel
  </di>
  <di class="menu-option">
    <input class="search-input" />
    <span class="search-btn">Search</span>
  </di>

</div>

CSS

.menus {
  float:right;
}
.menu-option {
  display: inline-block;
  border-left: 1px solid black;
  padding: 0 15px;
}
.search-input {
  display: none;
}

Javascript:

$('.search-btn').click(function(e) {
    $('.search-input').show();
});

At this moment, I able to show the search box from hidden when clicking the Search text. How can I make the search box show up by moving from right to left and pushing other text to the left side, instead of showing the search box all of a sudden.

This is the JSFIDDLE example:

https://jsfiddle.net/1btm224h/5/

Thanks!



Solution :

You can go with:

$('.search-btn').click(function(e) {
    $('.search-input').show("slow");
});

Or you can go with:

$('.search-btn').click(function(e) {
    $('.search-input').show(3000);
});

From jQuery official: "The default duration is 400 milliseconds. The strings 'fast' and 'slow' can be supplied to indicate durations of 200 and 600 milliseconds, respectively."

So you only need to add animation duration, which is built into the .show() by default.


    CSS Howto..

    How to shift divs “up” in an order after deleting hiding a div with jquery/css

    how to include css style to modify existing placeholder

    Show required asterisk star after the text?

    How do you use HTML5 tags while supporting Progressive Enhancement for no-script clients that don't natively recognize unknown elements?

    How to display items side by side until window width then in next row

    How to scroll to particular element using CSS/JS

    How can I align a button at the bottom of a div?

    How do I know when to use a Class, an ID or HTML5 to make layouts in HTML using CSS? [closed]

    How to align image within nested div<> with spaces in div names

    how do I use standard GWT CSS style themes from non-GWT pages?

    How do I apply desktop media queries style to IE?

    How is font size calculated?

    How to select all a pseudo-classes in CSS?

    How can I use a CSS transform to vertically-center two overlapping elements?

    How to rotate a picture using css and javascript

    How to get the CSS style from Inspect Element

    How to add 10 pixels to a dynamic top position in CSS using SASS

    how to apply background transparency on a div (for an AJAX loading animation)?

    How to remove spacing around in CSS? [duplicate]

    How to link a css file with the Slim templating engine?

    LESS: How to specify current tag with nesting?

    Progress Bar in jquery showing reverse animation

    Blogger Template: how to change the color of the border css

    How to make a dropdown menu with CSS

    How to reverse z-index on stacked divs

    How to show the width of an element in the content of an ':after' pseudo-element?

    How do I loop a css animation with multiple keyframe definitions?

    How to keep indent for second line in ordered lists via CSS?

    CSS: How to prevent Background colour to be overwritten by colour from less-file

    How to get the current browser resolution in css?