11 #permalink NAVBAR - sekcja paska nawigacji

Sekcja "Nagłówek strony"

.header: Kontener nagłówka strony, który posiada margines na górze wynoszący 60 pikseli i zajmuje całą dostępną wysokość widoku (height: 100vh). Elementy wewnątrz nagłówka są wyśrodkowane zarówno w pionie, jak i w poziomie, przy użyciu właściwości display: flex;, align-items: center; i justify-content: center;. Tekst w nagłówku jest również wyśrodkowany poziomo za pomocą text-align: center;.
.loading-top, .loading-bottom: Dwa paski animacji ładowania, z których każdy ma stałą pozycję (position: fixed) na górze i na dole strony, zajmuje całą dostępną szerokość (width: 100vw) oraz ma wysokość 4 piksele. Tło pasków jest gradientem liniowym z różnymi kolorami. Odpowiednie z-indexy (z-index: 1000, z-index: 1001) kontrolują ich położenie na stronie.

Sekcja "Struktura HTML"

HTML Markup: Kod HTML zawiera elementy nagłówka strony, w tym paski animacji ładowania (loading-top i loading-bottom). Ponadto, znajduje się logo, nawigacja w formie paska menu (hamburger menu) oraz lista linków nawigacyjnych.
Stylizacja nawigacji: Linki nawigacyjne są zgrupowane w znacznikach <ul> i <li>. Każdy link zawiera obrazek z tekstem, przy użyciu znacznika <ruby> do umieszczenia tekstu nad obrazkiem. Wprowadzono również efekt lazy loading (loading="lazy") dla obrazków. Dodatkowo, na prawym górnym rogu paska nawigacji znajduje się ikona koszyka (Cart).
Styl hamburger menu: Pasek nawigacyjny posiada opcję rozwijania (hamburger menu). Kliknięcie ikony "☰" (label) wywołuje zdarzenie zmiany stanu (input type="checkbox"), co powoduje rozwinięcie lub schowanie listy nawigacyjnej.

Example

Markup

<header>
        <div class="navbar">
            <a href="./index.html" class="logo"><img src="img/logo1transparent.webp" alt="Logo" loading="lazy" width="80" height="80"></a>
            <menu>
                <label id="hamburger" for="toggle">☰</label><input type="checkbox" id="toggle">
                <ul class="navbar-links">
                    <li>
                        <a href="./index.html" class="nav__item"><ruby><img src="img/home-alt.svg" alt="home" loading="lazy" width="25" height="25">
                                <rt>HOME</rt>
                            </ruby></a>
                    </li>
                    <li>
                        <a href="./aboutUs.html" class="nav__item"><ruby><img src="img/collage.svg" alt="collage" loading="lazy" width="25" height="25">
                                <rt>ABOUT US</rt>
                            </ruby></a>
                    </li>
                    <li>
                        <a href="./services.html" class="nav__item"><ruby><img src="img/ereader.svg" alt="ereader" loading="lazy" width="25" height="25">
                                <rt>SERVICES</rt>
                            </ruby></a>
                    </li>
                    <li>
                        <a href="./ourProducts.html" class="nav__item"><ruby><img src="img/calendar-next.svg" alt="calendar" loading="lazy" width="25" height="25">
                                <rt>PRODUCTS</rt>
                            </ruby></a>
                    </li>
                    <li>
                        <a href="./gallery.html" class="nav__item"><ruby><img src="img/color-bucket.svg" alt="color-bucket" loading="lazy" width="25" height="25">
                                <rt>GALLERY</rt>
                            </ruby></a>
                    </li>
                    <li>
                        <a href="./contact.html" class="nav__item"><ruby><img src="img/phone.svg" alt="phone" loading="lazy" width="25" height="25">
                                <rt>CONTACT</rt>
                            </ruby>
                        </a>
                    </li>
                    <li>
                        <a href="./faq.html" class="nav__item"><ruby><img src="img/comment.svg" alt="comment" loading="lazy" width="25" height="25">
                                <rt>FAQ</rt>
                            </ruby></a>
                    </li>
                </ul>
                <ul style="margin-right: 10px;">
                    <li>
                        <a href="./pay.html"><ruby><img id="koszyk" src="img/shopping-cart.svg" alt="cart" loading="lazy" width="25" height="25">
                                <rt>CART</rt>
                            </ruby></a>
                    </li>
                </ul>
            </menu>
        </div>
</header>

Source: styleFaq.css, line 462