Trang chủ » Làm phần header__navbar

Website

Làm phần header__navbar

Luxubu

16/09/2023

1 View 0

SaveSavedRemoved 0

Html cho phần header__navbar

Tạo danh sách QR Code, Mạng xã hội

<ul class="header__navbar-list">
                        <li class="header__navbar-item header__navbar-item--has-qr header__navbar-item--separate">Vào cửa hàng trên ứng dụng demo
                           <!-- header qr code -->
                            <div class="header__qr">
                                <img src="./assets/img/qr-code.png" alt="QR code" class="header__qr-img">
                                <div class="header__qr-apps">
                                    <a href="" class="header__qr-link">
                                        <img src="./assets/img/app.png" alt="App Store" class="header__qr-download-img">
                                    </a>
                                    <a href="" class="header__qr-link">
                                        <img src="./assets/img/google-code.png" alt="Google Play" class="header__qr-download-img">
                                    </a>
                                  
                                </div>
                            </div>
                        </li>
                        <li class="header__navbar-item">
                            <span class="header__navbar-title-no-pointer">Kết nối</span>
                            <a href="" class="header__navbar-icon-link">
                                <i class="header__navbar-icon fa-brands fa-facebook"></i>
                            </a>
                            <a href="" class="header__navbar-icon-link">
                                <i class="header__navbar-icon fa-brands fa-instagram"></i>
                            </a>
                        </li>
                    </ul>

• Tạo phần tử với tên class=”header__navbar-item header__navbar-item–has-qr header__navbar-item–separate” để quy định phần QR code
• Tạo phần QR code với tên class=”header__qr”
• Tạo hình ảnh QR code với tên class=”header__qr-img”
• Tạo thẻ div với class=”header__qr-apps” bao quát phần app tải xuống
• Tạo thẻ a với class=”header__qr-link” để chèn link tải xuống
• Tạo thẻ img với tên class=”header__qr-download-img” để chứa ảnh tải xuống
• Tạo thẻ span với class=”header__navbar-title-no-pointer” quy định cho phần “kết nối”
• Tạo thẻ a với class=”header__navbar-icon-link” để chèn link cho phần “Kết nối”
• Tạo thẻ i với class=”header__navbar-icon-link” để quy định cho phần icon mạng xã hội

Tạo danh sách chứa Thông báo, Trợ giúp, Đăng nhập, Đăng ký, User

<ul class="header__navbar-list">
                        <li class="header__navbar-item header__navbar-item--has-notify ">
                           <a href="" class="header__navbar-item-link">
                            <i class="header__navbar-icon fa-regular fa-bell"></i>Thông báo
                           </a>
                           <div class="header__notify">
                            <header class="header__notify-header">
                                <h3>Thông báo mới nhận</h3>
                            </header>
                            <ul class="header__notify-list">
                                <li class="header__notify-item header__notify-item--viewed">
                                    <a href="" class="header__notify-link">
                                        <img src="https://product.hstatic.net/200000117693/product/a6ff3a1501baa767db1a1c86058dce2d_48c291984d074cccafd637306e356fd9_medium.jpg" alt="" class="header__notify-img">
                                        <div class="header_notify-info">
                                            <span class="header__notify-name">
                                            Mỹ phẩm Ohui chính hãng
                                            </span>
                                            <span class="header__notify-descriotion">Mô tả của Mỹ phẩm Ohui chính hãng. Mô tả của Mỹ phẩm Ohui chính hãng</span>
                                        </div>
                                    </a>
                                </li>
                                <li class="header__notify-item header__notify-item--viewed">
                                    <a href="" class="header__notify-link">
                                        <img src="https://product.hstatic.net/200000117693/product/a6ff3a1501baa767db1a1c86058dce2d_48c291984d074cccafd637306e356fd9_medium.jpg" alt="" class="header__notify-img">
                                        <div class="header_notify-info">
                                            <span class="header__notify-name">
                                            Mỹ phẩm Ohui chính hãng
                                            </span>
                                            <span class="header__notify-descriotion">Mô tả của Mỹ phẩm Ohui chính hãng. Mô tả của Mỹ phẩm Ohui chính hãng</span>
                                        </div>
                                    </a>
                                </li>
                            </ul>
                            <footer class="header__notify-footer">
                                <a href="" class="header__notify-footer-btn">Xem chi tiết</a>

                            </footer>
                           </div>
                        </li>
                        <li class="header__navbar-item">
                            <a href="" class="header__navbar-item-link">
                            <i class="header__navbar-icon fa-regular fa-circle-question"></i>Trợ giúp
                            </a>
                        </li>
                        <!-- <li class="header__navbar-item header__navbar-item--strong header__navbar-item--separate">Đăng ký</li> -->
                        <!-- <li class="header__navbar-item header__navbar-item--strong">Đăng nhập</li> -->
                        <li class="header__navbar-item header__navbar-user">
                            <img src="https://fullstack.edu.vn/static/media/f8-icon.18cd71cfcfa33566a22b.png" alt="" class="header__navbar-user-img">
                            <span class="header__navbar-user-name">Le Phong</span>
                            <ul class="header__navbar-user-menu">
                                <li class="header__navbar-user-item">
                                    <a href="">Tài khoản của tôi</a>
                                </li>
                                <li class="header__navbar-user-item">
                                    <a href="">Địa chỉ của tôi</a>
                                </li>
                                <li class="header__navbar-user-item">
                                    <a href="">Đơn mua</a>
                                </li>
                                <li class="header__navbar-user-item header__navbar-user-item--separate">
                                    <a href="">Đăng xuất</a>
                                </li>
                            </ul>
                        </li>
                    </ul>

• Tạo phần tử danh sách “Thông báo” với tên class=”header__navbar-item header__navbar-item–has-notify “
• Tạo thẻ a class=”header__navbar-item-link” link phần “Thông báo”
• Tạo thẻ i class=”header__navbar-icon” cho phần icon của thông báo
• Tạo thẻ div chưa phần thông báo với class=”header__notify”
• Tạo “Thông báo mới nhận” với class=”header__notify-header”
• Tạo danh sách của phần thông báo với class=”header__notify-list”
• Tạo phần tử của danh sách với class=”header__notify-item header__notify-item–viewed”
• Tạo thẻ a link phần tử của danh sách với class=”header__notify-link”
• Tạo thẻ img với class=”header__notify-img” để chứa link ảnh
• Tạo thẻ div với class=”header_notify-info” để chứa phần thông tin của thông báo
• Tạo thẻ span để đặt tên cho phần tử của phần thông báo với class=”header__notify-name”
• Tạo thẻ span để viết mô tả cho phần tử của phần thông báo với class=”header__notify-descriotion”
• Tạo thẻ footer để chứa phần cuối của phần thông báo với class=”header__notify-footer”
• Tạo link cho “Xem chi tiết” với class=”header__notify-footer-btn”
• Tạo thẻ li để chứa phần tử danh sách “Trợ giúp” với class=”header__navbar-item”
• Tạo thẻ a với class=”header__navbar-item-link” để tạo link phần tử danh sách trợ giúp
• Tạo class=”header__navbar-icon” cho phần icon của trợ giúp
• Tạo class=”header__navbar-item header__navbar-item–strong header__navbar-item–separate” cho phần “Đăng ký”
• Tạo class=”header__navbar-item header__navbar-item–strong” cho phần “Đăng nhập”
• Tạo class=”header__navbar-item header__navbar-user” cho phần tử “User”
• Tạo img với class=”header__navbar-user-img” quy định cho hình ảnh user
• Tạo thẻ span với class=”header__navbar-user-name” Đặt tên cho user
• Tạo thẻ ul với class=”header__navbar-user-menu” tạo danh sách cho phần user
• Tạo thẻ li với class=”header__navbar-user-item” cho phần tử user
• Tạo thẻ a để đặt link cho từng phần tử user

Css cho phần header__navbar

Css cho phần tử trong danh sách

• Canh lề phần tử trên dưới là 0, trái phải 8px
• Relative lấy chính mình làm gốc tọa độ và không phụ thuộc vào đối tượng khác bên ngoài
• Chiều cao tối thiểu 26px

.header__navbar-item{
    margin: 0 8px;
    position: relative;
    min-height: 26px;
}

Do mặt định trình bày thẻ li là list-item vì thế nó không cùng nằm trên một hàng, như ta phải đưa nó lên thành một hàng bằng thuộc tính “inline-block”

.header__navbar-item, 
.header__navbar-item-link{
    display: inline-block;
    font-size: 1.3rem;
    color: var(--white-color);
    text-decoration: none;
    font-weight: 300;
}

• Trình bày trên một hàng dạng khối
• Cở chữ 13px, màu trắng, bỏ gạch chân, độ đậm 300

Cho in đậm chữ Đăng nhập và Đăng ký

Ta đặt thêm một class=”header__navbar-item–strong” và css riêng cho đối tượng này.

.header__navbar-item--strong{
    font-weight: 500;
}

Tạo gach phân cách sau “Tải ứng dụng của shop”

Thêm class với tên “header__navbar-item–separate”, tên này bạn có thể chọn tùy ý miễn sao dễ nhớ chèn trong thẻ li có chứa “Tải ứng dụng của shop”

<li class="header__navbar-item header__navbar-item--separate">Tải ứng dụng của shop</li>

Thêm phần tử sau nội dung tải ứng dụng

• Tạo content bằng chuổi rỗng
• Trình bày dạng khối
• Khai báo thuộc tính absolute lấy thẻ cha gần nhất có chứa Position là gốc tọa độ
• Tạo border left là 1px, kiểu solid-nét liền với với màu bên dưới
• Border này có chiều cao 16px tương đương với chiều cao của chữ
• Mặt định nó canh top và canh trái như vậy để nó nằm bên phải ta dùng thuộc tính right và thêm giá trị là âm 10px cho nó cách mép nội dung chữ là 10px.
• Ta đặt top: 50% tức là canh top có chiều cao bằng 50% thẻ li
• Nhưng vì top 50% nó đẩy xuống sâu hơn 50% chiều cao của chính nó nên ta trừ lại 50% cho căn bằng bằng thuộc tính transform theo trục y. Làm cách này thì nếu sau này có thay đổi chiều cao thẻ li thì nó tự động thay đổi theo không cần phải css lại.

.header__navbar-item--separate::after{
content: "";
display: block;
position: absolute;
border-left: 1px solid #FB9086;
height: 16px;
right: -10px;
top:50%;
transform: translateY(-50%);
}

Tương tự ta cũng tạo vạch phân cách này sau nội dung Đăng ký bằng cách thêm class vào thẻ li chứa nó.

 <li class="header__navbar-item header__navbar-item--strong header__navbar-item--separate">Đăng ký</li>