Jak zrobić stronę www? cz3 – czas na nawigację

Czas na nawigację, jak zrobić stronę www

Jak zrobić stronę www? cz3.

Czas na nawigację. Czyli – jak zrobić stronę www  typu One-page?

Szybko stwórzmy strukturę nawigacji:

Będzie to  div o klasie pos-center -> sekcja NAV -> lista nieuporządkowana ul -> .pos-center -> elementy listy li
do dzieła:

<div class="pos-center">
    <nav>
        <div class="pos-center">
           <ul>
               <li><a href="#">Kartki na walentynki</a></li>
               <li><a href="#">O co chodzi?</a></li>
               <li><a href="#">Prezenty</a></li>
            </ul>
         </div>
      </nav>
 </div>

Pewnie już wiesz do czego służy klasa.

W CSS klasa jest po to, żeby móc wykorzystać dany element wielokrotnie na stronie.
W Naszym przypadku div .pos-center.

Gdyby zamiast klasy było id moglibyśmy go użyć tylko jeden raz na całej stronie.
Znaczek # dajemy chwilowo w miejsce linka, bo jeszcze nie mamy linka.

Nadajmy MENU style CSS.

nav
 {
    background:#b4b2b5;
    width: 100%;
    height: 60px;
 }

Myślę, że style dla NAV nie wymagają już dodatkowych objaśnień – Jest to na razie powtórzenie tego co już robiliśmy:
Kolor tła, szerokość, wysokość.
Dla nav ul również nadamy szerokość 100%.

Teraz przechodzimy do trudniejszej części – właściwości i wartości, o których jeszcze w tym kursie  – Jak zrobić stronę www – czas na nawigację nie mówiliśmy.
A mianowicie nav ul li:

  • float: left; – ustawia opływanie do lewej strony, czyli, że elementy listy ustawią się jedna obok drugiej zamiast jedna pod drugą.
  • list-style:none; – wyłączy style listy, czyli te czarne kropeczki.
  • line-height:60px; – już znamy, wysokość linii, czyli wycentrowanie w pionie.
  • padding: 0 40px; – nadaje margines tylko, że wewnętrzny, jakby do środka – góry i dołu 0px, od lewej i prawej po 40px.
  • font-size:16px; – to oczywiście rozmiar tekstu – myślę, że dasz radę, go samodzielnie przeliczyć na em : )
  • text-shadow: 2px 2px 0 #b41c0f; – 2px – przesunięcie cienia w poziomie, 2px – przesunięcie cienia w pionie, 0 – rozmycie cienia i jego kolor.
  • border-right: solid 1px #b41c0f; – to obramowanie z prawej strony, solid – linia ciągła, 1px grubość tej linii i jej kolor.

Sprawdzaliśmy już jak w przeglądarce wygląda HEADER teraz czas na nawigację: )
Widzimy, że trzeba jeszcze usunąć ostatnią kreseczkę obramowania:

 nav ul li:last-of-type
 {
   border:none;
 }

Ten kawałek kodu mówi przeglądarce – weź ostatni element listy z nav ul i wyłącz jego obramowanie.
last-of-type – znaczy, że kod dotyczy tylko ostatniego elementu danego typu np. listy
border:none;
– wyłącza całkowicie ramkę.

Jeszcze tylko zostało wystylizowanie linków w menu czyli zmiana koloru i usuniecie podkreślenia.

To również musimy zrobić w CSS wpisując:
nav -> ul -> li -> a – następującą komendę: color:#f6f6f6; – co oznacza zmianę koloru na ten prawie biały (domyślny kolor dla linków, czyli elementów a jest niebieski).
text-decoration:none; – oznacza wyłączenie dekoracji tekstu
(domyślna wartość dla text-decoration:underline; – podkreślenie pod tekstem).

Jedyne, co jeszcze musimy zaprogramować w nawigacji, to co będzie się działo po najechaniu na nią myszką.
Proponuje zmienić kolor tekstu i wyłączenie cienia pod tekstem.
Zrobimy to w następujący sposób:

 nav ul li a:hover
 {
    color:#b41c0f;
    text-shadow: none;
 }

Wartość hover – znaczy najedź na, czyli co ma się stać po najechaniu na dany element.

Ważne, żeby po atrybucie, który chcemy zmienić był : i bez spacji hover – tu nie może być spacji musi to być jako jeden wyraz, bo nie zadziała.

Cały kod CSS naszego MENU:

nav
 {
    background:#b4b2b5;
    width: 100%;
    height: 60px;
 }
 nav ul
 {
    width:100%;
 }
    nav ul li
 {
    float: left;
    list-style:none;
    line-height:60px;
    padding: 0 40px;
    font-size: 1.250em;
    text-shadow: 2px 2px 0 #b41c0f;
    border-right: solid 1px #b41c0f;
 }
    nav ul li:last-of-type
 {
    border:none;
 }
    nav ul li a
 {
    color:#f6f6f6;
    text-decoration:none;
 }
    nav ul li a:hover
 {
    color:#b41c0f;
    text-shadow: none;
 }

Nawigacja na tę chwilę jest skończona.
Do jej podlinkowania i zrobienia strony typu One-Page wrócimy w następnej części kursu.
Jak tylko o kodujemy główną treść witryny.

 

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *