[WebDesign] Hướng dẫn tạo Search Box Overlay

Ở bài viết trước tôi có giới thiệu cho các bạn 1 form search box overlay, tiếp tục chủ đề đó ở bài viết này cũng là 1 form search overlay nhưng sử dụng js hơn. Demo tại đây

 DEMO Bắt đầu thủ thuật !

Tích hợp fontawesome nếu blog bạn chưa có, chèn đoạn mã sau trước thẻ đóng </head>

<link href='//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>

Tích hợp JQuery nếu blog bạn chưa có, chèn đoạn mã sau trước thẻ đóng </head>

<script src='//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js' type='text/javascript'/>

Viết CSS, dán code sau vào trước thẻ ]]></b:skin>

#search-overlay{width:100%;height:100%;position:fixed;background-color:rgba(0,0,0,0.90);z-index:9999;display:none;top:0;left:0}
#search-overlay .close{font-size:27px;color:#fff;right:20px;top:20px;font-weight:700;position:fixed;cursor:pointer}
form.s{background:transparent;text-align:center;position:fixed;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}
input.sb{border:none;padding:10px 0;background:none;color:#fff;outline:none;border-bottom:1px dashed #fff;width:100%;font:17px 'times',monospace;display:inline-block;width:auto;min-width:400px;font-size:20px}
.search-icon{background:transparent;border:none;cursor:pointer;position:absolute;top:18px;right:-32px;color:#fff;font-size:17px}
.btn-search{text-decoration:none;background-color:transparent;color:#333}
.btn-search a{color:#333}
.search-icon:hover,.close i:hover{color:#ff0000;transition:.3s}

Định vị trí đặt button

<div class='search-button'>
  <a class='btn-search' href='#' rel='nofollow' title='Search'>
    <i class="fa fa-search"></i>
  </a>
</div>

Cuối cùng đặt đoạn code sau trước thẻ mở <body...

<div id='search-overlay'>
    <div class='close'><i class='fa fa-close' title='Close'></i></div>
    <form action='/search' class='s' method='GET'>
        <input autocomplete='off' required="required" class='sb' name='q' placeholder='Type your keywords' type='search' />
            <button class='search-icon' type='submit'>
                <i class="fa fa-search"></i>
            </button>
    </form>
</div>
<script type="text/javascript">//<![CDATA[
    $(document).ready(function() { $(".btn-search").click(function() { $("#search-overlay").fadeIn('slow') }), $(".close").click(function() { $("#search-overlay").fadeOut() }) });
//]]></script>

Lưu lại và kiểm tra thành quả

Tùy chỉnh CSS theo ý thích của bạn, nếu có bất kỳ id hoặc class nào trùng với template bạn đang dùng hãy thay đổi nó.

Kết luận : Đây là 1 form đẹp, sử dụng ít js, chiếm ít diện tích và responsive tốt bạn nên tích hợp nó vào website của mình. Nếu bạn gặp phải khó khăn khi tích hợp, đừng ngần ngại để lại nhận xét để được hỗ trợ

Good Luck !