Điều hướng có liên kết bên phải

Trong bài thực hành này, chúng ta sẽ cùng tìm hiểu cách tạo một thanh điều hướng có liên kết phân tách về bên phải bằng HTML, CSS và JavaScript.

Điều hướng có liên kết phân tách

Website

Nội dung website ...

Xem kết quả

Tạo một thanh điều hướng có liên kết phân tách

Bước 1) Thêm HTML:

Ví dụ

<div class="navigation">
    <a href="#" class="navLinks" onclick="addActive(event)">Home</a>
    <a href="#" class="navLinks" onclick="addActive(event)">News</a>
    <a href="#" class="navLinks" onclick="addActive(event)">Contact</a>
    <a href="#" class="navLinks" onclick="addActive(event)" id="openDefault">Help</a>
</div>
<div class="content">
    <h1>Website</h1>
    <p>Nội dung website ...</p>
</div>

Bước 2) Thêm CSS:

Ví dụ

/* Tạo kiểu cho vùng chứa thanh điều hướng */
.navigation {
    background-color:black;
    overflow:hidden;    
}
/* Tạo kiểu cho các liên kết */
.navigation a {
    color:white;
    text-decoration:none;
    padding:12px 22px;    
    display:inline-block;
    float:left;
    font-size:18px;
    background-color:inherit;
}
/* Liên kết cuối float sang phải */
.navigation a:last-child {
    float:right;    
}
/* Thay đổi màu nền của các liên kết khi di chuột */
.navigation a:hover:not(.active) {
    background-color:#ccc;    
    color:black;
}
/* Thay đổi màu nền khi được active */
.navigation a.active {
    background-color:#428BCA;
    color:white;    
}
/* Đặt kiểu mặc định cho nội dung */
.content {
    border:1px solid #ddd;
    padding:20px;    
}

Bước 3) Thêm JavaScript:

Ví dụ

<script>
function addActive(evt) {
    
    // Khai báo biến
    var i, navLinks;
    
    // Lấy tất cả các phần tử với class="navLinks", xóa lớp "active" và background
    navLinks = document.getElementsByClassName('navLinks');
    for(i = 0; i < navLinks.length; i++) {
        navLinks[i].className = navLinks[i].className.replace(" active","");
        navLinks[i].style.backgroundColor = "none";
    }
    
    // Thêm một lớp "active" vào liên kết đã click
    evt.currentTarget.className += " active";    
}

// Lấy phần tử có id = "openDefault" và nhấp vào phần tử đó
document.getElementById('openDefault').click();
</script>