Fórum CodigosnaWeb.com

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' type='text/javascript'></script>
<img src='https://image.flaticon.com/icons/svg/34/34097.svg' id='search-icon'/>
<div id='nav-search'>
<form action='/search' id='searchform' method='get'>
<input id='s' name='q' placeholder='Digite e dê enter para pesquisar...' type='search'/>
</form>
</div>
<style>#search-icon{position:absolute;right:0;top:0;display:block;line-height:40px;height:40px;width:40px;color:red;font-size:16px;padding:0;text-align:center;cursor:pointer;border-left:1px solid #272727}
#search-icon:hover{background-color:#CD2122;color:#fff}
#nav-search{position:absolute;right:0;top:40px;z-index:50;display:none;width:300px;height:54px;background-color:#272727;border:0;border-top:0;border-radius:0;transition:all 0s ease;-webkit-transition:all 0s ease;-moz-transition:all 0s ease;-o-transition:all 0s ease;box-sizing:border-box}
#nav-search #searchform{width:100%;position:relative;margin:10px 0;padding:0 10px;box-sizing:border-box;height:34px;overflow:hidden;border-radius:0}
#nav-search #s{width:100%;box-sizing:border-box;position:relative;height:34px;float:left;padding:0 10px;margin:0;border:0;background-color:rgba(255,255,255,0.05);font-size:12px;font-family:inherit;color:#F2F2F2;border-radius:0}
#nav-search #s:focus{color:#F2F2F2;outline:none}.featured{margin:0 auto;position:relative}</style>
<script>
   $("#search-icon").on("click", function() {
        $("#nav-search").slideDown(250)
    });

$('#s').focusout(function() {
    $("#nav-search").hide();
    $("#nav-search").fadeIn(250);
    $("#nav-search").val('');
});
  </script>

<style>
body{background-color:black}
#div{background-color:white}
</style>

<script src="jquery.js"></script>
<script>
$(function() {

// EVENTO AO CLICAR NA DIV
$("#div").click(function(event){
event.preventDefault();
return false;
});
	
// EVENTO AO CLICAR FORA DA DIV
$("body").click(function(){ 
$("#div").hide();
});	
	
});	
</script>

<div id="div">div</div>