Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Tạo Thanh Điều Hướng Navigation Trong Suốt Bằng HTML CSS

Tạo Thanh Điều Hướng Navigation Trong Suốt Bằng HTML CSS


Ngày 20 Tháng 10 Năm 2020

Tạo Thanh Điều Hướng Navigation Trong Suốt Bằng HTML CSS

Ngày hôm nay chúng ta sẽ cùng nhau đi vào tìm hiểu cách tạo navagtion trong suốt (transparent) cho trang web bằng HTML và CSS nhé!

Tạo Cấu Trúc Cho Thanh Tiêu Đề

Phần đầu tiên chúng ta sẽ đi vào tạo hai file là index.html(nơi lưu trữ HTML) và style.css(nơi lưu trữ mã CSS). Sau đó liên kết chúng với Google Font và Font Awesome v4.7 thông qua đoạn mã dưới đây nhé:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tạo Navigation Trong Suốt</title>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:[email protected];500&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>

Thêm Phần Tử HTML Cần Thiết Cho Navigation

Trong phần này chúng ta sẽ đi vào thêm các thẻ HTML cần thiết để tạo thanh tiêu đề trong suốt thông qua đoạn mã bên dưới nhé:

HTML

<!--Bắt Đầu Navigation -->
<nav>
    <div class="brand">
        <h2>Niềm Vui Lập Trình</h2>
    </div>
    <ul>
        <li><a href=""><i class="fa fa-home" aria-hidden="true"></i> Trang Chủ</a></li>
        <li><a href=""><i class="fa fa-info" aria-hidden="true"></i> Về Chúng Tôi</a></li>
        <li><a href=""><i class="fa fa-truck" aria-hidden="true"></i> Dịch Vụ</a></li>
        <li><a href=""><i class="fa fa-telegram" aria-hidden="true"></i> Thông Tin</a></li>
        <li><a href=""><i class="fa fa-location-arrow" aria-hidden="true"></i> Địa Chỉ</a></li>
    </ul>
</nav>
<!--Kết Thúc Navigation -->

<!-- Dùng Để Chèn Hình Ảnh-->
<section class="section1"></section>
<!-- Dùng Để Chèn Hình Ảnh-->

<!--Hiển Thị Nội Dung Văn Bản-->
<section class="section2">
    <h1>What is Lorem Ipsum?</h1>
    <p>
        Lorem Ipsum is ...
    </p>
    <h1>Why do we use it?</h1>
    <p>
        Lorem Ipsum is...
    </p>
</section>
<!--Hiển Thị Nội Dung Văn Bản-->

Và đây là hình ảnh của kết quả khi ta thêm các thẻ HTML vào trang index.html nhé:

Navigation Trong Suốt 1

Chèn Hình Ảnh Và Xác Định Font Chữ Cho Navigation Bằng CSS

Để tạo hiệu ứng transparent cho thanh tiêu đề thì chúng ta cần phải có một hình ảnh nằm phía sau nó. Do đó trong phần này ta sẽ chèn hình ảnh cho thẻ <section class="section1"> và xác định font chữ cho toàn bộ nội dung trang web. Để nắm rõ hơn bạn xem đoạn mã sau nhé:

CSS

body{
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif;
}
section.section1{
    width: 100%;
    height: 100vh;
    box-sizing: border-box;
    background: url(https://res.cloudinary.com/dn4nxz7f0/image/upload/v1603170394/navigation_trong_suot/pexels-life-of-pix-7919_zydtt2.jpg);
    background-size: cover;
}

Và bên dưới là kết quả của chúng ta nhé:

Navigation Trong Suốt 2

Xác định Vị Trí Cho Thanh Tiêu Đề Bằng CSS

Trong phần này chúng ta sẽ thiết lập các thuộc tính CSS cơ bản để xác định vị trí của thanh tiêu đề trong trang web thông qua thẻ <nav> bằng đoạn mã sau nhé:

CSS

nav{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    background: rgba(0,0,0,0.4);
    padding: 0 100px ;
    box-sizing: border-box;
    box-shadow: 0 1px 1px rgba(0,0,0,0.12),
    0 2px 2px rgba(0,0,0,0.12),
    0 4px 4px rgba(0,0,0,0.12),
    0 8px 8px rgba(0,0,0,0.12),
    0 16px 16px rgba(0,0,0,0.12);
}

Kết quả bạn xem bên dưới nhé:

Navigation Trong Suốt 3

Ở đây mình có một lưu ý là yếu tố quan trọng để thanh tiêu đề trong suốt trong đoạn mã trên là thuộc tính background: rgba(0,0,0,0.4);. Nó sẽ xác định background của chúng ta là màu đen(rgba(0,0,0,)) và độ opacity sẽ bằng 0.4. Do đó bạn có thể vừa hiển thị được thanh tiêu đề vừa nhìn thấy được hình ảnh bên dưới .

Căn Chỉnh Các Phần Tử Con Trong Navigation

Trong phần này chúng ta sẽ đi vào căn chỉnh vị trí của các phần tử con. Việc làm này sẽ giúp bố cục của thanh tiêu đề trông hài hòa và đẹp mắt hơn. Để hiểu rõ hơn bạn xem đoạn mã sau nhé:

CSS

nav .brand{
    float: left;
    height: 100%;
    line-height: 80px;
}
nav .brand h2{
    margin: 0;
    padding: 0;
    color: #fff;
}
nav ul{
    float: right;
    display: flex;
    margin:0;
    padding: 0;
}
nav ul li{
    list-style: none;
}
nav ul li a{
    position: relative;
    display: block;
    height: 80px;
    line-height: 80px;
    padding: 0 20px;
    box-sizing: border-box;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    transition: 0.5s
}

Bạn xem hình ảnh kết quả bên dưới nhé:

Navigation Trong Suốt 4

Tạo Hiệu Ứng Hover Cho Đường Dẫn Trong Thanh Tiêu Đề

Phần cuối cùng chúng ta sẽ đi vào tạo hiệu ứng hover cho đường dẫn trong navigation transparent thông qua đoạn code sau đây nhé:

CSS

nav ul li a:before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    transform-origin: right;
    z-index: -1;
    transform: scaleX(0);
    transition:  transform 0.5s;
}
nav ul li a:hover:before{
    transform-origin: left;
    transform: scaleX(1);
}
nav ul li a:hover{
    color: #262626;
}
section.section2{
    padding: 150px;
}

Và kết quả bạn xem video bên dưới nha!

Còn dưới đây là đường dẫn của dự án này trên codepen nhé!

Nguồn Codepen

Nếu bạn muốn tham khảo thêm về các thiết kế navigation khác thì có thể truy cập ở đường dẫn bên dưới nhé!

Snippet Component Navbar Bootstrap 4

Tổng kết:

Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn những kiến thức tạo navigation trong suốt hữu ích dành cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!

Load WooCommerce Stores in 249ms!