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