Cześć!
Dzisiejszą instrukcję sponsoruje dla MRUwiska Karol, z którą ją opracowałam. Pewnie znacie ją jako Tyler (choć podobno nie przepada za tym nickiem) z Panda Graphics i z Graphical Thoughts.Bardzo dziękuję jej za współpracę i liczę na to, że to nie ostatni raz kiedy się jej podjęłyśmy. :)
Bazę kodu oraz pierwszą animację opracowała właśnie ona. Ja ją opisałam i dorzuciłam kilka gotowców na jej podstawie od siebie.
Mam nadzieję, że efekt Wam się spodoba. :)
Menu prezentuje się następująco:
Krok I - utworzenie gadżetu
Utworzymy je w gadżecie HTML/JavaScript. Aby dodać go na bloga, musimy przejść do jego profilu, by w następnym kroku kliknąć układ i w wybranym miejscu, w którym menu ma się znajdować: dodaj gadżet. Wybieramy z listy HTML/JavaScript, którego podgląd znajduje się poniżej.
Krok II - HTML
By osiągnąć efekt widoczny na początku posta do gadżetu należy wkleić następujący kod:
Jeśli chcecie uzyskać efekt identyczny powyższy kod musicie uzupełnić jedynie o adresy odnośników. W tym celu zastąpcie: adres odnośnika odpowiednim linkiem z Waszego bloga.<div class='menu'><a href=‘adres odnośnika’><div class='text'>Strona główna<i>Home page</i></div><div class='picture'><img src='http://i.imgur.com/7cEX1SI.png'/></div></a></div><div class='menu'><a href=‘adres odnośnika’><div class='text'>Lista blogów<i>List of blogs</i></div><div class='picture'><img src='http://i.imgur.com/iRGNKLW.png'/></div></a></div><div class='menu'><a href=‘adres odnośnika’><div class='text'>Galeria<i>Gallery</i></div><div class='picture'><img src='http://i.imgur.com/H3xuTB6.png'/></div></a></div><div class='menu'><a href=‘adres odnośnika’><div class='text'>Kontakt<i>Contact</i></div><div class='picture'><img src='http://i.imgur.com/a8qO5jb.png'/></div></a></div>
Osoby, które zdecydują się na edytowanie pod swoje indywidualne potrzeby kodu mają odrobinę bardziej skomplikowane zadanie.
Kod składa się z kilku sekcji, w których każda z nich odpowiada kolejnym odnośnikom. Linków możecie wstawić dowolną ilość uzupełniając w każdym przypadku poniższy kod:
<div class='menu'><a href=‘adres odnośnika’>
<div class='text'>
Tytuł karty<i>Opis karty</i></div><div class='picture'>
<img src='adres obrazka'/></div></a></div>
adres odnośnika - tutaj wklej link pod który skieruje nas karta
Tytuł karty - tu napisz tytuł swojej karty (u nas to na przykład "STRONA GŁÓWNA")
Opis karty - opis karty (w naszym przypadku to pochylone angielskie nazwy kart)
adres obrazka - link przekierowujący na bezpośredni adres do ikony (prosimy o umieszczanie w tym miejscu kwadratowych ikonek- najlepiej w rozmiarze 128x128px. Darmowe ikony możecie znaleźć np. na IconFinder)
Z kolejnymi linkami, które chcemy umieścić w naszym menu postępujemy analogicznie wklejając kolejne kody bezpośrednio pod poprzednimi.
Krok III - CSS
Skoro już utworzyliśmy nasz gadżet i uzupełniliśmy HTML, możemy przejść do naszej magii. A interesujący nas efekt uzyskamy poprzez dodanie odpowiedniego kodu CSS.
By go dodać w profilu naszego bloga wchodzimy w Szablon > Dostosuj > Zaawansowane > Dodaj arkusz CSS.
Kod nie należy do najtrudniejszych, ale może wymagać zabawy z pozycjonowaniem poszczególnych elementów. :) Mimo wszystko mam nadzieję, że nie sprawi Wam większych problemów.
By osiągnać interesujący nas efekt korzystamy z poniższego kodu:
/*ogólne*/
.menu {
overflow:hidden;
font-family: Arial; /*ustawiamy font*/
cursor: pointer; /*zmiana kursora*/
display: inline-block; /*ustawiamy wszystkie linki w poziomie*/
background: #eee; /*tło każdej z kart*/
width:128px; /*długość kart*/
padding: 40px 0px; /*odległość tekstu i obrazka od ramek - dzięki nim ustalimy wysokość*/
text-align:center; /*wyśrodkowanie tekstu*/
transition: 1s; /*czas trwania animacji*/
}
/* tytuł */
.text a {
color: #4a8f0d; /*kolor czcionki*/
font-size: 13px; /*wielkość czcionki*/
text-transform: uppercase; /*zmiana wszystkich liter na duże*/
transition: 1s; /*czas trwania animacji*/
}
/*opis*/
.menu i {
display: block; /*dzięki temu nasz pochylony opis będzie wyświetlał się pod tytułem*/
font-size: 11px; /*rozmiar czcionki*/
color: black; /*kolor*/
text-transform: lowercase; /*zmiana wszystkich liter na małe*/
}
/*ikona*/
.menu .picture {
padding: 20px 0px; /*odległość obrazka od krawędzi*/
opacity:1; /*widoczność*/
margin-top:-70px; /*podniesienie pudełka z obrazkiem w górę - tak aby przykrył nasz tekst*/
width:128px; /*szerokość karty z ikonką*/
transform:scale(0); /*zmniejszamy obrazek do 0*/
transition: 1s; /*czas trwania animacji*/
}
.menu .picture img {
max-width:60px; /*szerokość ikony*/
margin:auto;
}
/*animacja - poniżej nic nie zmieniamy*/
.menu:hover .picture {
transform:scale(1); /*po najechaniu kursorem na kartę obrazek powiększy się*/
}
.menu:hover .text {
transform:scale(0); /*po najechaniu kursorem na kartę tekst się zmniejszy*/
}
GOTOWCE
Aby skorzystać z gotowca powtórz krok pierwszy oraz drugi, a w arkuszu CSS wklej poniższe kody.
To wszystko na dziś ode mnie. :)
Mam nadzieję, że instrukcja przypadła Wam do gustu. Nie zapomnijcie o skomentowaniu notki (to mnie motywuje do pracy) i zapoznaniu się z zasadami
przed pobraniem (to też motywujące xD).No i w tym miejscu możecie Tyler pozdrowić i nakrzyczeć na nią, żeby się w końcu ruszyła i ogarnęła Graphical Thoughts, bo biedaczka sama nie wie jak się za to zabrać (może też potrzebuje motywacji? :D).
