Celem lekcji jest pokazanie Wam jak zrobić w CSS własne menu które będzie przyczepione na stałe do górnej krawędzi przeglądarki.

O przyklejaniu się menu do górnej krawędzi mówimy inaczej, że menu jest sticky. Efekt ten uzyskuje się dzięki bibliotece jQuery, czyli innymi słowy będziemy dzisiaj używać JavaScript. Natomiast rozwijanie menu dzisiaj wykonamy przy użyciu CSS

Takie menu będzie stylizowane na elemencie HTML zwanym lista wypunktowana. Wiemy już że listy te mogą być numerowane (ordered list) albo nienumerowane (undered list)

  1. Na pulpicie tworzę nowy folder www, a w nim umieszczam moją templatkę
  1. Tworzymy nowego css. Dodaję kartę new i zapisuję od razu jako style.css
  2. stylizuję zakładkę body. Wnętrze naszego dokumentu zaczniemy od ustawienia koloru tła.
  3. Ustawię sobie kolor butelkowa zieleń który zaczytałam z barwy net.
  4. ustawię kolor fontu na cornilk #FFF8DC

body
{
background-color:#006400;
color: #FFF8DC
}

pamiętaj o średniku na końcu bo inaczej nie zadziała

Menu powinno zajmować całą szerokość okna więc tym razem podejdziemy do tworzenia witryny nieco inaczej.

Najpierw utworzymy diva o nazwie wrapper=z angielskiego opakowanie obwoluta. Jest to coś podobnego jak kontener, z tą różnicą, że tutaj nie będziemy ograniczać szerokości. Width będzie w tym przypadku 100%

W środku diva wrapper damy diva header który też zajmie 100% szerokości

W header wyśrodkujemy na ekranie grafikę używając margin-left: auto; i margin-right:auto;

Generalnie domyślnie jest to 100% i nie trzeba tego wpisywać.

w sekcji header ustawiamy szerokość na 100% i padding w wersji skróconej. pierwsza wartość informuje nas o odległości w pionie a druga w poziomie

header

{
width: 100%;
padding: 40px, 0;
}

dołóżmy jeszcze jednego diva do diva header , niech to będzie div logo i póki co wstawmy tam napis “ATLAS ZWIERZĄT”, dodajmy też tego diva do css

  1. USTAWMY WIELKOŚĆ NA 500px
  2. ustawmy rozmiar czcionki
  3. ustawmy jeszcze obramowanie czyli border o linii ciągłej a więc solid i rozmiarze 1px koloru białego

logo

{
width: 500px;
font-size: 50px;
border: 1px solid #ffffff;
}

ZOBACZMY JAK TO WYGLĄDA W PRZEGLĄDARCE

DODAJMY DWA ZAPISY ŻEBY DIVA TEGO WYŚRODKOWAĆ

logo

{
width: 500px;
font-size: 50px;
border: 1px solid #ffffff;
margin-left: auto;
margin-right: auto;
}

MARGINESY AUTOMATYCZNE SPOWODUJĄ, ŻE ODSTĘP Z PRAWEJ I LEWEJ STRONY BĘDZIE TAKI SAM A ZATEM NASZ DIV BĘDZIE NA ŚRODKU EKRANU

Zmienimy teraz fonta naszego napisu w tym celu przejdziemy do GOOGLE FONTS I WYBIERZEMY SOBIE FONTA POPPINS NP. BOLD 700 I SKOPIUJEMY LINK

A NASTĘPNIE WKLEJAMY GO DO INDEXU DO SEKCJI HEAD

TERAZ JESZCZE KOPIUJEMY CSS RULES TO SPECIFY FAMILIES I WRZUCAMY DO CSS DO BODY

ZMIENIONY KOD W CSS

body
{
background-color:#006400;
color: #FFF8DC;
font-family: ‘Poppins’, sans-serif;
}

ZMIEŃMY JESZCZE NAPIS ATLAS NA BRĄZOWY, W TYM CELU UŻYJĘ ZNACZNIKA SPAN. ZNACZNIK TEN NIE ZACHOWUJE SIĘ DOMYŚLNIE JAKO ELEMENT BLOKOWY WIĘC ZMIENI NAM TYLKO KAWAŁEK TEKSTU A NA POZOSTAŁĄ CZĘŚĆ STRONY NIE BĘDZIE MIAŁO WPŁYWU

.NAV

UTWORZYMY NAV JAKO KLASĘ WIĘC

W HTML DOPISUJEMY LINIĘ

ZAPISZEMY SOBIE CIĄGLE POZOSTAJĄC W DIVIE WRAPPER DEKLARACJĘ DIVA LECZ TYM RAZEM W KLASIE

A W CSS USTAWIMY WŁAŚCIWOŚCI TEGO DIVA

  1. ustawimy szerokość na 100%
  2. pionowy padding na 10px oraz poziomy na 0
  3. ustawimy też kolor tła ponownie na Peru czyli : #CD853F
  4. chcemy, żeby nasze menu było wyśrodkowane a zatem wpiszemy text-align (tekst alain) center
  5. na koniec dodam dwa bordery – od góry i od dołu nieco ciemniejsze od brown, u mnie będzie to Maroon czyli  #800000 zapiszmy zatem
    1. border-top, linia ciągła solid i kolor Maroon

.nav
{
width: 100%;
padding: 10px 0;
background-color: : #A52A2A;
text-align: center;
border-top: 1px solid #800000;
border-bottom: 1px solid #800000;
}

OK SPRAWDŹMY JAK TO WYGLĄDA W PRZEGLĄDARCE – NASZ NAV PÓKI CO JEST PUSTY WIĘC TO CO WIDZIMY TO EFEKT NASZEGO 10PIKSELOWEGO PADDINGU, zatem roboczo zapiszmy sobie w klasie wysokość: 50px;

ZOBACZMY TERAZ NASZĄ STRONĘ

TERAZ MOŻEMY STWIERDZIĆ, ŻE PRZYGOTOWALIŚMY SOBIE PASEK, LECZ DLACZEGO ON NIE DOTYKA PRAWEJ ANI LEWEJ STRONY?

WYNIKA TO Z TEGO, ŻE PRZEGLĄDARKA MA SZTYWNO UTWORZONE KILKUPIKSELOWE MARGINESY

MOŻNA TO ZMIENIĆ W CSS W SEKCJI BODY DOPISUJĄC

margin: 0, do tego dopiszemy sobie jeszcze klauzule !imporant; łamiącą kaskadowość, wymagającą ten margines.

po tym wpisie sprawdźmy naszą stronę

ok teraz dodajmy kolejnego diva – content czyli zawartość strony

w tym celu utworzymy nowy div w dokumencie html oczywiście w divie wrapper, a następnie zapiszemy jego deklarację w css. założenia tego diva są następujące

  1. szerokość 1000px
  2. wyśrodkowanie – tu użyjemy sztuczkę z marginesami
  3. ponadto wyjustujemy tekst zawarty w tym divie

nasz plik css został wzbogacony

Ponieważ my nie mamy jeszcze żadnego tekstu na stronie to wygenerujmy sobie tekst próbny https://loremipsum.io/generator/?n=5&t=p. tekst próbny jest określany przez DAMI CONTENT. w tym celu wpisz w wyszukiwarkę “lorem ipsum”, teraz wygereruj 6 akapitów tekstu próbnego, skopiuj i wklej do diva content,

GENERATOR https://loremipsum.io/

zawijanie wierszy VIEV-> WORD WRAP