Thực hành - thanh menu dưới đáp ứng

Trong bài thực hành này, chúng ta sẽ tìm hiểu cách tạo menu điều hướng phía dưới đáp ứng bằng HTML, CSS và JavaScript.

Thanh menu dưới đáp ứng

Tạo thanh menu dưới đáp ứng

Bước 1) Thêm HTML:

Ví dụ

<div class="menuDuoi" id="responsive">
    <a class="links active" href="javascript:void(0)" id="openDefault">Home</a>
    <a class="links" href="javascript:void(0)">News</a>
    <a class="links" href="javascript:void(0)">Contact</a>
    <a class="links" href="javascript:void(0)">About</a>
    <a class="links" href="javascript:void(0)">Support</a>
    <a class="icon" href="javascript:void(0)" onclick="showMenu()">&#9776;</a>
</div>

Tạo một phần tử liên kết với class="icon" để mở và đóng thanh điều hướng trên màn hình nhỏ.

Bước 2) Thêm CSS:

Ví dụ

/* Tạo kiểu vùng chứa các liên kết menu */
.menuDuoi {
    background-color:black;
    position:fixed;
    bottom:0;
    left:0;
    width:100%;
    overflow:hidden;    
}
/* Tạo kiểu cho các liên kết */
.menuDuoi a {
    color:white;
    float:left;
    padding:20px;
    text-decoration:none;
    font-size:18px;    
    display:block;
}
/* Thay đổi màu nền khi di chuột */
.menuDuoi a:hover:not(.active) {
    background-color:#999;    
}
/* Thay đổi màu nền khi liên kết đang kích hoạt */
.menuDuoi a.active {
    background-color:#428bca;    
}
/* Ẩn phần tử trên màn hình bình thường */
.menuDuoi a.icon {
    display:none;    
}
/* Thay đổi hiển thị khi màn hình nhỏ hơn 700px */
@media screen and (max-width:700px) {
    .menuDuoi a:not(:first-child) {
        display:none;    
    }
    .menuDuoi a.icon {
        display:block;    
        float:right;
        position:absolute;
        right:0;
        bottom:0;
    }
}
@media screen and (max-width:700px) {
    .menuDuoi.responsive a {
        display:block;
        float:none;    
    }
}

Bước 3) Thêm JavaScript:

Ví dụ

<script>
// Định nghĩa hàm thêm class đáp ứng khi click vào icon menu
function showMenu() {
    var x;
    x = document.getElementById('responsive');
    if(x.className === "menuDuoi") {
        x.className += " responsive";
    }else{
        x.className = "menuDuoi";
    }    
}
function addActive(x) {
    
    // Khai báo các biến
    var links, i;
    
    // Xóa các lớp active
    links = document.getElementsByClassName('links');
    for(i = 0; i < links.length; i++) {
        links[i].className = links[i].className.replace(" active","");
    }
    
    // Thêm lớp active
    x.currentTarget.className += " active";    
}

// Gán sự kiện onclick vào các liên kết
var i, links;
links = document.getElementsByClassName('links');
for(i = 0; i < links.length; i++) {
    links[i].onclick = addActive;
}

// Tìm phần tử có id=openDefault và click vào
document.getElementById('openDefault').click();
</script>