Code hoàn thiện navigation _icon

Lập trình CSS và SASS nâng cao với dự án website Landing Page

5.0 (1 đánh giá)
Tạo bởi Nguyễn Minh Chí Cập nhật lần cuối 11:11 14-05-2020 1.579 lượt xem 0 bình luận
Học nhanh

Danh sách bài học

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:

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 ::after bằng cách sử dụng position: absolute.

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 {
        position: relative;
        margin-top: 3.2rem;

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

        &::before,
        &::after {
            content: "";
            position: absolute;
            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: "";
            position: absolute;
            left: 0;
            transition: all .2s;
        }

Code CSS

.navigation {
    &__checkbox {
        display: none;
    }

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

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

        //  transform: scale(80);
    }

    &__nav {
        height: 100vh;
        position: fixed;
        top: 0;
        right: 0;
        z-index: 1500;
        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-position: 100%;
            color: $color-primary;
            transform: translateX(1rem);
        }

    }

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

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

    &__icon {
        position: relative;
        margin-top: 3.2rem;

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

        &::before,
        &::after {
            content: "";
            position: absolute;
            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ó".


Tải xuống

Project

Nếu việc thực hành theo hướng dẫn không diễn ra suôn sẻ như mong muốn. Bạn cũng có thể tải xuống PROJECT THAM KHẢO ở link bên dưới!


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.

Nội dung bài viết

Tác giả/Dịch giả

Khóa học

Lập trình CSS và SASS nâng cao với dự án website Landing Page

Qua khóa FRONT END CƠ BẢN , Kteam đã hướng dẫn các bạn đã có được những kiến thức cơ bản về  HTML và CSS.

Trong combo Front End 2019, chúng ta sẽ cùng nhau tìm hiểu và áp dụng những kiến thức chuyên sâu về CSS. Do kiến thức về CSS trong khóa học khá lớn và chi tiết nên Kteam đã chia làm 2 phần.

  • Phần 1: CSS và SASS Nâng Cao
  • Phần 2: Flexbox và CSS grid layouts

Ở khóa học này chúng ta sẽ cũng nhau tìm hiểu tổng quát về phần 1: CSS và SASS Nâng Cao với dự án Website Landing Page.

Bạn cũng có thể truy cập vào đường link bên dưới để xem bản PRIEVIEW của website landing page Selftaught 2019 mà chúng ta sẽ cùng thực hiện nhé! 

LANDING PAGE WEBSITE SELFTAUGHT 2019

Đánh giá

12312thaipro đã đánh giá 18:02 20-05-2020

Chat luong 1 sao

Bình luận

Để bình luận, bạn cần đăng nhập bằng tài khoản Howkteam.

Đăng nhập
Không có video.