thực hành - tạo fullscreen search

Trong bài thực hành này, chúng ta sẽ tạo một form fullscreen search bằng HTML, CSS và JavaScript.

Fullscreen search form

Cách tạo một fullscreen search form

Bước 1) Thêm HTML:

Ví dụ

<div class="containerx">
    <h2>Fullscreen Search Form</h2>
    <p>Click vào button bên dưới để mở search bar</p>
    <button type="button" id="openform">Open Search bar</button>
    <div class="overlay">
        <span id="closeform" title="Close form">&times;</span>
        <form action="/action_page.php" method="post">
            <input id="input" type="text" name="search" placeholder="Search..." required="required" />
            <button id="btn1" type="submit"><i class="fa fa-search"></i></button>
        </form>
    </div>
</div>

Bước 2) Thêm CSS:

Ví dụ

.containerx {
    padding:0 20px;    
}
/* Cố định lớp phủ */
.overlay {
    background-color:black;
    background-color:rgba(0,0,0,0.6);
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
}
/* Tạo kiểu cho phần tử span */
.overlay > span {
    font-size:50px;
    color:white;
    position:absolute;
    top:60px;
    right:60px;
    cursor:pointer;    
}
.overlay > span:hover {
    color:red;    
}
/* Tạo kiểu cho phần tử form */
.overlay > form {
    position:absolute;
    top:50%;
    left:50%;    
    width:70%;
    transform:translate(-50%,-50%);
}
/* Tạo kiểu cho phần tử input */
form > input {
    border:none;
    outline:none;
    padding:10px;
    width:80%;
    float:left;
    border-radius:5px 0px 0px 5px;    
}
/* Thêm hiệu ứng khi được lấy nét */
form > input:focus {
    box-shadow:0px -2px violet, 0px 2px violet, 2px 0px violet, -2px 0px violet;
}
/* Tạo kiểu cho phần tử button */
.containerx > button, form > button {
    border:none;
    outline:none;
    width:20%;
    font-size:16px;
    color:white;
    background-color:royalblue;
    float:left;
    padding:10px 0;
    text-align:center;
    border-radius:0px 5px 5px 0px;
    cursor:pointer;    
}
.containerx > button {
    width:200px;
    border-radius:5px;    
}
.containerx > button:hover, form > button:hover {
    background-color:orange;    
}
/* Clear fixed */
form:after {
    content:"";
    display:table;
    clear:both;    
}
/* Định nghĩa hiệu ứng */
@keyframes opacity {
    from { opacity:0;}
    to { opacity:1;}    
}

Bước 3) Thêm JavaScript:

Ví dụ

<script>

// Khai báo các biến
var openform, closeform, overlay, input, btn1;
openform = document.getElementById('openform');
closeform = document.getElementById('closeform');
overlay = document.getElementsByClassName('overlay')[0];
input = document.getElementById('input');
btn1 = document.getElementById('btn1');

// Click vào nút "Open Search bar" để mở form    
openform.onclick = function() {
    overlay.style.display = "block";
    overlay.style.animation = "opacity 0.8s";
}

// Click vào phần tử span để đóng form    
closeform.onclick = function() {
    overlay.style.display = "none";    
}

// Click vào vị trí bất kỳ để đóng form    
window.onclick = function(e) {
    if(e.target == overlay) {
        overlay.style.display = "none";
    }
}

// Thêm hiệu ứng boxshadow cho phần tử button khi lấy nét phần tử input    
input.onfocus = function() {
    btn1.style.boxShadow = "0px -2px violet, 0px 2px violet, 2px 0px violet";    
}

// Xóa hiệu ứng boxshadow cho phần tử button khi phần tử input thôi lấy nét    
input.onblur = function() {
    btn1.style.boxShadow = "none";    
}
</script>