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 do I move this scrolling bar closer to the post area?

    How to automatically validate after typing the input without using any frameworks, just simple code for my registration form?

    How to refactor an existing project to use Compass?

    Show nested list on click in Joomla (1.7.0)

    How to make float navbars with JS and CSS?

    Selected text showing oversized selection area

    How can I get rid of those animation in jquery toggle?

    How to remove space after div in my td when one div uses “relative” position?

    How to size a div box in CSS so text is centered regardless of length

    How to create a “dot-dash” border with css or javascript?

    How float divs inside a td

    how to fix a division using css and js..?

    How to contain a scrollable div element completely within another?

    How to indent text in a select drop down menu using CSS

    How to repeat an image but only horizontally?

    How do I remove the white line under the nav bar

    How can I “display:none” to some adjacent text with CSS?

    How to control the CSS of the contents that loaded dynamically into iframe?

    PHP+CSS Obfuscation - PHP ord THEN PHP strrev + CSS reverse text, how to get the special chars validated backwards?

    CSS: How to make a nav menu with a sub nav menu directly below it?

    How to get a floating-DIV to fill available space within its parent DIV?

    How to reverse a repeated image on blogger

    How to set the style of the message in an SWT Text field?

    How to get item to appear on mobile homepage only(wordpress)

    How to add new fonts in CSS for local testing

    xHTML/CSS: How to make inner div get 100% width - margins

    Show the menu at the center of the data toggle

    Fonts wont change and id height wont show

    How can I stop an image element from taking 100% width?

    How to scale image with with transition CSS? [closed]