Wysuwane gadżety/menu cz.2

W części pierwszej przedstawiony był jeden ze sposobów, aby gadżety wysuwały się w pionie. Znalazło się też tam sporo "teoretycznych" zagadnień związanych z tym problemem, które według mnie odgrywają kluczową rolę w całym procesie tworzenia tego gadżetu. Dlatego zanim zapoznacie się z poniższą instrukcją polecam tam zajrzeć.

Kłopotliwą częścią w przypadku gadżetów wysuwanych w poziomie jest tytuł danego gadżetu. Potrzebny jest kod, który "przekręci" go, aby całość wyglądała naturalnie i spójnie. To jest kluczowe w tym przypadku i radzę zwrócić na to szczególną uwagę.

Modyfikacje dokonywane w szablonie Olympics.

Zaczęłam od stworzenia odpowiedniego gadżetu z menu, wpisałam odpowiedni tytuł i wrzuciłam do środkowej kolumny, tuż nad post.

Pierwszą rzeczą, którą należy zrobić jest skromna modyfikacja całego gadżetu. U mnie to był HTML2.

Chodzi o jego pozycje. Możecie użyć albo position:fixed ( jeśli chcecie, aby gadżet przewijał się razem z blogiem ) lub position:absolute ( jeśli ma zostać w miejscu ). Pozycje dalej modyfikujemy za pomocą top, bottom, right, left - w obu przypadkach jest to kompletnie inna sytuacja.

Position:fixed to pozycjonowanie względem całego okna przeglądarki, co może powodować mniej lub więcej problemów w zależności od sytuacji, natomiast position:absolute to pozycjonowanie względem elementu zawierającego ( tak, pytajcie mnie o co chodzi - wyczytane i niestety niezrozumiane przeze mnie ). Wydaje mi się, że chodzi tu o pozycję względem elementu typu content, main-inner czy body. Interpretujcie na swój sposób. My zajmiemy się tylko uzyskaniem odpowiedniej pozycji.

#HTML2 { position:fixed; top:200px; left:200px; padding:10px; background:#eee;}

Left robi tu za wartość przejściową, chodziło mi, aby umiejscowić gadżet, zobaczyć gdzie się znajduje, a następnie ponownie ustalać pozycję.

Teraz chwila zabawy z wyglądem gadżetu, czyli padding, background czy inne pomysły na wygląd Waszego gadżetu i przechodzimy do głównej atrakcji, czyli tytułu.

Tytuł gadżetu, czyli najbardziej upierdliwa rzecz. Ileż się trzeba z tym namęczyć zanim w końcu dojdzie się do pozycji idealnej. Ale nieważne, bierzemy się do roboty.

Zacznijmy od:

#HTML2 h2 { position:absolute;background:#222;text-align:center;font-size:8pt;font-weight:400;font-family:Arial;color:#ddd;letter-spacing:2px;text-transform:uppercase;}

Chodzi o to, aby właśnie pozycjonować tytuł względem gadżetu ( tak to wygląda według mnie ).

Gdy już zobaczymy jak nasz tytuł wygląda teraz i zanim zaczniemy krzyczeć, dodajmy jeszcze transform dla tekstu, aby się "obrócił" i wpasował się do naszych późniejszych zamierzeń.

#HTML2 h2 { position:absolute; transform:rotate(90deg); -moz-transform:rotate(90deg);-webkit-transform:rotate(90deg);background:#222;text-align:center;font-size:8pt;font-weight:400;font-family:Arial;color:#ddd;letter-spacing:2px;text-transform:uppercase;}

No to teraz dopiero powinniście się za głowę złapać! :D Ale spokojnie, wypijcie łyka wody i do pracy rodacy, bo gadżet się sam nie zrobi.

Jeśli każdy komputer działa jak mój i na każdym komputerze wygląda to tak jak u mnie to tytuł powinien być nieco niewyraźny, zamazany. Tak jakby nie w swoim rozmiarze. Jeśli tak jest ( a nawet jeśli tak nie jest ) to musimy ustalić wielkość ( długość ) tytułu, aby była ona równa wysokości gadżetu.

W moim przypadku wyszło:

#HTML2 h2  { position:absolute; transform:rotate(90deg); -moz-transform:rotate(90deg);-webkit-transform:rotate(90deg);width:165px;background:#222;text-align:center;font-size:8pt;font-weight:400;font-family:Arial;color:#ddd;letter-spacing:2px;text-transform:uppercase;}

Tę długość trzeba znaleźć metodą prób i błędów. Jednak, gdy Wasz tytuł przestanie być zamazany, zauważycie, że jest już w 100% wyraźny to znaczy, że znaleźliście wartość i teraz musicie tylko znaleźć pozycję.

A to znowu jest męczące i trzeba na oko wymierzać czy to 10px czy 15px. Ale nieważne...

#HTML2 h2  { position:absolute; transform:rotate(90deg); -moz-transform:rotate(90deg);-webkit-transform:rotate(90deg);width:165px;background:#222;text-align:center;font-size:8pt;font-weight:400;font-family:Arial;color:#ddd;letter-spacing:2px;text-transform:uppercase;top:65px;right:250px;}

Tak to wyglądało u mnie. Chciałam ustawić tytuł z lewej strony, bo gadżet będzie się wysuwać z prawej ( na screenie z prawej, ale jeszcze nie wiedziałam co chce zrobić :P ).

Jak już to mamy to dalej jedziemy już z górki, przy okazji robiąc parę ewolucji w powietrzu. ( Nawiązanie do panów na roboczych zdjęciach ).

Pozycjonujemy gadżet, czyli to o czym poczytaliście już w części pierwszej. Ja to pozostawię z krótkim komentarzem, a mianowicie pokażę co ja wpisałam. Tak wiem, jestem leniuszek.

Najpierw umiejscowiłam gadżet na odpowiedniej wysokości i wyrównałam do prawej, tak, aby zobaczyć jak gadżet będzie wyglądać na hoverze:

#HTML2 { position:fixed; top:200px; right:0px; padding:10px; background:#eee;}

Dalej:

#HTML2 { position:fixed; top:200px; right:-315px; padding:10px; background:#eee;} 

Znowu musimy na czuja znaleźć wartość dla "schowania" się całego gadżetu. Jak już znajdziemy i będzie nam tak ładnie wystawać tytuł to zrobimy hover:

A hover jest już dziecinnie prosty:

#HTML2:hover { right:0px;}

 I o ile wszystko poszło dobrze, nigdzie nie brakuje średnika, kropki czy przecinka to możecie cieszyć się Waszym gadżetem: