Nieruchome menu na górze strony

     Zmotywowałam się i usiadłam do komputera, otworzyłam zakładkę z zamówieniami, zaczęłam nawet jakieś robić... a potem stwierdziłam, że instrukcja - notabene, wyczekiwana od paru dni przez kilka osób - zajmie mi mniej czasu i dlatego najpierw notka, a potem zamówienia. Przy okazji muszę Wam się przyznać, że całkowicie oszalałam na punkcie nowego kawałka Guetty (: Lovers on the sun jakoś tak sprawia, że aż podskakuję na krzesełku! Przy okazji, na gorzko słodko pojawił się nowy layout główny - co sądzicie? Chciałyby tygrysy coś takiego tutaj?

     Ale do rzeczy.

Nieruchome menu na górze strony

     Powyżej dwa przykłady - zwykłego, kolorowego oraz z obrazkiem w tle. Zasada jest jednak taka sama w obu przypadkach. Na przykładach nie ma co prawda social icons, a o to też była prośba, ale to dodamy sobie na końcu. Co można powiedzieć o tego typu menu? Wbrew pozorom nie jest ono trudne do zrobienia i tak naprawdę zamyka się w dwóch poleceniach - position: fixed; oraz display: inline, ale po kolei.

     Step 1 - jaki gadżet na menu?

     Tak naprawdę możemy zarówno użyć gadżetu "Strony", jak i ramki HTML/Java. Osobiście preferuję jednak to pierwsze, bo dużo łatwiej z nimi kombinować, dodawać nowe linki, usuwać, i tak dalej. A do tego z automatu możemy ustawić nasze strony u góry strony, gdzie linki są jeden obok drugiego, a nie pod sobą. Poniżej daję obraz układu, z którego ja będę korzystać. Ramka HTML/Java jest potrzebna wtedy, kiedy chcemy mieć nasze ikonki. Oczywiście, ramka ta może być gdziekolwiek na stronie, jednak im wyżej i bliżej stron, tym lepiej i łatwiej.

     Step 2 - let's make it ready.

     Zawsze powtarzam, że zanim zaczniemy pracę, lepiej wszystko przygotować. Jeśli chodzi o menu, powinniśmy już z miejsca wiedzieć, jakie karty chcemy w nim mieć, prawda? Home, kategorie, spis treści... kto, co woli, ten to ma. Dlatego zanim przystąpimy do kodowania, dodajmy wszystko, co chcemy mieć w menu w takiej kolejności, jakie to ma być. Dlaczego? Otóż, jeśli ktoś ma więcej linków, musi wiedzieć, jaką czcionkę dopasować, żeby wszystko było okay. Poza tym, od razu widać jak na dłoni, czy menu nam się podoba, czy jest w ogóle do kitu i trzeba kombinować dalej ;) Obrazek niżej... no cóż, póki co nie wygląda to zbyt apetycznie, ale co zrobić?

     Step 3 - let's... kod, cz. 1. i już.

     Wszystko, co będziemy pisać i kombinować, tylko i wyłącznie - na szczęście - w arkuszu CSS w projektancie szablonów. Jakimi selektorami będziemy się posługiwać? Wszystkie będą miały coś wspólnego z #PageList1 (jeśli coś poknociliście, to ewentualnie #PageList2, ale wątpię)

#PageList1 ul - wykaz, czyli... po prostu nasze menu. Ujdzie też bez "ul".

#PageList1 ul li - linki same w sobie, w kolumnie bocznej również te kropeczki, których tutaj nie ma.

#PageList1 li a:link - kolor linków stron, efekty, itp.

#PageList1 li a:visited - strona odwiedzony. 

#PageList1 li.selected a - wybrana aktualnie strona.

#PageList1 li a:hover - strona po najechaniu.

     W poniższych wskazówkach wszystko to, co będzie kolorem, będziecie mogli zmienić na własny użytek. To, co będzie normalną czcionką, powinno zostać niezmienione, by uzyskać taki efekt, jak na pierwszym zdjęciu. 

     Step 4 - come to me, baby. Czyli dziecko mamusi w nawiasach.

     Ale ze mnie dowcipniś...

     A poważnie - jakich użyć poleceń, żeby wszystko grało i hulało? Idziemy po kolei wg podanych wyżej selektorów. 

#PageList1 {z-index: 10;} #PageList1 ul {background: #FF3A31; position: fixed; top: 0px; left: 0px; right: 0px; border-bottom: 1px dotted #000}

     Jak już wyżej wspomniałam, ten selektor to ogólnie wszystko, na czym potem się opieramy. A więc kolor naszego ogólnego tła [background] (tutaj to jest ten... koralowy?). W tym miejscu pozycjonujemy również nasze strony, by były one cały czas na górze, a do tego nieruchomo względem przewijania bloga - do tego służy position: fixed; top: 0px; left: 0px; right: 0px. Dzięki temu tło naszych stron zaczyna i kończy się na bocznych granicach monitora, niezależnie od rozdzielczości. Border-bottom jest oczywiście opcjonalny i odpowiada za ten 1px ramki dolnej. (!) Gdybyśmy chcieli mieć za tło obraz, jak w przypadku design your life, to zamiast background pojawiłoby się background-image: url(adres obrazka). Do tego nasze z-index, dzięki czemu nasze menu jest ciągle na górze i nic go nie przysłania.
     Jak to teraz wygląda?

     Step 5 - one by one.

      Można by pomyśleć, że skoro teraz są w równym rzędzie, to nie trzeba nic robić, no ale dla świętego spokoju dodajemy kolejny selektor, a w nim kolejne komendy. Float, czyli tak jakby... nalot? Nie wiem, jak to wytłumaczyć, ale przykładowo, gdyby zamiast none było right, to wszystko pofrunęłoby na prawą stronę. Display, czyli wyświetlenie, inline, czyli w linii. 

#PageList1 ul li {float: none; display: inline;}

     Możecie sprawdzić, co się dzieje, gdy dacie jedno z nich i pewnie bardziej zrozumiecie, czemu lepiej to dodać, niż z moich pokrętnych wyjaśnień ;) Dzięki temu też odstępy między stronami są równe.

     Step 6 - fonts.

     Teraz zajmiemy się przez chwilę tym, co w ogóle widzimy cały czas, czyli czcionkami. Tutaj jest pełna dowolność jakby co.

#PageList1 li a:link, #PageList1 li a:visited {text-transform: uppercase; color: #fff; padding: 10px 20px; font-family: 'Playfair Display', serif; font-size: 20px; font-weight: 400;}

     Co my tutaj mamy? Tak jak powiedziałam i tak jak widać po kolorze, wszystko możemy zmienić. Text-transform jest odpowiedzialne za wielkie litery, padding - za odstęp między literami i granicami tła oraz odstępem między poszczególnymi stronami, font-family to po prostu nasza czcionka, font-size - rozmiar, a font-weight decyduje, czy będzie to czcionka cienka czy pogrubiona, itp. Jak to wszystko powinno wyglądać? Ano tak:

     Przed sekundką załatwiliśmy linki, które widzimy cały czas oraz linki odwiedzone. Czemu te dwa selektory są po przecinku i czemu proponuję, by tak robić? Otóż, w tym momencie nasze polecenia odnoszą się do tego i tego, dzięki czemu nasze strony są cały czas takie same, przez co ładne i estetyczne. A teraz zajrzyjmy do aktywnej strony.

#PageList1 li.selected a {color: #000; background: transparent}

     Tutaj również pełna dowolność. Możemy dodać tło zamiast transparent, zmienić kolor czcionki, dodać efekt, pochylenie, pogrubienie, jakiś border. Decyzja należy do Was :)

#PageList1 li a:hover {color: #fff; background: #000; transition:all 0.5s; -moz-transition:all 0.5s; -webkit-transition:all 0.5s; -o-transition:all 0.5s}

     A teraz przed nami hover, czyli najechanie na link i związane z tym wariacje. Oczywiście, możemy tego w ogóle nie dodawać i nie będzie żadnego efektu. Ale kto nam broni? Kolor oraz tło możemy jak najbardziej zmienić. Dodać efekty, i tak dalej - co komu w duszy gra. O co chodzi z transition i dlaczego radzę Wam tego nie ruszać? Jeśli tego nie będzie, a kolor tła i czcionki będzie inny niż w a:link, to przejście będzie natychmiastowe. Transition i dobrane tutaj parametry (które można zmienić) sprawiają, że przejście z koloru w kolor, efektu w efekt jest bardziej płynne i delikatniejsze. Chyba fajnie, nie?

     I wygląda na to, że podstawowy CSS na nasze menu jest skończony.

Efekt

     To by było na tyle, jeśli chodzi o takie menu. Do tego można dodać social icons, na co instrukcję znajdziecie tutaj. Jaka różnica w tej instrukcji a w ikonach, które pasują tutaj? Zwykle ikony wsadzamy w prawy kąt i wtedy też przydaje się position: fixed oraz z-index większy od z-index, który przypisaliśmy dla #PageList1. Chyba najważniejsza rzecz. Sprawdźcie, jak Wam to wyjdzie i dawajcie znać :)

Pozdrawiam,

wanilijowa