Code giao diện Navigation

Dẫn nhập

Trong bài học trước chúng ta đã cùng nhau code xong POPUP COMPONENT.

Trong bài học này chúng ta sẽ cùng nhau code phần Giao diện cho Navigation.

---

Nội dung

Để tiếp thu tốt bài học này, các bạn cần:

• Có kiến thức cơ bản về CSS và SASS
• Đã xem qua các bài trước trong khóa LẬP TRÌNH CSS & SASS NÂNG CAO VỚI DỰ ÁN WEBSITE LANDING PAGE
• Đã hoàn thiện bài  GIAO DIỆN POPUP COMPONENT và CODE HIỆU ỨNG CHO POPUP COMPONENT.

Trong bài học này chúng ta sẽ cùng nhau:

• Code HTML của navigation
• Code Navigation__button và Navigation__background
• Code Navigation__nav

---

Code HTML của navigation

Chúng ta sẽ cùng quan sát giao diện phần này.

Ở đây ta có thể thấy là navigation gồm 3 phần :

• Phần 1 chinh là button để show navigation. 

• Phần 2 chính là những đường link dẫn đến các phần của website.
• Phần cuối cùng chính là background của website.

<div class="navigation">
        <input type="checkbox" class="navigation__checkbox" id="navi-toggle">
        <label for="navi-toggle" class="navigation__button">
            <span class="navigation__icon">&nbsp;</span>
        </label>
        <div class="navigation__background">&nbsp;</div>
        <div class="navigation__nav">
            <ul class="navigation__list">
                <li class="navigation__item"><a href="#" class="navigation__link">About us</a></li>
                <li class="navigation__item"><a href="#" class="navigation__link">Our Skills</a></li>
                <li class="navigation__item"><a href="#" class="navigation__link">Our courses</a></li>
                <li class="navigation__item"><a href="#" class="navigation__link">Testimonials</a></li>
                <li class="navigation__item"><a href="#" class="navigation__link">Enroll form</a></li>
            </ul>
        </div>
    </div>

Button của phần này được chỉnh thông qua class navigation__button và navigation__checkbox.

Ở đây navigation__checkbox và navigation__button là label sẽ giúp tạo hiệu ứng đóng mở background của phần navigation.

Trong khi navigation__icon sẽ giúp chỉnh giao diện của button. Trong đó navigation__icon sẽ giúp tạo ra 3 gạch ngang cũng như hiệu ứng sau khi click 3 gạch ngang chuyển thành dấu x của button, sẽ được nói kĩ hơn trong phần sau của bài học.

Phần background sẽ được chỉnh thông qua class navigation__background.

Và tiếp theo là navigation__nav bao quanh navigation__list chứa các navigation__item và navigation__link link đến các phần trong website.

Vậy là chúng ta đã xong phần html của navigation (thực tế bạn sẽ code html từng phần rồi code css luôn như background sau đó đến list và button, nhưng ở đây mình để sẵn code html toàn bộ để từ phần sau chúng ta chỉ quan tâm đến css của navigation thôi ).

---

Code Navigation__button và Navigation__background

Tạo file _navigation.scss ở layout và import vào file main.scss

Trước hết chúng ta sẽ display: none navigation__checkbox, (chỉ cần click vào label thì nó cũng tự check checbox do label đã link đến checkbox thông qua id của checkbox, for=”navi-toggle”).

.navigation {
    &__checkbox {
        display: none;
    }
}

Giờ thì ta sẽ code label (navigation__button)

Nó là 1 hình tròn (sử dụng border-radius), và posision fixed (scroll lên xuống đếu fix ở vị trí góc phải màn hình), text-align: center để icon 3 gạch được căn giữa (sẽ code icon 3 gạch ở phần sau), và thêm 1 chút shadow. Nhớ set z-index để chắc rằng navigation__button luôn ở trên các phần còn lại nha.

&__button {
        background-color: $color-white;
        height: 7rem;
        width: 7rem;
        
        top: 6rem;
        right: 6rem;
        border-radius: 50%;
        
        cursor: pointer;
        text-align: center;
        box-shadow: 0 1rem 3rem rgba($color-black, .15);
    }

Tiếp theo chúng ta sẽ code phần background.

Các bạn để ý hiệu ứng khi click vào button.

Background thực chất là 1 hình tròn đè lên website với tâm xuất phát từ button.

Vậy nên code background lúc chưa check cũng tương tự như chúng ta code phần button, chỉ khác màu, z index và có lẽ sẽ để kích thước hình tròn nhỏ hơn để có thể núp sau navigation__button.  

&__background {
        height: 6rem;
        width: 6rem;
        border-radius: 50%;
        
        top: 6.5rem;
        right: 6.5rem;
        background-image: radial-gradient($color-primary, $color-primary-dark);
        
        transition: transform .8s;
    }

Và khi ta click button thì background sẽ scale lên để che kín toàn bộ website (80 lần).

&__checkbox:checked~&__background {
        transform: scale(80);
    }

(~ dùng để sử dụng 1 hành động của element này để chỉnh thuộc tính CSS của element khác ngang hàng)

(Giờ thì các bạn có thể click để quan sát hiệu ứng mở background).

Tiếp sau đây chúng ta sẽ chỉnh CSS của navigation__nav.

---

Code Navigation__nav

Trước hết ta chỉnh scale của background lên 80 để chỉnh thuộc tính Css của navigation__nav thì có thể dễ dàng quan sát hơn.

Ở đây trước hết ta quan tâm đến z-index của nav, nó sẽ lớn hơn background nhưng phải nhỏ hơn button để không đè lên button khi xuất hiện. Position fixed cùng với backround. Opacity sẽ là 0 (nhưng ta tạm thời cứ để nó là 1 để chỉnh CSS cho nó xong xuôi trước đã :D),

Và đừng quên thêm transition của nó giống với transition của background.

Height sẽ là toàn màn hình, width sẽ để là 0 khi button chưa được check

(tương tự như opacity thì ta vẫn cứ để width 100% để ta chỉnh CSS trước đã ) 

  &__nav {
        height: 100vh;
        
        top: 0;
        right: 0;
        
        opacity: 0;
        width: 0;
        transition: all .8s;
    }

Tiếp theo chúng ta sẽ chỉnh đển navigation__list.

Trước hết sẽ là căn giữa, ta sẽ sử dụng mixin absCenter, list-style: none, text-align: center

&__list {
        @include absCenter;
        list-style: none;
        text-align: center;
    }

Giờ thì đến item và link của navigation.

Trước hết ta tạo khoảng cách giữa các item bằng cách sử dụng margin

&__item {
        margin: 1rem;
    }

Giờ thì đến navigation__link và hiệu ứng hover của nó.

 

(Background-image là 1 hình elip)

    

     (background-image che kín background có border-radius)

  &__link {

        &:link,
        &:visited {
            display: inline-block;
            font-size: 3rem;
            font-weight: 300;
            padding: 1rem 2rem;
            color: $color-white;
            text-decoration: none;
            text-transform: uppercase;
        }
    }

Đầu tiến là để link là display: inline-block, font-size, font-weight, padding nè và color: $color-white, tiếp đến text-decoration là none và tập cả chữ đều à uppercase, border-radius

Đây là lúc chúng ta sẽ chỉnh hiệu ứng hover của nó, ở đây background-image là 1 hình elip

background-image:
                radial-gradient(150% 200% ellipse at 115%,
                    $color-white 0%,
                    $color-white 50%,
                    transparent 50%);

(các bạn có thể xem lại việc sử dụng radial-gradient trong bài CODE ENROLL SECTION)

Ta set size của background image thật to là 252%, thì phần trắng (không chứa elip) sẽ đủ chứa toàn bộ link, và hình elip sẽ ở phía bên trái. Và khi hover thì ta chỉ cần dịch vị trí của background (background-%) để phần elip đè lên link.

&__link {

        &:link,
        &:visited {
            display: inline-block;
            border-radius: 4rem;
            font-size: 3rem;
            font-weight: 300;
            padding: 1rem 2rem;
            color: $color-white;
            text-decoration: none;
            text-transform: uppercase;
            background-image:
                radial-gradient(150% 200% ellipse at 115%,
                    $color-white 0%,
                    $color-white 50%,
                    transparent 50%);
            background-size: 252%;
            transition: all .4s;
        }
    }

Khi hover thì màu chữ chuyển thành màu $color-primary và chữ hơi dịch theo chiều ngang 1 chút.

 &:hover,
        &:active {
            background-%;
            color: $color-primary;
            transform: translateX(1rem);
        }

Giờ thì ta chỉ cần chỉnh lại các thuộc tính khi checked mới xuất hiện như scale của background, width, và opacity của list.

---

Code CSS

.navigation {
    &__checkbox {
        display: none;
    }

    &__button {
        background-color: $color-white;
        height: 7rem;
        width: 7rem;
        
        top: 6rem;
        right: 6rem;
        border-radius: 50%;
        
        cursor: pointer;
        text-align: center;
        box-shadow: 0 1rem 3rem rgba($color-black, .15);
    }

    &__background {
        height: 6rem;
        width: 6rem;
        border-radius: 50%;
        
        top: 6.5rem;
        right: 6.5rem;
        background-image: radial-gradient($color-primary, $color-primary-dark);
        
        transition: transform .8s;

        //  transform: scale(80);
    }

    &__nav {
        height: 100vh;
        
        top: 0;
        right: 0;
        
        opacity: 0;
        width: 0;
        transition: all .8s;
    }

    &__list {
        @include absCenter;
        list-style: none;
        text-align: center;
    }

    &__item {
        margin: 1rem;
    }

    &__link {

        &:link,
        &:visited {
            display: inline-block;
            border-radius: 4rem;
            font-size: 3rem;
            font-weight: 300;
            padding: 1rem 2rem;
            color: $color-white;
            text-decoration: none;
            text-transform: uppercase;
            background-image:
                radial-gradient(150% 200% ellipse at 115%,
                    $color-white 0%,
                    $color-white 50%,
                    transparent 50%);
            background-size: 252%;
            transition: all .4s;
        }
        

        &:hover,
        &:active {
            background-%;
            color: $color-primary;
            transform: translateX(1rem);
        }

    }

    &__checkbox:checked~&__background {
        transform: scale(80);
    }

    &__checkbox:checked~&__nav {
        opacity: 1;
        width: 100%;
    }
}

---

Kết luận

Ở bài này chúng ta đã cùng nhau kết thúc quá trình code Giao diện của Navigation.

Ở bài sau chúng ta sẽ kết thúc phần code navigation, CODE HOÀN THIỆN NAVIGATION__ICON.

Cảm ơn các bạn đã theo dõi bài viết. Hãy để lại bình luận và góp ý của mình để giúp phát triển bài viết tốt hơn. Đừng quên: "Luyện tập – Thử thách – Không ngại khó".

---

Thảo luận

Nếu bạn có bất kỳ khó khăn hay thắc mắc gì về khóa học, đừng ngần ngại đặt câu hỏi trong phần BÌNH LUẬN bên dưới hoặc trong mục HỎI & ĐÁP trên thư viện Howkteam.com để nhận được sự hỗ trợ từ cộng đồng.