tutoriale, szablony, web design

Pytania - Jeśli macie jakieś pytania lub uwagi, to zapraszam na nasz profil ask.fm. Postaramy odpowiedzieć na wszystkie pytania dotyczące szablonów, zamówień, jak również zaradzić conieco w sytuacji, gdzie szablon nie chce współpracować. Propozycje - Jeśli masz pomysł na ciekawą instrukcje, która mogłaby pomóc lub zainspirować wielu blogerów, daj nam znać! Z chęcią pomożemy! Propozycje możesz zostawić tutaj: Propozycje Pomoc - Gdyby ktoś desperacko szukał pomocy i wszystkie instrukcje go zawiodły, to jest e-mail tyler (bizarre1309@gmail.com ) i tam można pisać, mardzić na bloggera i resztę świata, no i ogólnie to też szukać pomocy. #idontjudge

poniedziałek, 21 lipca 2014

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

47 komentarzy:

  1. Co prawda znam już te kody, ale bardzo fajna instrukcja :D

    OdpowiedzUsuń
    Odpowiedzi
    1. Sporo osób już się w takim menu orientuje, ale jest jeszcze parę, które mnie prosiły o instrukcję, więc... :)

      Usuń
  2. Bardzo mi się podoba Twój nowy szablon na gorzko słodko :D

    OdpowiedzUsuń
  3. A ja chciałam poinformować, że pobrałam szablon "the lifetime of adventure" na bloga okinawa-tales.blogspot.com. Zmieniłam przy tym minimalnie hover dla bocznych linków, ale hmm, mam nadzieję, że nie masz nic przeciwko.

    OdpowiedzUsuń
  4. omnomnomnomnom, dziękuję za instrukcję! Jak to ogarnę, to raczej poradzę sobie z resztą, kocham Cię <3

    OdpowiedzUsuń
  5. Właśnie ostatnio zastanawiałam się jak takie menu zrobić, dlatego bardzo dziękuję za instrukcję :D

    OdpowiedzUsuń
  6. Witam, bardzo chciałabym pobrac szablon fairy tale (http://hostuje.net/file.php?id=9d16a2fc7d945d085752d34b25255867) lecz nie znam hasła. Mogłabyś mi je udostępnic?
    Z góry dziękuję.
    + hasło : Gumowy miś :)

    OdpowiedzUsuń
  7. Pierwszy raz to menu mi wyszło i to dzięki tobie! A próbowałam już naprawdę z wielu stron, dziękuję! ♥ Choć muszę przyznać, że musiałam jeszcze dodatkowo je wyśrodkować, bo po tej instrukcji nie wyszło w ogóle wyśrodkowane. Nie wiem czemu....
    No, ale w końcu się udało, więc dziękuję jeszcze raz!

    OdpowiedzUsuń
    Odpowiedzi
    1. Cieszę się, że pomogłam :)) ojej, nie wiem, czemu ten center nie działa, bo mnie właśnie działa z tym całym kodem :c

      w.

      Usuń
  8. Ten komentarz został usunięty przez autora.

    OdpowiedzUsuń
    Odpowiedzi
    1. Tak naprawdę, to tak samo jak z menu - dzięki: position: fixed
      Ustawiasz parametry tak, by znalazło się ono po prawej stronie, czyli prawdopodobnie ->

      position: fixed; top: 0px; right: 10px;
      i tyle. Musisz tylko wiedzieć, jaki selektor mają Twoje ikonki, żeby reagowały na komendy.

      Pozdrawiam,
      wanilijowa

      Usuń
    2. nadałam im komende taką jak napisałaś. fajnie sie przeniosły w prawy górny róg, ale są pd paskiem tym fioletowym u mnie. Wiesz może jak je dać "na wierzch" na pasek ??

      Usuń
    3. Już nie trzeba jeszcze musiałam dodać komende z-index, czyli nakłądanie i udało się :)

      Dzięki kochana za pomoc :))

      Usuń
  9. Ten komentarz został usunięty przez autora.

    OdpowiedzUsuń
    Odpowiedzi
    1. dałaś "left: 200", przez co menu jest w połowie strony :) daj 0. A potem spróbuj dodać text-align: center, a jeśli nie zadziała, to spróbuj display: inline

      Usuń
    2. Jeszcze przed chwilą któreś z tych kodów działało, a teraz nie działa żaden.

      Usuń
    3. może zapomniałaś wstawić między komendami znaku ; ?

      Usuń
    4. Kurcze, wpisuję wszystko tak jak każesz...

      Usuń
    5. Jeszcze raz zrobiłam wszystko i ani jeden ani drugi nie działa mi.

      Usuń
    6. Może zajrzałabyś na mojego bloga ? Zrobiłabym Cię jako administratorkę? Jeśli to nie problem.

      Usuń
    7. @ - affabre.sis@gmail.com ; wyślij, to zerknę ;) no i powiedz mi co Ty w ogóle chcesz z tym menu zrobić :)

      Usuń
    8. Żeby menu było na środku tak jak u Ciebie pokazane :)

      Usuń
    9. Bardzo serdecznie dziękuję za pomoc.
      :))
      Bardzo przydatny blog!

      Usuń
  10. Witaj.
    Zrobiłam menu tak jak napisałaś. Chciałabym się zapytać jak zrobić, żeby zniknęła ta ramka w menu? Oto link do bloga jakbyś chciała zobaczyć o co mi chodzi: http://pomimo-ran.blogspot.com/. Byłabym wdzięczna za radę.

    OdpowiedzUsuń
    Odpowiedzi
    1. musisz wejść w szablon - dostosuj - zaawansowane. i tam jest zakładka 'strony'. i tam usuwasz kolor obramowania

      Usuń
    2. Pod menu są takie kropeczki, je także mozna jakoś usunąć?

      Usuń
    3. znajdź w tym kodzie co podałam 'border-bottom: dotted' i usuń to (:

      Usuń
  11. Witam, a ja mam odwrotny problem jak takie nieruchome menu zmienić w "normalne" menu tylko na górze strony niezależne od przewijania ? mam w position: relative .

    OdpowiedzUsuń
  12. Jak sprawić żeby pasek stron przy przewijaniu na dół nie znikał za postami?

    OdpowiedzUsuń
  13. Robię wszystko tak jak piszesz, a niestety dalej moje menu zaczyna się od połowy strony :( Co robić?

    OdpowiedzUsuń
    Odpowiedzi
    1. Bardzo możliwe, że jest w instrukcji jakiś błąd. Niedługo będę je "odświeżać" i wszystko dokładnie posprawdzam i pododaje informacje, które będą konieczne, aby instrukcja skutecznie i dobrze działała na każdym blogu. W tej chwili tylko mogę prosić o jakikolwiek kontakt ze mną w celu wyjaśnienia sprawy. :)

      Usuń
  14. Ten komentarz został usunięty przez autora.

    OdpowiedzUsuń
  15. Bardzo ciekawie piszecie moi drodzy :) dużo pozytecznej wiedzy :)

    OdpowiedzUsuń
  16. Próbuję zrobić obrazek jako tło i za każdym razem sięga tylko do 2/3 menu :/ Jakie on powinien mieć wymiary?

    OdpowiedzUsuń
    Odpowiedzi
    1. Ja zazwyczaj jak ustawiam jakiekolwiek tło to dodaję:background-size:100%. Wtedy gdy obrazek jest za mały "powiększy się" i dopasuje do szerokości elementu ( tracąc niestety na jakości ), a za duży obrazek zmniejszy swoją szerokość i będzie elegancko współgrać z całym elementem.
      Całość niestety nie zadziała w przypadku używania patternu. Tutaj zaradzić może background-repeat:repeat;, które automatycznie rozprowadzi pattern na szerokość całego menu.
      A wymiary to jak największe. :) Dużo za duże tło i tak się zmniejszy i nadal będzie wyglądać przyzwoicie i nie będzie wypikselowane. Tak na oko to mogę powiedzieć, że szerokość większa od 1200px to na pewno byłaby konieczna. :)

      Usuń
  17. Brawo.... Gitara :P

    OdpowiedzUsuń
  18. Ten komentarz został usunięty przez autora.

    OdpowiedzUsuń
  19. Okej wszystko działa, ale jak wyśrodkować menu? U mnie jest z lewej strony, dodatkowo lekko ucięte. I kolejne pytanie - jak zmienić czcionkę, w sensie jakie czcionki mogą być użyte, chodzi mi o nazwę? Będę bardzo wdzięczna za odpowiedź. :)

    OdpowiedzUsuń
    Odpowiedzi
    1. Poradziłam sobie :)
      Dodałam : #PageList1 ul {text-align: center;}

      Usuń
    2. Dokładnie o ten kod chodzi. :)
      W kwesti czcionek to jest raczej indywidualna sprawa. Możesz poszukać na https://www.google.com/fonts odpowiedniej czcionki dla Ciebie, tylko pamiętaj, że trzeba wcześniej dodać ją do kodu bloga. ;)

      Miłego dnia!
      Tyler

      Usuń