thực hành - menu canh trái và phải

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

Menu canh trái và phải


Website

Nội dung website ...

 

Xem kết quả

Tạo thanh menu canh trái và phải


Bước 1) Thêm HTML:

Ví dụ

<div class="menu">
    <a class="links" href="#" id="openDefault">Home</a>
    <a class="links" href="#">News</a>
    <a class="links" href="#">Contact</a>
    <div class="right">
        <a class="links" href="#">About</a>
        <a class="links" href="#">Support</a>
    </div>
</div>
<div class="content">
    <h2>Website</h2>
    <p>Nội dung website ...</p>
</div>

Bước 2) Thêm CSS:

Ví dụ

/* Tạo kiểu vùng chứa các liên kết menu */
.menu {
    background-color:black;
    overflow:hidden;    
}
/* Tạo kiểu cho các liên kết */
.menu a {
    display:block;
    float:left;
    padding:20px 24px;
    font-size:18px;
    color:white;
    text-decoration:none;    
}
/* Thay đổi màu nền khi di chuột */
.menu a:hover:not(.active) {
    background-color:#999;    
}
/* Thay đổi border khi liên kết đang kích hoạt */
.menu a.active {
    background-color:#428bca;    
}
/* Vùng chứa liên kết canh phải */
.menu .right {
    float:right;    
}
/* Tạo kiểu cho nội dung chính */
.content {
    padding:20px;
    border:1px solid #ccc;    
}

Bước 3) Thêm JavaScript:

Ví dụ

<script>
function addActive(x) {
    
    // Khai báo các biến
    var i, links;
    
    // 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","");
    }
    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>

Xem kết quả