<!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