środa, 4 marca 2015

Kwadratowe menu

Element: Strony ( PageList )
Stopień trudności: xxxx
Czas wykonywania: 20 minut
Dzień dobrerek. Mam nadzieję, że dzisiejszy dzień będzie dobrym dniem na skromną instrukcję. Tych ostatnio niewiele ( ba, w ogóle ich nie ma ), jednak skoro już parę osób wpadło na dobry pomysł, przy okazji publikacji ostatniego szablonu, to czemu by nie napisać krótkiego tutorialu. A więc dzisiaj będzie mowa o "stronach" jako małych kwadracikach, które po najechaniu myszką się powiększają i pokazują tekst. Rzecz nie jest trudna, ale do najłatwiejszych nie należy. Jeśli jesteś początkującym bloggerem polecam zapoznać się z najprostszymi instrukcjami dotyczącymi tego gadżetu i nie tylko



1. Zacznijmy od początku. Tworzymy gadżet i umieszczamy go w wybranym miejscu. Możecie dodać kody dla #PageList1, które pozwolą Wam sprecyzować jego pozycje czy ogólny wygląd.  Jako, że ja dostosowywałam menu już po skończeniu całego szablonu ( swoją drogą również po skończeniu menu ), to mój kod wyglądał tak:
#PageList1 {position:absolute;top:10px;width:50px;left:-3px;;z-index:999999999;}
  • position:absolute - pozwala nam to przesunąć gadżet w dowolną stronę od miejsca jego położenia. Moje menu początkowo znajdowało się pod nagłówkiem;
  • top:10px;left:-3px; - są to "suplementy" do kodu powyżej/pozycji. Skoro powyżej ustaliłam, że gadżet będę przemieszczać w pewnych kierunkach, to tutaj określiłam dokładnie ich pozycje;
  • z-index:99999999 - liczba ta jest kompletnie przypadkowa, jednak jest dosyć wysoka wartość pozwala gadżetowi znaleźć się "powyżej" wszystkich innych na blogu;
  • width - ustaliłam sobie dla wygody długość gadżetu 
W zależności od czego zaczynacie ten krok może być pierwszym albo ostatnim. Również najprawdopodobniej po skończeniu menu będziecie musieli  do niego tak czy inaczej wrócić i dokonać paru zmian. 

2. Teraz czas na usunięcie nieznośnego wyliczenia naszego menu - to psuje cały efekt. Prosty i znany kod dla wszystkich. 
#PageList1 ul li {list-style:none;display:block;}

#easy

3. Następny krok jest troszkę skomplikowany i, być może, nieco niezrozumiały na samym początku. Tworzymy efekt dla hover, czyli ten po najechaniu na link myszką. Ale nie używamy do tego #PageList1:hover, ale po prostu #PageList1. Pozwoli nam to bez większych problemów zakodować hover i mieć od razu jego podgląd ( o ile używamy do tego projektanta ).
#PageList1 a {width:50px;display:block;background:#333;padding-top:20px;height:30px;text-align:center;font-family:calibri;text-transform:uppercase;font-size:9px;font-weight:400;color:#aaa;opacity:0.8;margin-bottom:-4px;}

 
Tworzenie kwadratów jest nie za fajne. Musimy wziąć pod uwagę nie tylko width + height, ale także padding. Dlatego najpierw ustalcie długość ( width:##px ), a potem height ( height:##px; ) razem z paddingiem ( padding:##px; ).
Kilka wskazówek i trików dotyczących tworzenia kwadratów:
  1. Suma paddingu + wysokości powinna być równa długości;
  2. Nie wiem z jakich powodów, ale naturalnie i automatycznie ustalony jest padding-bottom:5px; tak na oko; nie wliczajcie go gdy kwadrat jest mniejszy niż 50px;
  3. Przy tworzeniu kwadratów od długości większej niż 50px musimy dodawać padding bottom:5px+; w przypadku tych o długości 50px i nie jest to konieczne;
Kilka kwadratów:
- width:30px;padding-top:10px;height:20px; ( 30=20+10 )
- width:80px;padding-top:35px;padding-bottom:5px;;height:40px; ( 80=35+5+40 )
-width:70px;padding-top:30px;padding-bottom:5px;;height:35px; ( 70=30+5+35 )

4. Gdy już stworzymy pasujący nam efekt dla hover to kopiujemy #PageList1 a, podwajamy go w kodzie i dopisujemy w jednym :hover
#PageList1 a {width:50px;display:block;background:#333;padding-top:20px;padding-bottom:0px;;height:30px;text-align:center;font-family:calibri;text-transform:uppercase;font-size:9px;font-weight:400;color:#aaa;opacity:0.8;margin-bottom:-4px;}
#PageList1 a:hover {width:50px;display:block;background:#333;padding-top:20px;padding-bottom:0px;;height:30px;text-align:center;font-family:calibri;text-transform:uppercase;font-size:9px;font-weight:400;color:#aaa;opacity:0.8;margin-bottom:-4px;}
5. Teraz działamy z ogólnym wyglądem. Ja zaczęłam od dodania color:transparent, aby tekst się nie wyświetlał bez najechania na niego myszką. 
Następnie stworzyłam po prostu mniejszy kwadrat. 
#PageList1 a {width:20px;display:block;background:#333;padding-top:5px;padding-bottom:0px;;height:15px;text-align:center;font-family:calibri;text-transform:uppercase;font-size:9px;font-weight:400;color:#aaa;opacity:0.8;margin-bottom:-4px;color:transparent;-webkit-transition-duration: .50s;-moz-transition-duration: .50s;-o-transition-duration: .50s;;}

 
Dodałam również kawałek kodu, który zagwarantuje Wam swobodne, lekkie przejście.

6. Teraz możecie kombinować dalej z pozycją ( patrz punkt 1 ), zmieniać kolory, czcionki i wszystko inne!.
 

Podgląd na żywo
( kody użyte do przedstawienia podglądu są identyczne lub podobne do tych użytych w instrukcji; zazwyczaj dokonane zmiany dotyczą dostosowania do postu )

Link 1 Link 2 Link 3 Link 4

27 komentarzy:

  1. Twoje pomysły jak zwykle oryginalne i nowatorskie ;))

    OdpowiedzUsuń
  2. super :D z chęcią skożystam z intrukcji :)

    OdpowiedzUsuń
  3. Tyler, jesteś geniuszem! - ja to wiem!
    Bardzo przydatna ta instrukcja, cieszę się, że w końcu znalazł się ktoś w naszej cudnej blogosferze, kto potrafił to wytłumaczyć w łatwy sposób.
    Buziaczki, kochana <3

    OdpowiedzUsuń
  4. Super instrukcja! Na pewno kiedyś skorzystam ;)

    OdpowiedzUsuń
  5. Świetna instrukcja! Z pewnością z niej będę korzystać. :)

    OdpowiedzUsuń
  6. Genialnie♥, musze również przetestować wolna chwilką. Taki układ rewelacyjnie pasował by na mój blog.

    OdpowiedzUsuń
  7. Pobieram szablon Serenada na bloga czlowiek-zelazko.blogspot.com

    Świetna instrukcja!

    OdpowiedzUsuń
  8. Pobieram szablon Booyah na bloga my-guardian-angel-by-blangel.blogspot.com

    Bardzo przydatna instrukcja :D

    OdpowiedzUsuń
  9. Świetna instrukcja! :)

    Przepraszam, że tutaj zadaję to pytanie, ale jak można przenieść komentarze pod tytuł posta?

    OdpowiedzUsuń
  10. Szablon Sunrise tutaj:
    http://wychilluj--wreszcie.blogspot.com/

    OdpowiedzUsuń
  11. Świetny pomysł! Dziękuję ci za instrukcje :3 Na pewno skorzystam niedługo. Oczywiście powiem skąd mam taki wspaniały efekt. Niech ludzie wiedzą, gdzie inni mają dobre serce i pokazują takie świetne rzeczy. :3
    Pozdrawiam!
    nowo otwarty blog prywatny: http://lost-souls-graphics.blogspot.com/

    OdpowiedzUsuń
  12. Pobieram http://funkyimg.com/i/UcMc.png na ana4loselove.blogspot.com! ;D dziękuje ślicznie <3 szablon nie zostanie raczej już w tym momencie wstawiony ponieważ chce najpierw zrobić porządki na swoim blogu ale do końca tego dnia na pewno go dodam ;D

    OdpowiedzUsuń
  13. Pobieram http://hostuje.net/file.php?id=f36bd3832f8344400ce269e543b44543

    OdpowiedzUsuń
  14. Napisałam do Tyler w pewnej sprawie na maila, ale nie wiem, kiedy mogę się spodziewać odpowiedzi.

    OdpowiedzUsuń
  15. Pobieram szablon "Sunrise" na wiedza-chwila-pewnosc.blogspot.com
    Pozdrawiam. :)

    OdpowiedzUsuń
  16. Pobrałam szablon 'The Curse' na bloga http://solidscript.blogspot.com/
    Pozdrawiam, robicie świetne szablony ^w^

    OdpowiedzUsuń
  17. Pobieram szablon 'booyah' na say-soomething. Pozdrawiam, świetne szablony.:)

    OdpowiedzUsuń
  18. Pobrałam szablon Lunar na bloga oiwr.blogspot.com :)

    OdpowiedzUsuń
  19. Bardzo dobry pomysł! Ostatnio robiąc menu u siebie na blogu, kombinowałam przy hover, aby zwiększał wielkość napisu. Minusem był fakt, że całe sąsiedztwo przesuwało się z automatu w dół. Pokombinowałam, ale jednak efektu nie uzyskałam, więc pozostałam przy tradycyjnej zmianie koloru.
    Ostatnio korzystałam z opcji position. Ważne jest tutaj, że element absolute, musi sie znaleźć w elemencie relative i do niego sie dostosowuje. Próbowałam się tym bawić przy okazji postu. Jednak Blogger to Blogger i zaskoczył zarówno mnie jak i kumpla, który zawodowo programuje strony. No cóż, oboje jak zaglądaliśmy do HTMLa mieliśmy ochotę go uprościć, tak bardzo xD
    Czasem jest to wkurzające, jak wiesz, że wszystko robisz dobrze, ale jednak Blogger ma gdzieś coś zaprogramowane i efekt nie jest taki, jaki ma być!
    A poza tym robię Ci instrukcjową konkurencję :D

    OdpowiedzUsuń
  20. Pobrałam walking travesty na http://hun-han-couple.blogspot.com/ :)

    OdpowiedzUsuń
  21. Cześć, um pobieram The Lifetime of adventure na kiedydiabelmowidouslug.blogspot.com ;')

    OdpowiedzUsuń
  22. JA MAM BARDZO WAŻNE PYTANIE
    co zrobić, kiedy indeks nie działa i ostatnie kwadraciki menu są wciąż przykryte innym gadżetem? :<

    OdpowiedzUsuń
  23. The curse - dla bloga http://o-inside-out.blogspot.com/
    Jeszcze nie wiadomo czy zostanie, ale na razie jest więc zamieszczam informację :)

    OdpowiedzUsuń
  24. Pobieram The Lifetime of adventure na http://karolinaprzybyla.blogspot.com/
    i dziękuję bardzo :)

    OdpowiedzUsuń
  25. Mam pytanie, co zrobić, by to menu było poziomo, nie pionowo?

    OdpowiedzUsuń

- +
Szablon wykonany przez Tyler