Code hoàn thiện navigation _icon

Dẫn nhập

Trong bài trước chúng ta đã cùng nhau CODE GIAO DIỆN NAVIGATION.

Trong bài này chúng ta sẽ Code Navigation _icon.

---

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
•  GIAO DIỆN POPUP COMPONENT 
• CODE HIỆU ỨNG CHO POPUP COMPONENT.
• CODE GIAO DIỆN NAVIGATION.

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

• Code giao diện cho navigation__icon
• Code hiệu ứng cho navigation__icon.

---

Code giao diện cho navigation__icon

                          

Ở đây 3 gạch của navigation__icon gồm gach ở dưới chính là navigation__icon, gạch trên là pseudo class before của nó, gạch dưới lại là class after của nó.

margin-top của icon để căn vị trí của icon, và để position của icon là relative để ta có thể chỉnh vị trí của ::before và ::after bằng cách sử dụng .

Mỗi thanh gạch ngang sẽ là 1 element với background color là $color-grey-dark-1. Với chiều dài là 3.5rem, chiều cao là .3rem, chúng cách nhau .8rem

&__icon {
        
        margin-top: 3.2rem;

        &,
        &::before,
        &::after {
            width: 3.5rem;
            height: .3rem;
            background-color: $color-grey-dark-1;
            display: inline-block;
        }

        &::before,
        &::after {
            content: "";
            
            left: 0;
        }

        &::before {
            top: -.8rem;
        }

        &::after {
            top: .8rem;
        }

    }

Ta tiếp tục chỉnh hiệu ứng khi hover chúng thì khoảng cách giữa các gạch rộng ra 1 chút.

&__button:hover &__icon::before {
        top: -1rem;
    }

    &__button:hover &__icon::after {
        top: 1rem;
    }

Đó là vị trí của 3 gạch khi button chưa được click.

Phần tiếp theo sẽ là code hiệu ứng khi click button của navigation__icon

---

Code hiệu ứng cho navigation__icon.

Ở đây ta thấy hiệu ứng khi click sẽ là gạch trên và gạch dưới sẽ quay tạo thành hình chữ X, và tất nhiên gạch ở giữa thừa thì sẽ biến mất (hay background-color: transparent)

&__checkbox:checked + &__button &__icon{
       background-color: transparent;
    }

(Dấu + sử dụng khi element được trigger bằng 1 hành động như hover, checked, … sẽ chỉnh element ngang hàng ngay dưới nó, ở đây chính là &__button, và ta cần chỉnh &__icon là element con của button và ta đã sử dụng code để select  như trên )

Tiếp đến khi click, gạch trên (::before) sẽ quay 1 góc 135 độ theo chiều kim đồng hồ và ngược lại gạch dưới (::after) sẽ quay 1 góc 135 ngược chiều kim đồng hồ (Ta sẽ để transition của phần này là 4s để dễ quan sát)

&__checkbox:checked+&__button &__icon::before {

        transform: rotate(135deg);
    }

    &__checkbox:checked+&__button &__icon::after {
    
        transform: rotate(-135deg);
    }

Chiều quay đã được như mong muốn nhưng vị trí của 2 gạch thì chưa chính xác, ta chỉnh tiếp đến vị trí của 2 gạch khi click, set top của chúng đều bằng 0 (khi click vị trí của chúng như nhau chỉ khác chiều nghiêng)

 &__checkbox:checked+&__button &__icon::before {
        top: 0;
        transform: rotate(135deg);
    }

    &__checkbox:checked+&__button &__icon::after {
        top: 0;
        transform: rotate(-135deg);
    }

Và giờ chỉ cần set transition cho phần này nữa là ta đã hoàn thiện xong phần code navigation rồi.

 &::before,
        &::after {
            content: "";
            
            left: 0;
            transition: all .2s;
        }

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%;
    }

    &__icon {
        
        margin-top: 3.2rem;

        &,
        &::before,
        &::after {
            width: 3.5rem;
            height: .3rem;
            background-color: $color-grey-dark-1;
            display: inline-block;
        }

        &::before,
        &::after {
            content: "";
            
            left: 0;
            transition: all .2s;
        }

        &::before {
            top: -.8rem;
        }

        &::after {
            top: .8rem;
        }

    }

    &__button:hover &__icon::before {
        top: -1rem;
    }

    &__button:hover &__icon::after {
        top: 1rem;
    }

    &__checkbox:checked+&__button &__icon {
        background-color: transparent;
    }

    &__checkbox:checked+&__button &__icon::before {
        top: 0;
        transform: rotate(135deg);
    }

    &__checkbox:checked+&__button &__icon::after {
        top: 0;
        transform: rotate(-135deg);
    }
}

---

Kết luận

Trong bài này chúng ta đã cùng nhau kết thúc quá trình code navigation.

Trong bài học sau chúng ta sẽ bắt đầu CODE RESPONSIVE CHO WEB LANDING PAGE.

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.