BoP #6: Menu

Zabieramy się za stylowanie menu

 

Zanim przejdziemy do tematu tego wpisu poprawimy jedną rzecz w naszym CSSie. Pamiętacie jak ostatnio Dodawaliśmy styl „margin-top: auto” dla „footer” ? Cóż, można to zrobić „lepiej” zachowując spójność z resztą elementów flexboxa. Wystarczy że usuniemy

a do elementu „#content” dodamy

http://codepen.io/morawcik/pen/WjKrBL

Wizualnie nic to nie zmieni ale zamiast się głowić co robi „margin-top: auto” będziemy widzieć, że nakazujemy naszemu elementowi „#content” rozciągnąć się na całą dostępną wysokość. (więcej w ostatniej części flexboxa)

 

Taka mała uwaga – wszystkie style, które przedstawię w tej i następny lekcjach są przykładowe i gorąco zachęcam do eksperymentowania 🙂

 

Tło

Stylowanie naszego menu zaczniemy od nadania mu nieco innego tła  i cienia, który „oddzieli” nieco menu od reszty strony. Kolor tła ustawimy za pomocą stylu

który musimy przypisać do elementu „nav” (oczywiście zastępując tło, które użyliśmy do zobrazowania jego pozycji)

http://codepen.io/morawcik/pen/KmBzWP

 

Cień

Cień możemy dodać właściwością „box-shadow”, która przyjmuje następujące wartości:

  1. none – brak cienia
  2. initial – wartość domyślna (w tym przypadku brak cienia)
  3. inherit – wartość dziedziczona z rodzica
  4. zbiór wartości składających się na wygląd cienia:
  • x – przesunięcie cienia w poziomie – wymagane
  • y – przesunięcie cienia w poziomie – wymagane
  • blur – stopień rozmycia – niewymagane
  • spread – rozmiar cienia – niewymagane
  • color – kolor cienia – niewymagane, domyślnie czarny
  • inset – z tą wartością cień będzie wewnątrz elementu a bez – na zewnątrz – niewymagane

Używając ostatniej opcji (podając x, y…) można nakładać na siebie różne cienie za pomocą przecinka, np.

 

Nasze menu będzie miało taki cień:

Niestety samo ustawienie cienia nic nie da w przypadku takim jak nasz, gdzie następny element (po „nav”) ma ustawiony kolor tła. Dlatego musimy skorzystać z właściwości „z-index”, która określa kolejność w hierarchii wyświetlania elementów na stronie. Co to oznacza? Domyślnie wszystkie elementy na stronie wyświetlają się w takiej kolejności w jakiej są napisane w HTML. Zobaczcie na ten przykład:

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

Jeśli chcemy by np. element „1” był na samej górze wystarczy przypisać mu

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

Jeśli chcielibyśmy zmienić dla wielu elementów to trzeba dodać „z-index” dla tych elementów pamiętając, że element z większym „z-index” będzie wyświetlał się nad tym z mniejszym.

 

Nasze menu ma teraz takie style:

http://codepen.io/morawcik/pen/zwLqpN

 

Styl listy

Pora na zmianę wyglądu odnośników w naszym menu. Zacznijmy od tego, aby pozbyć się kropek, które poprzedzają każdą pozycję. Dlaczego w ogóle są te kropki? Jest to element listy <ul>, którą posłużyliśmy się, żeby utworzyć menu. Odpowiada za to właściwość „list-style” i wystarczy zmienić jej wartość na „none”

http://codepen.io/morawcik/pen/OmwXbP

 

Teraz musimy ustawić elementy w jednej linii (poziomo). Możemy to zrobić za pomocą

Zamieni to sposób wyświetlania na „element blokowy w jednej linii”.

http://codepen.io/morawcik/pen/ZKjOMx

 

Jeśli zastanawiacie się czemu wcześniej użyliśmy „nav ul” a teraz „nav > ul > li” to już tłumaczę. W pierwszym przypadku chcemy by każda lista w menu (<na>) nie miała kropek. Jeśli w przyszłości będziemy chcieli aby któraś pozycja w menu była rozwijalna to dodamy tam kolejny element <ul>. W drugim przypadku chcemy aby tylko te pozycje w menu, które są teraz były w jednej linii. W menu rozwijalny możliwe, że będziemy chcieli aby pozycje były jedna pod drugą 😉 Oczywiście, jak wspomniałem na początku – nie ograniczam Was do tego co pokazuję. Jeśli chcecie zrobić inaczej to nawet Was do tego zachęcam – nic nie uczy bardziej jak praktyka 🙂

 

Padding

Pozycje w menu są jedna przy drugiej i nie wygląda to najlepiej, dlatego dodajmy padding. Padding to odstęp wewnątrz elementu (w przeciwieństwie do marginesu, który jest na zewnątrz). Aby to zobrazować zrobiłem mały przykład z „margin-left” i „padding-left” (margines i padding z lewej strony)

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

Element „1” ma ustawiony margines i został odsunięty od lewej krawędzi strony. Natomiast element „2” ma ustawiony padding i w tym przypadku zawartość tego elementu została odsunięta od lewej krawędzi elementu. Pewni zauważyliście, że pomimo iż oba divy mają ustawiony taki sam rozmiar to element „2” jest szerszy. Dzieje się tak dlatego, że do ustawionego rozmiaru został dodany rozmiar paddingu. W tej sytuacji mamy dwa wyjścia: albo przy ustawianiu rozmiaru zmniejszyć go o rozmiar paddingu albo zmienić temu elementowi właściwość „box-sizing” na

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

 

Ustawmy pozycjom w menu taki padding:

Co on oznacza? Jest to skrócony zapis:

gdzie każda wartość odpowiada kolejno paddingowi górnemu, prawemu, dolnemu, lewemu

W pierwszy przykładzie mamy: padding górny i dolny 5px oraz padding prawy i lewy 10px

http://codepen.io/morawcik/pen/BRPLrY

 

Odnośniki

Potrzebujemy poprawić wygląd samych odnośników (<a>). Zaczniemy od zmiany koloru na biały:

http://codepen.io/morawcik/pen/jmpMvQ

 

Następnie usuniemy podkreślenie tekstu:

http://codepen.io/morawcik/pen/qmyaQN

 

I dodamy małą zmianę koloru po najechaniu na odnośnik:

 

Aby lepiej to wyglądało dopełnimy to animacją zmiany koloru (zamiast „przeskakiwania” z jednego koloru na drugi będą się płynnie zmieniać). możemy to osiągnąć dodajac

do „nav li a”

Dlaczego do „nav li a” a nie do „nav li:hover a” ? W drugim przypadku efekt animacji otrzymalibyśmy tylko po najechaniu myszką na<li> a po przesunięciu myszki poza <li> kolor przeskoczyłby bez animacji.

„0.3s” to czas trwania animacji w sekundach. Więcej o animacjach napiszę w osobnym wpisie.

http://codepen.io/morawcik/pen/QvBKPz

 

W następnej części zajmiemy się responsywnością menu 🙂


Post 6 z 13 z serii Blog od podstaw