Search-Button JS Demo

HTML5/CSS3/JS

<!DOCTYPE html>
<html lang="de">
    <head>
        <meta charset="utf-8">
        <title>RS-Search Demo</title>
        
        <style>
            /**** EXAMPLE ****/
            
            body {
                margin: 0;
                padding: 0;
            }
            nav {
                position: relative;
                border-bottom: 1px solid #ddd;
                height: 50px;
            }
            .brand a {
                float: left;
                font-size: 30px;
                line-height: 50px;
                padding: 0 15px;
                display: block;
                color: #333;
                text-decoration: none;
                cursor: pointer;
                font-family: verdana,sans-serif;
                font-size: 30px;
            }
            
            /**** RS-SEARCH ****/
            
            .rs-search, .rs-search * {
                margin: 0;
                padding: 0;
                border: none;
            }
            .rs-search {
                position: absolute;
                top: 0;
                right: 50px;
                overflow: hidden;
            }
            .rs-search-slide {
                width: 250px;
                margin-right: -250px;
            }
            .rs-search-btn, .rs-search-go, .rs-search-input {
                float: left;
                height: 50px;
                border: none;
            }
            .rs-search-btn {
                position: absolute;
                top: 0;
                right: 0;
                background: url("search_glass.png") no-repeat center center;
            }
            .rs-search-go {
                background: url("restart.png") no-repeat center center;
            }
            .rs-search-btn, .rs-search-go {
                width: 50px;
                line-height: 50px;
                background-color: #eee;
                cursor: pointer;
                -webkit-transition: background 400ms ease-in-out;
                -moz-transition: background 400ms ease-in-out;
                -ms-transition: background 400ms ease-in-out;
                -o-transition: background 400ms ease-in-out;
                transition: background 400ms ease-in-out;
            }
            .rs-search-input {
                width: 190px;
                padding-right: 5px;
                padding-left: 5px;
                background-color: #fafafa;
                font: 14px Arial,sans-serif;
            }
            .rs-search-btn:hover, .rs-search-go:hover {
                background-color: #ddd;
            }
        </style>
        
        
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script>
            (function($){
                $(window).ready(function(){
                    
                    $(function(){
                        var searchContainer = $('.rs-search');
                        var searchButton    = $('.rs-search-btn');
                        var searchSlide     = $('.rs-search-slide');
                        var searchInput     = $('.rs-search-input');
                        
                        searchButton.click(function(event) {
                            event.stopPropagation();
                            if(searchSlide.hasClass('rs-visible')) {
                                searchSlide.stop().removeClass('rs-visible').animate({'margin-right':'-250px'},400);
                              } else {
                                searchSlide.stop().addClass('rs-visible').animate({'margin-right':'0px'},400,
                                    function() { searchInput.focus(); }
                                );
                            }
                        });
                        
                        $(document).bind('click',function(event) {
                            if(searchSlide.hasClass('rs-visible')) {
                                var target = $(event.target);
                                if(!(target.is(searchButton) || target.closest(searchContainer).is(searchContainer))) {
                                    searchSlide.stop().removeClass('rs-visible').animate({'margin-right':'-250px'},400);
                                }
                            }
                        });
                        
                    });
                    
                });
            })(jQuery);
        </script>
    </head>
    <body>
        <nav>
            <div class="brand">
                <a href="http://w3developer.de/">w<span style="color:#f90;">3</span>developer</a>
            </div>
            
            <button class="rs-search-btn"></button>
            <div class="rs-search">
                <form name="search-form" action="" method="get" role="search" class="rs-search-slide">
                    <button name="search-start" type="submit" class="rs-search-go"></button>
                    <input name="search-input" type="text" class="rs-search-input" value="" placeholder="Sucheingabe..." />
                </form>
            </div>
        </nav>
    </body>
</html>

Images