Wysuwane gadżety/menu cz.1

W propozycjach znalazłam ten pomysł. Z komentarzy wynikało także, że może być to kwestia, którą ciężko wytłumaczyć czy po prostu rzecz, która jest trudna to zrozumienia. Dlatego dzisiaj ważna będzie też teoria, ponieważ uważam, że jeśli chodzi o to zagadnienie gra ona ogromną rolę. I tego się trzymajcie czytając tą instrukcję. Pomoże Wam to znacznie, przynajmniej takie jest moje odczucie. 

Po pierwsze: zrozumienie.

Zrozumienie czego? A no tego, jak taka rzecz działa. Jak działa wysuwanie się gadżetów.

Jakby mnie ktoś zapytał jak to działa, moja odpowiedź brzmiała by dosyć skomplikowanie, ale postaram się przedstawić Wam to w jak najprostszy i najkrótszy sposób.

Wysunięcie gadżetu to kwestia tylko i wyłącznie ustalenia jego pozycji! Także niekiedy dochodzi z-index, o którym później. Gdy zza bloga wystaje kawałek gadżetu, pod nim ukryta jest jego część, która po zetknięciu z myszką się wysuwa. Czyli zmienia swoją pozycje. Z oddalenia, załóżmy od prawej strony o 400px, robi się 200px; czyli pojawia nam się całe 200px gadżetu, który był pod.
Dobra, widzę, nadal słabo. Wybaczcie.
Może tak. Weźcie do ręki kartkę, zeszyt czy książkę. Włóżcie znaczną część pod stół, tak aby wystawał skrawek papieru. Kartka jest schowana, bo otrzymała właśnie taką komendę na pozycje. Zgodnie z Waszym widzimisię mogła wystawać 1/4 kartki, 1/2 czy cokolwiek. A teraz, nadal podtrzymując od dołu papier, drugą ręką dotknijcie wystającej części i przyciągnijcie ją do siebie. Zmienia pozycje, znowu wedle Waszego widzimisię. Gadżet zachowuje się tak samo, z tym, że robi to automatycznie. My mamy go tylko "zaprogramować", co jest bardzo łatwe. 

W pierwszej części zmierzymy się z gadżetami "w pionie". Poziom jest troszkę trudniejszy zw względu na fakt, że trzeba się bawić transformacjami tekstu, co jest uciążliwe, nudne i mnie zazwyczaj denerwuje.

No więc dobra. Czas zabrać się do pracy.

Tworzymy gadżet HTML/JavaScript, w którym umieszczamy linki lub jakikolwiek tekst. Do linków ustalamy klasę i inne mniej/bardziej ważne rzeczy. O tworzeniu menu w gadżecie HTML/JavaScript przeczytacie tutaj.

No więc, do gadżetu wklepujemy kod. Ja wpisałam:

<a class='navi' href='http://graphical-thoughts.blogspot.com/'>Propozycje</a>

<a class='navi' href='http://ask.fm/sleepingtyler'>Ask.fm</a>

<a class='navi' href='http://graphical-thoughts.blogspot.com/p/friends.html'>Polecani</a>

<a class='navi' href='http://graphical-thoughts.blogspot.com/p/dla-ciekawskich.html'>Pomocne</a>

<a class='navi' href='http://graphical-thoughts.blogspot.com/search/label/szablon'>Szablony</a>

<a class='navi' href='http://graphical-thoughts.blogspot.com/search/label/tutorial'>Tutoriale</a>

<a class='navi' href='http://graphical-thoughts.blogspot.com/p/blog-page.html'>Zamówienia</a>

<a class='navi' href='http://www.blogger.com/follow-blog.g?blogID=1963577186215401607'>Obserwuj +</a>

Na samym końcu tuż po ostatnim linku ew. zdaniu, możemy napisać tytuł, czyli to co opisze nam wysuwany gadżet.

Uwaga! Gdy gadżet wyjeżdżać ma z góry "tytuł" dodajemy na dole, w przypadku jednak, gdy gadżet wyjeżdża z dołu, "tytuł" leci na górę lub zwyczajnie wpisujecie tytuł w edycji danego gadżetu.

<h2 class='title'>Menu</h2>  

Gdy już mamy przygotowany cały gadżet. Ja akurat dodałam tekst na dół, co oznacza, że całość "wyjedzie" z góry.

Następnie musimy znaleźć selektor odpowiadający danemu gadżetowi. Robimy to wchodząc w edycje widgetu. Patrzymy na adres url strony i jedziemy do samiutkiego końca:

http://www.blogger.com/rearrange?blogID=250281471073074350&action=editWidget&sectionId=sidebar-right-1&widgetType=null&widgetId=HTML2 

Gdy już znaleźliśmy selektor, wchodzimy w projektanta szablonów i z uśmiechem na ustach przemieszczamy nasz gadżet.

Na sam początek naszej zabawy musimy znaleźć i wpisać odpowiednie komendy, które pozwolą nam ustawić gadżet w wybranym przez nas miejscu.  Jeśli gadżet ma nam się przewijać razem z blogiem używamy position:fixed, a jak nie to position:absolute; Przy absolute jednak trzeba się ciut bardziej namęczyć z ustawieniem gadżetu. Do tych dwóch komend dodajemy komendy zwane przeze mnie "naprowadzającymi". Mówią one nam o dokładnej pozycji gadżetu, czyli:

#HTML2 {position:fixed; top:0px;left:10px;width:234px;}

• top:0px; mówi nam o odległości od góry strony, a left:10px - to oczywiście odległość od lewej krawędzi. Mogą się one bardzo różnić. Niekiedy naprawdę trzeba się namęczyć, aby odpowiednio ustawić gadżet. Jednak tutaj polecam kombinacje na wszelkie sposoby. Próbowanie wpisywać przypadkowych wartości, mierzyć na oko. W końcu się uda. 
• width:234px; postanowiłam wpisać też szerokość gadżetu, co jest raczej konieczne w tej kwestii. :)

No więc dobrze. Skoro już wszystko mamy czas zająć się hoverem, czyli efektem po najechaniu myszką na pole gadżetu. Na sam początek zmieniamy ustawienie top. Efektu w poziomie nie chcę żadnego, dlatego też left:10px zostaje tak jak było. 

#HTML2 {position:fixed; top:-120px;left:10px;width:234px;}

U mnie widać, że gadżet już się schował za górną granicę strony, to znaczy, że wszystko idzie w dobrym kierunku.  Zmieniliśmy wartość, teraz czas na wprowadzenie hover. 

#HTML2:hover { top:0px;}

W tym przypadku, po najechaniu myszką gadżet wróci do  podstawowej formy. Nie potrzeba przepisywać wartości bazowych ( left, width ), gdyż one pozostaną automatycznie bez zmian. 

Jak doszliście do tego momentu, to już pewnie widzicie, że gadżet nie "wyjeżdża" ładnie spod strony. Aby to poprawić dodajemy transition, czyli przejście. Do "bazy" dodajemy:

#HTML2 {position:fixed; top:-120px;left:10px;width:234px;-webkit-transition-duration: .50s;-moz-transition-duration: .50s}

Te przejścia działają tylko dla przeglądarek Mozilli i Chorma. W przypadku gdy ktoś ma ochotę na działania w innych przeglądarkach należy dodać całą gamę przejścia, o czym możecie sobie poczytać wpisując w google transition css. O tym kiedy indziej, gdyż nie chce zaśmiecać i tak już długiego postu.  

Już teraz nasze menu powinno ładniej "wyjeżdżać". Można też wprowadzić niewielkie zmiany w wartościach, aby uzyskać inne efekty. Ale jak pisałam, w tej kwestii trzeba się bawić i kombinować. 

Na koniec kod CSS z position:absolute, gdzie gadżet znajduje się w tym samym miejscu co position:fixed; 

#HTML2 {position:absolute; top:-450px;left:-750px;width:234px;-webkit-transition-duration: .50s;-moz-transition-duration: .50s}

#HTML2:hover { top:-360px;}

Grafiki pomocne zostaną dodane w najbliższym czasie.