1.1 #permalink Menu-navbar
Ten kod HTML reprezentuje nagłówek (header) strony internetowej. Oto jego opis:
Sekcja "lewy":
W lewej części nagłówka znajduje się kontener o klasie "lewy". Wewnątrz tego kontenera jest kolejny kontener o klasie "flex", który używa układu flexbox. W kontenerze "flex" znajduje się kontener o klasie "container-logo", który zawiera logo strony. Logo jest zbudowane z trzech elementów: litera "L" (klasa "L"), środkowa część (klasa "mid"), oraz napis "ADING GO" (klasa "ADING"). Sekcja "prawy":
W prawej części nagłówka znajduje się kontener o klasie "prawy". Wewnątrz tego kontenera jest kontener "search-container", który zawiera pole tekstowe do wprowadzania zapytań wyszukiwania (input) o id "search-input" oraz przycisk do rozpoczęcia wyszukiwania (a) o id "search-btn". Pole tekstowe ma atrybut "placeholder" ustawiony na "Szukaj...", co sugeruje użytkownikowi, że może tam wprowadzić zapytanie. Przycisk ma ikonę lupy (i class="fas fa-search" ** /i**), a jego kliknięcie rozpoczyna wyszukiwanie. Sekcja "script":
Ten fragment kodu JavaScript jest osadzony w nagłówku i odpowiedzialny za obsługę wyszukiwania. Po załadowaniu całej zawartości dokumentu (event "DOMContentLoaded"), kod dodaje obsługę zdarzeń dla pola tekstowego "search-input" oraz przycisku "search-btn". Kiedy użytkownik wciśnie klawisz Enter w polu tekstowym, zostaje uruchomiona funkcja "search", która otwiera nową kartę przeglądarki z wynikami wyszukiwania na Google. Kliknięcie przycisku "search-btn" również uruchamia funkcję "search" i otwiera nową kartę przeglądarki z wynikami wyszukiwania. Ten kod HTML i JavaScript tworzy interaktywną nagłówkę z polem wyszukiwania, które pozwala użytkownikom na wprowadzanie zapytań i wyszukiwanie ich na stronie Google.
Ten kod HTML i JavaScript reprezentuje nawigację na stronie internetowej. Oto jego opis:
Element nav:
Jest to element HTML, który zazwyczaj zawiera menu lub linki nawigacyjne na stronie. Sekcja "pasek":
Wewnątrz nawigacji znajduje się kontener o klasie "pasek". Sekcja "container":
To kolejny kontener o id "container", który ma na celu ograniczenie szerokości elementów nawigacyjnych. Element div z id "menu-toggle" i klasą "hamburger":
Ten element reprezentuje przycisk "hamburger" (trzy poziome paski), który jest używany w menu w wersji mobilnej. Po kliknięciu przycisku "hamburger", menu staje się widoczne lub ukryte. Element div z id "menu-container":
To kontener, który zawiera menu nawigacyjne. Lista nieuporządkowana ul z id "menu":
To główne menu nawigacyjne, które zawiera listę linków. Elementy li:
Są to elementy listy, które reprezentują poszczególne pozycje w menu. Elementy a:
Są to odnośniki (linki) w menu, które prowadzą do różnych sekcji lub stron na stronie internetowej. Podmenu:
W kodzie znajdują się również elementy ul i li, które tworzą podmenu dla niektórych pozycji w głównym menu. Skrypt JavaScript:
Skrypt JavaScript znajduje się na końcu kodu i jest odpowiedzialny za interakcję z przyciskiem "hamburger". Kiedy przycisk "hamburger" jest kliknięty, skrypt dodaje lub usuwa klasę "active" z przycisku i kontenera menu, co powoduje jego rozwinięcie lub schowanie w zależności od aktualnego stanu. Ten kod tworzy responsywne menu nawigacyjne, które może być zwinięte i rozwinięte na stronie internetowej, szczególnie w przypadku korzystania z urządzeń mobilnych.
#menu:
Jest to styl dla elementu o identyfikatorze "menu". Element jest ustawiony jako relatywny (position: relative). Ma lewe wyrównanie (float: left). Otrzymuje odstęp wewnętrzny 20 pikseli na lewej i prawej stronie (padding: 0 20px). Posiada zaokrąglone rogi z promieniem 3 pikseli (border-radius: 3px). Tło ma kolor szary (#ccc). #menu, #menu ul:
Są to style, które usuwają domyślne punkty (kropki) na liście. #menu li:
Styl dla bezpośrednich potomków elementu o identyfikatorze "menu". Elementy li są wyświetlane obok siebie (float: left). Posiadają perspektywę o wartości 1000 pikseli (perspective: 1000px), co może być używane w połączeniu z efektami 3D. #menu a:
Styl dla odnośników (a) wewnątrz elementu o identyfikatorze "menu". Odnośniki są wyświetlane jako bloki (display: block). Posiadają odstęp wewnętrzny (padding) na górze, dole i poziomo. Odstęp 13 pikseli na górze i dole oraz 20 pikseli poziomo (padding: 13px 20px 13px 20px). Tekst odnośników nie jest podkreślony (text-decoration: none). Kolor tekstu jest ustawiony na ciemnoszary (#4b4b4b). Rozmiar czcionki to 18 pikseli. Odnośniki mają przejrzyste tło (background: transparent). Zdefiniowano animację przejścia dla odnośników z opóźnieniem 0.25 sekundy (transition: all .25s ease-in-out). #menu li:hover a:
Styl dla odnośników, które są podświetlane po najechaniu kursorem na ich rodzica. Tło odnośnika zmienia kolor na ciemniejszy szary (#333). Kolor tekstu odnośnika zmienia się na niebieski (#00dffc). #menu li ul:
Styl dla listy nieuporządkowanej wewnątrz elementów w menu rozwijanym. Lista jest ukryta . Ma szerokość 200 pikseli. Posiada zaokrąglone rogi na dole po lewej i prawej stronie (border-bottom-left-radius i border-bottom-right-radius) z promieniem 4 pikseli. Tło listy jest przezroczyste. Treść listy jest obcinana w przypadku przekroczenia szerokości elementu nadrzędnego (overflow: hidden). Punkt transformacji animacji 3D ustawiony jest na środkowy górny róg listy (transform-origin: 50% 0%). #menu li:hover ul:
Styl dla listy, która jest wyświetlana po najechaniu kursorem na element li w menu rozwijanym. Dodano animację "swingdown", która kontroluje animację pojawiania się menu rozwijanego. Zmieniono kolor tła na ciemniejszy szary (#333). Zwiększono przejrzystość do 1 (opacity: 1). Ustawiono widoczność na "visible" (visibility: visible). Dodano cień na menu rozwijanym (box-shadow) i określono parametry animacji (animation-name, animation-duration, animation-timing-function). @keyframes swingdown:
Jest to definicja animacji "swingdown" przy użyciu animacji CSS. Animacja rozpoczyna się od opacznia bliskiego jedności (0.99999) i obrotu elementu o 90 stopni wzdłuż osi X. W trakcie animacji element obraca się w różnych kierunkach, symulując efekt "swingu" lub kiwania, z określonymi wartościami transformacji i funkcjami czasu. #menu li li a:
Styl dla odnośników (a) wewnątrz elementów li w menu rozwijanym. Dodano odstęp wewnętrzny z lewej strony (padding-left: 15px). Grubość czcionki wynosi 400. Kolor tekstu jest ustawiony na jasnoszary (#ddd). Tekst nie posiada cienia. Dodano kreski przerywane na górze i na dole odnośników (border-top i border-bottom) z przezroczystym kolorem. Dodano efekt przejścia (transition) dla płynnych zmian koloru. #menu li li a:hover:
Styl dla odnośników, które są podświetlane po najechaniu kursorem na nie w menu rozwijanym. Kolor tekstu odnośników zmienia się na niebieski (#00dffc). Dodano kreski przerywane na górze i na dole odnośników z jasnym kolorem oraz delikatne tło o niebieskim odcieniu.
.L i .ADING:
Są to klasy, które ustawiają pozycję (top i left) elementów ikony. Przesuwają elementy w lewo i w górę na określone pozycje. .outter:
To styl dla zewnętrznego okręgu w ikonie. Ustala pozycję (top i left), szerokość (80px), wysokość (80px) i promień zaokrąglenia (border-radius). Dodaje efekt obracania się wskazówki zegara z animacją CSS. Kolor lewej krawędzi jest ustawiony na #7D1935. .mid:
To styl dla środkowego okręgu w ikonie. Ustala pozycję (top i left), szerokość (50px), wysokość (50px) i promień zaokrąglenia (border-radius). Dodaje efekt obracania się wskazówki zegara z inną prędkością niż zewnętrzny okrąg. Kolor lewej krawędzi jest ustawiony na #B71427. Animacja (@-webkit-keyframes, @-moz-keyframes, @-o-keyframes, @keyframes):
Definiuje animację o nazwie "spin", która obraca elementy od 0 do 360 stopni. Ustawiona jest prędkość animacji, iteracja (nieskończoność) i funkcja czasowa (linear).
.search-container:
Ustawia tło na białe (#fff), okrągły kształt (dzięki border-radius), cień (za pomocą box-shadow) i inne właściwości. Określa wysokość (30px) i dodaje wewnętrzne wypełnienie (padding: 10px 20px), aby uzyskać odpowiedni rozmiar i odstępy. Ustala wyśrodkowanie treści za pomocą display: flex, justify-content: center i align-items: center. Kursor zmienia się na "pointer" po najechaniu na element. Definiuje animację przejścia (transition: 0.8s). .search-container:hover > .search-input:
Po najechaniu na .search-container, szerokość elementu .search-input zmienia się na 400px, co powoduje jego rozwinięcie. .search-container .search-input:
Ustawia tło na przezroczyste, usuwa obramowanie (border: none) i zmienia wygląd na biały prostokąt z zaokrąglonymi rogami (dzięki border-radius). Szerokość początkowa elementu to 0px, ale zmienia się w trakcie animacji przejścia (transition: 0.8s). Ustala czcionkę o wadze 500 i rozmiarze 16px. .search-container .search-btn .fas:
Ustala kolor ikony "fas" (Font Awesome) na #5cbdbb. @keyframes hoverShake:
Jest to definicja animacji hoverShake, która powoduje delikatne drganie elementu po najechaniu na niego kursorem. Skew transformuje element, a wartości kąta zmieniają się, aby uzyskać efekt drgania. .search-container:hover:
Po najechaniu na .search-container, animacja hoverShake jest uruchamiana, co powoduje drganie elementu przez krótki czas.
.search-container:
Ustawia tło na białe (#fff), okrągły kształt (dzięki border-radius), cień (za pomocą box-shadow) i inne właściwości. Określa wysokość (30px) i dodaje wewnętrzne wypełnienie (padding: 10px 20px), aby uzyskać odpowiedni rozmiar i odstępy. Ustala wyśrodkowanie treści za pomocą display: flex, justify-content: center i align-items: center. Kursor zmienia się na "pointer" po najechaniu na element. Definiuje animację przejścia (transition: 0.8s). .search-container:hover > .search-input:
Po najechaniu na .search-container, szerokość elementu .search-input zmienia się na 400px, co powoduje jego rozwinięcie. .search-container .search-input:
Ustawia tło na przezroczyste, usuwa obramowanie (border: none) i zmienia wygląd na biały prostokąt z zaokrąglonymi rogami (dzięki border-radius). Szerokość początkowa elementu to 0px, ale zmienia się w trakcie animacji przejścia (transition: 0.8s). Ustala czcionkę o wadze 500 i rozmiarze 16px. .search-container .search-btn .fas:
Ustala kolor ikony "fas" (Font Awesome) na #5cbdbb. @keyframes hoverShake:
Jest to definicja animacji hoverShake, która powoduje delikatne drganie elementu po najechaniu na niego kursorem. Skew transformuje element, a wartości kąta zmieniają się, aby uzyskać efekt drgania. .search-container:hover:
Po najechaniu na .search-container, animacja hoverShake jest uruchamiana, co powoduje drganie elementu przez krótki czas.
Markup
<header>
<div class="lewy">
<div class="flex">
<div class="container-logo">
<div class="L">L</div>
<div class="outter">
<div class="mid"></div>
</div>
<div class="ADING">GO</div>
</div>
</div>
</div>
<div class="prawy">
<div class="search-container">
<input type="text" id="search-input" placeholder="Szukaj..." class="search-input">
<a href="#" id="search-btn" class="search-btn">
<i class="fas fa-search"></i>
</a>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
var searchInput = document.getElementById('search-input');
var searchButton = document.getElementById('search-btn');
function search() {
var query = searchInput.value
var googleSearchUrl = 'https://www.google.com/search?q=' + encodeURIComponent(query);
window.open(googleSearchUrl, '_blank'); // Otwiera wyniki wyszukiwania w nowej karcie
}
searchInput.addEventListener('keypress', function (event) {
if (event.key === 'Enter') {
event.preventDefault(); // Zapobiega standardowej akcji formularza
search();
}
});
searchButton.addEventListener('click', function (event) {
event.preventDefault(); // Zapobiega standardowej akcji linku
search();
});
});
</script>
<nav>
<div class="pasek">
<div id="container">
<div id="menu-toggle" class="hamburger">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</div>
<div id="menu-container">
<ul id="menu">
<li><a href="#">Strona główna</a>
</li>
<li><a href="galeria.html">Galeria</a>
</li>
<li><a href="#">Konto</a>
<ul>
<li><a href="zaloguj.html">Zaloguj się</a></li>
<li><a href="zarejestruj.html">Zarejestruj się</a></li>
</ul>
</li>
<li>
<a href="sklep.html">Sklep</a>
</li>
<li><a href="#">About Me</a>
<ul>
<li><a href="dostawa.html">Koszt zakupu</a></li>
<li><a href="lista.html">Zrób listę</a></li>
<li><a href="sklep.html">Sklep</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</nav>
<script>
const hamburger = document.getElementById("menu-toggle");
const menuContainer = document.getElementById("menu-container");
hamburger.addEventListener("click", () => {
hamburger.classList.toggle("active");
menuContainer.classList.toggle("active");
});
</script>style.css, line 459