BoP #10: Sidebar

Kolejnym elementem, który potrzebuje naszej uwagi jest sidebar.

 

Ponownie musimy zacząć od usunięcia tła, które jest nam już niepotrzebne. W tym celu usuwamy:

https://codepen.io/morawcik/pen/JJWdwY

 

Nagłówki

Zmiany w nagłówkach zaczniemy od umieszczenia tagów <h3> w dodatkowy tag <header> co pozwoli nam na większą swobodę przy dodawaniu styli. Zamieniamy:

na

oraz

na

 

Przy okazji „usuniemy” marginesy z tagów <h3> (nie przydadzą się)

https://codepen.io/morawcik/pen/gRmpyX

 

Dla <header> przyda nam się ustawić flexa:

 

Następnie utworzymy pionową linię na prawo od nagłówka

Żeby pseudoelement „before” się pokazał potrzeba ustawić mu „content” – choćby pusty (content: ”) i wysokość. Dzięki „flex: 1” automatycznie ustawiamy szerokość, która dostosuje się względem pozostałych elementów (jak tag <h3>) a za sprawą prawego marginesu odsuniemy linię od napisu.

https://codepen.io/morawcik/pen/PjpPVV

 

To samo zrobimy po drugiej stronie używając pseudoelementu „after” i zmienimy margines prawy na lewy

https://codepen.io/morawcik/pen/pwegzy

 

Na koniec dodamy mały marines po bokach sidebara aby nie zlewał się z krawędzią

https://codepen.io/morawcik/pen/pwegoy

 

Archiwum

Tutaj zaczniemy od usunięcia kropek w listach (<ul>) oraz usunięciu paddingu

https://codepen.io/morawcik/pen/bRqEWV

 

Następnie usuniemy podkreślenie z odnośników i zmienimy im kolor.

https://codepen.io/morawcik/pen/QgpyqK

 

Abyśmy mogli przejść dalej potrzebujemy dodać sobie id dla każdej z sekcji w naszym sidebarze. Dla „Archiwum” dodamy id „archive” a dla tagów „tags”

https://codepen.io/morawcik/pen/rwyxYY

 

Wyśrodkujemy sobie odnośniki za pomocą:

https://codepen.io/morawcik/pen/dRvGda

 

Dodamy mały padding dla dla odnośników jednocześnie usuwając górny padding dla pierwszego odnośnika i dolny dla ostatniego

https://codepen.io/morawcik/pen/gRmPjb

 

Dodamy jeszcze „podkreślenie” dla każdej pozycji poza ostatnią – wizualnie oddzielimy poszczególne pozycje

https://codepen.io/morawcik/pen/QgpyZp

 

Na koniec dodamy animację zmiany koloru tekstu po najechaniu myszką na odnośnik. Zmianę koloru otrzymamy po dodaniu

Natomiast żeby otrzymać animację musimy do „#archive a” dodać właściwość „transition”:

https://codepen.io/morawcik/pen/xrqZBQ

 

Tagi

Na początek „odsuniemy” nieco tą część od „Archiwum” przez dodanie górnego marginesu

https://codepen.io/morawcik/pen/vZxLwY

 

Tagi będziemy wyświetlać w formie kafelek podobnych do nagłówków w postach (tylko mniejszych 😀 ). Najpierw musimy „wymusić” aby wyświetlały się obok siebie

https://codepen.io/morawcik/pen/dRvGxx

 

Wystarczy dodać teraz mały padding (żeby odsunąć tekst w odnośnikach od krawędzi/cienia), podwójny cień oraz „transition”, które pozwoli animować tagi po najechaniu na nie:

A jak jesteśmy już przy animacji po najechaniu to od razu dodamy zmianę cienia po tej akcji:

https://codepen.io/morawcik/pen/vZxGNO

 

W następnej części zajmiemy się odnośnikiem „na górę”, którym mieliśmy się zająć już w poprzednim wpisie.

Pochwalcie się jak Wam idzie i co sami zmieniacie 🙂


Post 10 z 13 z serii Blog od podstaw
  • Dlaczego menu boczne wrzucasz w aside?

    Nazwa tego znacznika nie odnosi się do kontenera bocznego, tylko do czegoś co nie jest potrzebne dla głównej treści strony, jak np. baner reklamowy.

    Więcej do poczytania w specyfikacji: https://www.w3.org/TR/html5/sections.html#the-aside-element

    • Sidebar jakby nie było nie jest potrzebny dla głównej treści strony 😉 W specyfikacji (trzeci przykład) aside jest użyty jako kontener dla dwóch elementów nav.