<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="https://fooddb.ir/tools/assets/css/vendors/bootstrap.css" rel="stylesheet" id="bootstrap-css"> <script src="https://fooddb.ir/tools/assets/js/bootstrap/bootstrap.bundle.min.js"></script> <script src="https://fooddb.ir/tools/assets/js/jquery-3.6.0.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div style="height:100px;"></div> <header class="site-header"> <!-- Brand and toggle get grouped for better mobile display --> <div id="search-form" class="search-form js-search-form"> <form class="form-search" role="search" action="/search.php" method="get"> <div class="input-group"> <input type="text" class="form-control" placeholder="اینجا بنویسی می جوره" /> <span class="input-group-btn"> <button class="btn btn-info" type="button"> برگرد و بجور </button> </span> </div> </form> <div class="instant-results"> <ul class="list-unstyled result-bucket"> <li class="result-entry" data-suggestion="Target 1" data-position="1" data-type="type" data-analytics-type="merchant"> <a href="#" class="result-link"> <div class="media"> <div class="media-left"> <img style="width:40px;" src="https://fooddb.ir/custom/Thumbnail?width=650&height=500&filename=59002-fa-432062113-American%20pasteurized%20cheese.jpg"> </div> <div class="media-body"> <h4 class="media-heading"><a href="https://fooddb.ir/sub/fa/59002/%D9%BE%D9%86%DB%8C%D8%B1-%D9%BE%D8%A7%D8%B3%D8%AA%D9%88%D8%B1%DB%8C%D8%B2%D9%87-%D8%A2%D9%85%D8%B1%DB%8C%DA%A9%D8%A7%DB%8C%DB%8C-%D8%AA%DA%A9" target="_blank"> پنیر پاستوریزه آمریکایی، تک</a></h4> <p>0 تخفیف موجود</p> </div> </div> </a> </li> <li class="result-entry" data-suggestion="Target 1" data-position="1" data-type="type" data-analytics-type="merchant"> <a href="#" class="result-link"> <div class="media"> <div class="media-left"> <img style="width:40px;" src="https://fooddb.ir/custom/Thumbnail?width=650&height=500&filename=59002-fa-432062113-American%20pasteurized%20cheese.jpg"> </div> <div class="media-body"> <h4 class="media-heading"><a href="https://fooddb.ir/sub/fa/59002/%D9%BE%D9%86%DB%8C%D8%B1-%D9%BE%D8%A7%D8%B3%D8%AA%D9%88%D8%B1%DB%8C%D8%B2%D9%87-%D8%A2%D9%85%D8%B1%DB%8C%DA%A9%D8%A7%DB%8C%DB%8C-%D8%AA%DA%A9" target="_blank"> پنیر پاستوریزه آمریکایی، تک</a></h4> <p>5 تخفیف موجود</p> </div> </div> </a> </li> </ul> </div> </div> </header>

.site-header { height:450px; /* Remove affer */ max-width:500px;/* Remove affer */ margin: 50px auto; } #MainMenu { padding:0; } /*---------- Search ----------*/ .result-bucket li { padding: 7px 15px; } .instant-results { background: #fff; width: 100%; color: gray; position: absolute; top: 100%; left: 0; border: 1px solid rgba(0, 0, 0, .15); border-radius: 4px; -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, .175); box-shadow: 0 2px 4px rgba(0, 0, 0, .175); display: none; z-index: 9; } .form-search { transition: all 200ms ease-out; -webkit-transition: all 200ms ease-out; -ms-transition: all 200ms ease-out; } .search-form { position: relative; max-width: 100%; } .result-link { color: #4f7593; } .result-link .media-body { font-size: 13px; color: gray; } .result-link .media-heading { font-size: 15px; font-weight: 400; color: #4f7593; } .result-link:hover, .result-link:hover .media-heading, .result-link:hover .media-body { text-decoration: none; color: #4f7593 } .result-link .media-object { width: 50px; padding: 3px; border: 1px solid #c1c1c1; border-radius: 3px; } .result-entry + .result-entry { border-top:1px solid #ddd; }

$(document).ready(function () { //Open Search $('.form-search').click(function (event) { $(".instant-results").fadeIn('slow').css('height', 'auto'); event.stopPropagation(); }); $('body').click(function () { $(".instant-results").fadeOut('500'); }); });