Strażniczki, łączcie się!

There is a place where darkness reigns.
We've got the power to fight back.
We save the day, united five as one.
We can become more then you know,
The heart will lead the way to what we can control.
Water, Fire, Earth and Air. Guardians Unite!

Marion Raven - We Are W.i.t.c.h.

Dzieeeeń dobry, moje krówki! Co powiecie na małą przemianę w Strażniczki? :D
Serię specjalną rozpoczniemy instrukcją. Będzie to menu, z którego po najechaniu będą wysuwać się obrazki. Włączmy sobie jakąś dobrą nutę i lećmy z tym koksem.
(Traktujcie to raczej jako dopasowane do tematu tłumaczenie tego poradnika: klik!)
Tak naprawdę są dwa sposoby stworzenia tego menu: poprzez dostosowanie kodu CSS3 (będzie później) do naszego istniejącego menu (z selektorem PageList, osobiście nie próbowałam) lub stworzenie go za pomocą gadżetu HTML. Zajmiemy się tym drugim sposobem.
Na sam początek obejrzymy sobie nasz kod html i rozłożymy go na czynniki pierwsze.

Proszę pamiętać o tym, że tylko pisanie kodu, a nie kopiowanie go może was czegoś nauczyć ;).

<ul class="mh-menu">
<li>
<a href="http://briaandchrissy.com">
<span>The Keeper of The Heart</span>
<span>Will Vandom</span>
</a>
<img src="http://i62.tinypic.com/k4tkpx.jpg" alt="Symbol.1"/>
</li>
</ul> 

Okej, wygląda trochę strasznie. Już tłumaczę, co i jak: tekst zaznaczony na czerwono to coś w stylu id naszego menu. Zazwyczaj w kod CSS wpisuje się #PageList1, by manewrować menu. Tym razem mamy coś takiego. Równie dobrze możecie tam wpisać banana-batman, nikt się nie obrazi. No, może wasz kod css, gdy coś źle powpisujecie ;).
Adres zaznaczony na niebiesko to adres strony, do której będzie przenosiło nas kliknięcie na daną kartę. Raczej nie ma w tym nic skomplikowanego.
Tekst zielony i pomarańczowy to tekst, który wyświetli się na naszym menu. Są rozdzielone, gdyż dla każdego z nich będziemy ustawiać inne kolory, efekty, różne tego typu rzeczy. Nam potrzebne są w tej chwili oba, bo mam taki kaprys, wy spokojnie możecie wywalić jeden z nich.
Link zaznaczony na fioletowo to nic innego jak nasz zalinkowany obrazek, który będzie się wyświetlał po najechaniu na menu. Naprawdę, żadna filozofia.
I w końcu ostatni kolorek ze wszystkich: różowy. To tekst alternatywny - będzie wyświetlany, gdy adres będzie zły, obrazek zniknie z internetu lub staną się z nim inne cuda.
Jak na razie jest całkiem prosto, prawda? Zapnijcie pasy, lecimy z kodem CSS3. Wszystkie wartości oznaczone tym kolorem można dowolnie zmieniać i dopasowywać.

.mh-menu{
left: 00px;
top: 00px;
height: 000px;
width: 250px;
margin: 10px auto;
position: fixed;
}

Widzicie? Pojawiło się nasze wcześniejsze mh-menu! :D Bez niego cały kod nie będzie działał, także radzę o nim pamiętać. Left i top odpowiadają nam za umiejscowienie gadżetu, height i width za szerokość i wysokość całego menu, nie poszczególnych zakładek. Przydatne, jeśli chcecie wsadzić menu do kolumny bocznej. Margin to taki niewidoczny "odpychacz": tworzy wokół naszego menu więcej wolnego miejsca, odsuwając inne gadżety. Position: fixed odpowiada nam za ruchomość naszego menu. Możemy równie dobrze zamienić je na absolute lub relative, jeśli chcemy, by nasze menu nie jeździło razem ze scrollowaniem strony. Więcej o selektorze position znajdziecie tu: klik!
Przy okazji: jeśli wklepujemy w kod "position fixed", pamiętajmy o tym, że nie możemy nawalić tylu zakładek, ile nam się podoba: jeśli będzie ich za dużo, na część z nich nie będziemy mogli najechać, bo sobie uciekną poza okno przeglądarki.

.mh-menu li{
width: 250px;
}

Szerokość, z jaką nasze linki będą "łapane" przez myszkę. Najlepiej, by wpisać tu taką samą wartość, jak w kodzie poniżej lub o 20-30 pikseli większą. Dzięki temu nie będziemy musieli najeżdżać myszką w sam róg zakładki, by móc znaleźć klikany link.

.mh-menu li a{
display: block;
width: 230px;
padding: 0px 10px;
text-align: right;
position: relative;
z-index: 10;
background: #fff;
height: 70px;
border-right: 1px solid #ddd;
background-color: rgba(255,255,255, 0.8);
}

O, moje ulubione. Te słówka odpowiadają nam za wyświetlanie zakładek po najechaniu na linki. Display: block odpowiada nam za to, że linki są poukładane pionowo. Za poziome ułożenie zakładek odpowiada display: inline, chociaż nie obiecuję, że w tym przypadku będzie działał. Text-align: dzięki temu selektorowi przeglądarka układa nam tekst. W tym przypadku chcemy go mieć po prawej stronie. Z-index to natomiast nowość w tym kodzie. Jest to nic innego, jak "wyciąganie" menu na sam wierzch - nie zasłoni nam go żaden nagłówek, gdy będziemy mieć tę linijkę w kodzie.
Cóż, z ważniejszych rzeczy to chyba tyle, jeśli chodzi o tą część.

.mh-menu li:nth-child(1):hover a{
background-color: rgba(203, 72, 164, 0.9);
}

I praktycznie sama końcówka. Ten kod odpowiada za zmianę kolory zakładki po najechaniu na nią. Proste? Proste. Jeśli chcecie stworzyć kolejne zakładki, które będą miały inny kolor po najechaniu niż ta pierwsza, po prostu zmieniacie tą jedynkę u góry na kolejną cyfrę.

.mh-menu li a span{
display:block;
}

A to tutaj to nic innego, jak umiejscowienie naszych zakładek po najechaniu na nie. Wiecie, żeby nam nigdzie nie pouciekały.

.mh-menu li a span:first-child{
font-weight: 100;
font-size: 12px;
color: #aaa;
padding-top: 10px;
font-family: 'Century Gothic', Georgia, serif;
}

Ustalamy tutaj wygląd naszego drugiego tekstu, a raczej opisu pod tekstem głównym (w naszym przypadku jest to "The Keeper of The Heart"). Raczej powinniście to ogarnąć.

.mh-menu li a span:nth-child(2){
font-weight: 700;
font-style: normal;
font-size: 28px;
        color: #a04daa;
font-family: 'Century Gothic', Georgia, serif;
-webkit-transition: color 0.2s linear;
-moz-transition: color 0.2s linear;
-o-transition: color 0.2s linear;
-ms-transition: color 0.2s linear;
transition: color 0.2s linear;
}

A to nasz pierwszy napis (Will Vandom). Dziwne linijki, zaczynające się od "-" odpowiadają nam za szybkość i sposób, w jaki będą zmieniać się napisy po najechaniu na nie. Też nie jest to nic skomplikowanego. Jest ich tak dużo, ponieważ każdy odpowiada za wyświetlanie linku w różnych przeglądarkach.

.mh-menu li:hover span:nth-child(2){
color: #fff;
}

Kolor naszego głównego, większego tekstu po najechaniu na link.

.mh-menu li img{
position: absolute;
z-index: 1;
left: 0px;
top: 0px;
opacity: 0;
-webkit-transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
-moz-transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
-o-transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
-ms-transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
}

Czas na kod dotyczący naszego wysuwanego obrazka! Position był, z-index też, dziwne linijki z "-" również. Left i top chyba nie trzeba tłumaczyć, hm ;)?

.mh-menu li:hover img{
left: 230px;
opacity: 1;
}

A to już ostatnia linijka naszego kodu CSS3. Mówi nam ona o tym, jak daleko w lewą (lub prawą, jak wolicie) stronę będzie nam się wysuwał obrazek. Ustawiamy tutaj również przezroczystość naszego zdjęcia/artu/czego tam chcecie i viola! Oto mamy pierwszą zakładkę naszego menu!
Jak to powinno wyglądać przed najechaniem:

I po:

Tak, dorobiłam już kolejne zakładki z kolejnymi strażniczkami. Jak prezentuje się całość?

Tak, moi drodzy, to na tyle. Źródła, z których korzystałam:

• kodcss.pl
• blog.atena.pl
• codrops <- tu możecie również pobrać niedostosowywany przeze mnie kod CSS3 i kod HMTL.

Jeśli ktoś koniecznie chce takie menu, jakie tworzyliśmy w tej instrukcji, to proszę bardzo. Oto kod HTML:

<ul class="mh-menu">
<li>
<a href="#">
<span>The Keeper of The Heart</span>
<span>Will Vandom</span>
</a>
<img src="http://i62.tinypic.com/k4tkpx.jpg" alt="Symbol.1"/>
</li>
<li>
<a href="#">
<span>The Guardian of Water</span>
<span>Irma Lair</span>
</a>
<img src="http://i62.tinypic.com/qx5r81.jpg" alt="Symbol.2"/>
</li>
<li>
<a href="#">
<span>The Guardian of Fire</span>
<span>Taranee Cook</span>
</a>
<img src="http://i61.tinypic.com/2ljm0wk.jpg" alt="symbol.3"/>
</li>
<li>
<a href="#">
<span>The Guardian of Earth</span>
<span>Cornelia Hale</span>
</a>
<img src="http://i62.tinypic.com/5jtor6.jpg" alt="symbol.4"/>
</li>
<li>
<a href="#">
<span>The Guardian of Air</span>
<span>Hay Lin</span>
</a>
<img src="http://i62.tinypic.com/20iylnm.jpg" alt="symbol.5"/>
</li>
</ul>

Kod CSS3:

 .mh-menu{
left: -15px;
top: 10px;
height: 510px;
width: 250px;
margin: 10px auto;
position: fixed;
}
.mh-menu li{
width: 250px;
}
.mh-menu li a{
display: block;
width: 230px;
padding: 0px 10px;
text-align: right;
position: relative;
z-index: 10;
background: #fff;
height: 70px;
border-right: 1px solid #ddd;
background-color: rgba(255,255,255, 0.8);
}
.mh-menu li:nth-child(1):hover a{
background-color: rgba(203, 72, 164, 0.9);
}
.mh-menu li:nth-child(2):hover a{
background-color: rgba(96, 168, 179, 0.9)
}
.mh-menu li:nth-child(3):hover a{
background-color: rgba(174,54,55,0.9);
}
.mh-menu li:nth-child(4):hover a{
background-color: rgba(195, 210, 67, 0.9);
}
.mh-menu li:nth-child(5):hover a{
background-color: rgba(106, 112, 133, 0.9);
}
.mh-menu li a span{
display:block;
}
.mh-menu li a span:first-child{
font-weight: 100;
font-size: 12px;
color: #aaa;
padding-top: 10px;
font-family: 'Century Gothic', Georgia, serif;
}
.mh-menu li a span:nth-child(2){
font-weight: 700;
font-style: normal;
font-size: 28px;
        color: #a04daa;
font-family: 'Century Gothic', Georgia, serif;
-webkit-transition: color 0.2s linear;
-moz-transition: color 0.2s linear;
-o-transition: color 0.2s linear;
-ms-transition: color 0.2s linear;
transition: color 0.2s linear;
}
.mh-menu li:hover span:nth-child(2){
color: #fff;
}
.mh-menu li img{
position: absolute;
z-index: 1;
left: 0px;
top: 0px;
opacity: 0;
-webkit-transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
-moz-transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
-o-transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
-ms-transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
}
.mh-menu li:hover img{
left: 230px;
opacity: 1;
}

Przepraszam, jeśli przez suwaki w cytatach będziecie musieli kopiować po odrobince z każdego kodu, ale niestety, gdyby nie te suwaki, notka rozlazłaby się w nieskończoność. Chociaż jakoś to załatwimy. Link do pliku z kodami z tej instrukcji w wersji poprzerabianej: klik!
Prosiłabym o zamieszczenie informacji odnośnie codrops, gdy używacie tych kodów.
Pozdrawiam wszystkich serdecznie i miłej końcówki wakacji :D!