Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <script type="text/javascript">
- $(function() {
- $('button.expand').click(function() {
- $('#test').width(0).show().animate({width: 180}, 500);
- });
- $('html').click(function() {
- $('#test').width(180).show().animate({width: 0}, 500);
- });
- });
- </script>
- <nav id="menu">
- <ul>
- <li><a href="Home.html">Home</a></li>
- <li><a href="About.html">About</a></li>
- <li>
- <div id="search-container">
- <span id="search" >
- <form name="form1" >
- <input id="test" type="search" placeholder="Search..." required="required" onfocus="if(this.placeholder == 'Search...') {this.placeholder=''}" onblur="if(this.placeholder == ''){this.placeholder ='Search...'}" />
- <button class="expand" type="submit"><i class="fa fa-search"></i></button>
- </form>
- </span>
- </div>
- </li>
- </ul>
- </nav>
- .form-container input {display:none;}
- $(function() {
- $('button.expand').click(function() {
- $('#test').width(0).show().animate({width: 180}, 500);
- $('#test').addClass("visible");
- });
- $('html').click(function() {
- if($('#test').hasClass("visible")){
- $('#test').width(180).show().animate({width: 0}, 500).removeClass("visible");
- }
- });
- });
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement