KSS Style Guide

10 #permalink NAVBAR - sekcja paska nawigacji

Toggle example guides Toggle HTML markup

Styl nawigacyjny (navbar)

  1. #nav: Główny kontener nawigacji, zajmujący pełną szerokość strony (width: 100%). Jest umieszczony na górze strony (position: fixed; left: 0; top: 0;) i ma wysokość 35px. Ma tło w kolorze var(--nav-color) i białe obramowanie z góry i dołu o grubości 0.5px (border-top: 0.5px solid var(--color-black); border-bottom: 0.5px solid var(--color-black);).

  2. #menu: Lista nawigacyjna, zawierająca elementy menu. Jest wyśrodkowana poziomo (text-align: center;) i nie ma żadnych wypunktowań (list-style-type: none;). Rozmiar czcionki dla elementów menu wynosi 15px, a wysokość to 35px, z liniowym odstępem wynoszącym 200%.

  3. #menu a: Styl linków w menu. Linki są koloru var(--color-white), nie posiadają podkreślenia (text-decoration: none;) i są wyświetlane jako bloki (display: block;). Mają również odstęp na górze wynoszący 5px.

  4. #menu > li: Styl dla elementów listy menu. Elementy te są ustawione obok siebie (float: left;) i mają szerokość 150px. Mają również wysokość 40px oraz przerwanie obramowania na prawej stronie, tworząc efekt kropkowanej linii (border-right: 1px dotted var(--color-white);). Ostatni element listy nie ma tej kropkowanej linii (border-right: none;).

  5. #menu > li:hover: Styl dla elementu listy menu, który jest najechany kursorem. Wtedy element ten zmienia tło na kolor var(--linav-color).

  6. ol > li:hover > a: Styl dla linków wewnątrz elementów listy menu, które są najechane kursorem. Zmienia kolor tekstu na var(--color-grayLight).

  7. #menu > li > ul: Styl dla podmenu (submenu) elementów listy menu. Submenu jest ukryte (display: none;) i ma białe tło z kropkowaną obramowaniem na dole (background-color: var(--linav-color); border-bottom: 1px dotted var(--color-black);).

  8. #menu > li:hover > ul: Styl dla podmenu, które jest wyświetlane po najechaniu kursorem na element listy menu. Podmenu staje się widoczne (display: block;), ma animację opadania (swingdown) trwającą 1 sekundę (animation-name: swingdown; animation-duration: 1s;) oraz przejście animacji z funkcją czasową ease (animation-timing-function: ease;).

  9. #menu > li > ul > li:hover: Styl dla elementów podmenu, które są najechane kursorem. Tło elementu zmienia kolor na #da7400.

  10. #menu > li > ul > li:last-child: Styl dla ostatniego elementu w podmenu. Ten element nie ma dolnej obramowania (border-bottom: none;).

  11. #menu > li > ul > li > ul: Styl dla submenu drugiego poziomu (pod-podmenu). Submenu drugiego poziomu jest ukryte (display: none;) i położone na prawo od swojego nadrzędnego elementu (position: absolute; left: 100%; top: 0;). Ma szerokość 150px, białe tło z kropkowaną obramowaniem na dole (background-color: var(--lilinav-color); border-bottom: 1px dotted var(--color-black);), oraz jest na wyższym poziomie z-index (z-index: 100;).

  12. #menu > li > ul > li > ul > li:hover: Styl dla elementów submenu drugiego poziomu, które są najechane kursorem. Tło tych elementów zmienia kolor na var(--lililinav--color).

Przycisk hamburgera (dla responsywności)

  1. #hamburger: Styl przycisku hamburgera używanego w responsywności. Przycisk ten jest domyślnie ukryty (display: none;), ale staje się widoczny na mniejszych ekranach. Ma biały kolor, zmienia kształt podczas hovera (transition: transform 0.2s;), oraz zawiera odstęp od lewej i prawej strony (padding: 0px 10px;) i ma font-size 1.5rem.

  2. input#toggle: Ukryty input typu checkbox, który jest używany do kontrolowania widoczności menu na mniejszych ekranach.

Ikona koszyka

  1. .cart-icon: Styl dla ikony koszyka. Ikona jest centrowana poziomo i ma kursor o kształcie dłoni (cursor: pointer; display: flex; justify-content: center;).

  2. #cartCount: Styl dla licznika produktów w koszyku. Tło jest czerwone, tekst biały, padding wynosi 2px 5px, a border-radius to 50%. Rozmiar czcionki wynosi 0.8em.

Media queries dla responsywności

  1. Media queries dostosowujące styl nawigacji do różnych szerokości ekranu. Na ekranach o szerokości od 769px do 999px, przycisk hamburgera staje się widoczny i rośnie w rozmiarze. Na ekranach o szerokości do 768px, menu jest ukrywane, a przycisk hamburgera staje się widoczny i umożliwia otwieranie i zamykanie menu.

  2. Dodatkowe media queries dostosowujące styl nawigacji do ekranów o szerokości do 650px. W tym przypadku podmenu jest przesuwane na prawo i rośnie

w szerokości, a elementy menu i linki zmniejszają swoją szerokość.

Example
Markup 
    <header>
        <nav>
            <div id="nav">
                <label id="hamburger" for="toggle">☰</label>
                        <!-- Przycisk menu hamburger dla responsywności -->
                <input type="checkbox" id="toggle">
                <ol id="menu">
                    <li class="menuItem"><a href="./index.html"><ruby><img src="img/home-alt.svg" alt="home" loading="lazy" width="25" height="25">
                        <rt>HOME</rt>
                    </ruby></a>
                    <ul style="display:none;">
                    </ul>
                    </li>
                    <li class="menuItem"><a href="./aboutUs.html"><ruby><img src="img/collage.svg" alt="collage" loading="lazy" width="25" height="25">
                        <rt>ABOUT US</rt>
                    </ruby></a></li>
                    <li class="menuItem"><a href="./product.html"><ruby><img src="img/calendar-next.svg" alt="calendar" loading="lazy" width="25" height="25">
                        <rt>PRODUCTS</rt>
                    </ruby></a>
                        <ul class="podmenu">
                            <li class="podmenuItem"><a href="./product.html#kid1"><ruby><img src="img/kids.webp" alt="calendar" loading="lazy" width="25" height="25">
                                <rt>PRODUCTS KID</rt>
                            </ruby></a></li>
                            <li class="podmenuItem"><a href="./product.html#men1"><ruby><img src="img/man.webp" alt="calendar" loading="lazy" width="25" height="25">
                                <rt>PRODUCT MEN</rt>
                            </ruby></a></li>
                            <li class="podmenuItem"><a href="./product.html#women1"><ruby><img src="img/woman.webp" alt="calendar" loading="lazy" width="25" height="25">
                                <rt>PRODUCT WOMEN</rt>
                            </ruby></a></li>
                        </ul>
                    </li>
                    <li class="menuItem"><a href="./contact.html"><ruby><img src="img/phone.svg" alt="phone" loading="lazy" width="25" height="25">
                        <rt>CONCACT</rt>
                    </ruby></a></li>
                    <li class="menuItem"><a href="./gallery.html"><ruby><img src="img/color-bucket.svg" alt="color-bucket" loading="lazy" width="25" height="25">
                        <rt>GALLERY</rt>
                    </ruby></a>
                        <ul class="podmenu">
                            <li class="podmenuItem"><a href="./gallery.html#kid"><ruby><img src="img/kids.webp" alt="calendar" loading="lazy" width="25" height="25">
                                <rt>GALLERY KID</rt>
                            </ruby></a>
                                <ul class="podpodmenu">
                                    <li class="podpodmenuItem"><a href="./gallery.html#spring1"><ruby><img src="img/sakura.webp" alt="calendar" loading="lazy" width="25" height="25">
                                        <rt>SPRING</rt>
                                    </ruby></a></li>
                                    <li class="podpodmenuItem"><a href="./gallery.html#summer1"><ruby><img src="img/sun.webp" alt="calendar" loading="lazy" width="25" height="25">
                                        <rt>SUMMER</rt>
                                    </ruby></a></li>
                                    <li class="podpodmenuItem"><a href="./gallery.html#autumn1"><ruby><img src="img/leaves.webp" alt="calendar" loading="lazy" width="25" height="25">
                                        <rt>AUTUMN</rt>
                                    </ruby></a></li>
                                    <li class="podpodmenuItem"><a href="./gallery.html#winter1"><ruby><img src="img/snowflake.webp" alt="calendar" loading="lazy" width="25" height="25">
                                        <rt>WINTER</rt>
                                    </ruby></a></li>
                                </ul>
                            </li>
                            <li class="podmenuItem"><a href="./gallery.html#men"><ruby><img src="img/man.webp" alt="calendar" loading="lazy" width="25" height="25">
                                <rt>GALLERY MEN</rt>
                            </ruby></a>
                                <ul class="podpodmenu">
                                    <li class="podpodmenuItem"><a href="./gallery.html#spring2"><ruby><img src="img/sakura.webp" alt="calendar" loading="lazy" width="25" height="25">
                                        <rt>SPRING</rt>
                                    </ruby></a></li>
                                    <li class="podpodmenuItem"><a href="./gallery.html#summer2"><ruby><img src="img/sun.webp" alt="calendar" loading="lazy" width="25" height="25">
                                        <rt>SUMMER</rt>
                                    </ruby></a></li>
                                    <li class="podpodmenuItem"><a href="./gallery.html#autumn2"><ruby><img src="img/leaves.webp" alt="calendar" loading="lazy" width="25" height="25">
                                        <rt>AUTUMN</rt>
                                    </ruby></a></li>
                                    <li class="podpodmenuItem"><a href="./gallery.html#winter2"><ruby><img src="img/snowflake.webp" alt="calendar" loading="lazy" width="25" height="25">
                                        <rt>WINTER</rt>
                                    </ruby></a></li>
                                </ul>
                            </li>
                            <li class="podmenuItem"><a href="./gallery.html#women"><ruby><img src="img/woman.webp" alt="calendar" loading="lazy" width="25" height="25">
                                <rt>GALLERY WOMEN</rt>
                            </ruby></a>
                                <ul class="podpodmenu">
                                    <li class="podpodmenuItem"><a href="./gallery.html#spring3"><ruby><img src="img/sakura.webp" alt="calendar" loading="lazy" width="25" height="25">
                                        <rt>SPRING</rt>
                                    </ruby></a></li>
                                    <li class="podpodmenuItem"><a href="./gallery.html#summer3"><ruby><img src="img/sun.webp" alt="calendar" loading="lazy" width="25" height="25">
                                        <rt>SUMMER</rt>
                                    </ruby></a></li>
                                    <li class="podpodmenuItem"><a href="./gallery.html#autumn3"><ruby><img src="img/leaves.webp" alt="calendar" loading="lazy" width="25" height="25">
                                        <rt>AUTUMN</rt>
                                    </ruby></a></li>
                                    <li class="podpodmenuItem"><a href="./gallery.html#winter3"><ruby><img src="img/snowflake.webp" alt="calendar" loading="lazy" width="25" height="25">
                                        <rt>WINTER</rt>
                                    </ruby></a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li class="menuItem"><a href="./faq.html"><ruby><img src="img/comment.svg" alt="comment" loading="lazy" width="25" height="25">
                        <rt>FAQ</rt>
                    </ruby></a></li>
                </ol>
                <button class="toggle">Dark mode</button>
                <div class="cart-icon">
                    <a href="./cart.html"><img src="img/shopping-cart.svg" alt="Cart" height="25" width="25"></a>
                    <span id="cartCount">0</span>
                </div>
            </div>
        </nav>
    </header>
Source: styleFaq.css, line 267