Dwulinijkowe menu/linki

Post dedykowany specjalnie Yoko i Ronnie, które wyjątkowo były zaciekawione tym pomysłem. Prawda jest taka, że całość opiera się tylko i wyłącznie na <br/> i troszkę <span>. Ale oczywiście trzeba zacząć od początku.

Stwórzmy zwyczajne menu w gadżecie HTML/JavaScript, które posłuży nam jako "karty/strony" naszego bloga. O tego typu operacji możecie szerzej poczytać tutaj.

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

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

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

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

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

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

W skrócie co właśnie zrobiłam. Stworzyłam nowy gadżet HTML/JavaScript i w pole tekstowe dodałam powyższy kod. Za klasę linku przyjęłam "navi" i zaraz się zajmę dodaniem arkuszy CSS, aby moje menu miało ręce i nogi.

Kod prezentował się mniej więcej tak:

a.navi:link, a.navi:active, a.navi:visited {border:1px solid #eee;display:inline-block; width:106px; background:#fbfbfb; color: #dc427d; text-align:center; margin-bottom:2px;text-transform:uppercase; font-family:arial; font-size:7pt; letter-spacing:0px; padding:3px; -webkit-transition-duration: .50s;-moz-transition-duration: .50s }

a.navi:hover {background:#f5f5f5; color:#444; -webkit-transition-duration: .50s;border:1px solid #39bdc1;}

A całe menu tak:

No dobra, powiedzmy, że można było się spodziewać, że tak to będzie wyglądać. Nic nadzwyczajnego, prawda?

No więc trzeba coś z tym zrobić! Wracamy do początku, czyli do pola tekstowego w stworzonym przez nas gadżecie HTML/JavaScript. Jak już tam wróciliśmy to dołożymy drugą linijkę - tak jak pokazane jest to niżej:

<a class='navi' href='http://graphical-thoughts.blogspot.com/'>Link 1<br/>Opis linku 1</a>

<a class='navi' href='http://graphical-thoughts.blogspot.com/'>Link 2<br/>Opis linku 2</a>

<a class='navi' href='http://graphical-thoughts.blogspot.com/'>Link 3<br/>Opis linku 3</a>

<a class='navi' href='http://graphical-thoughts.blogspot.com/'>Link 4<br/>Opis linku 4</a>

<a class='navi' href='http://graphical-thoughts.blogspot.com/'>Link 5<br/>Opis linku 5</a>

<a class='navi' href='http://graphical-thoughts.blogspot.com/'>Link 6<br/>Opis linku 6</a>

<br/> - czy każdy wie co to jest? Nie? A więc <br/> proszę moich najdroższych czytelników to w języku HTML po prostu...spacja.

Czyli robimy spację w nazwie naszego linku i dodajemy jego opis, angielski odpowiednik, czy co tam się nam żywnie podoba. W każdym razie widzimy coś takiego:

Jakby się uprzeć to tutaj moglibyśmy zakończyć cały proces. Nam jednak nie podoba się, że opis linku jest tak samo ważny jak nazwa linku, a on ma być tylko skromniutkim opisikiem.

Więc wracamy do naszego kodu i myślimy co dalej. Jak już zrobiliśmy szaloną minę myśliciela to mamy teraz dwie opcje: albo dodajemy klasę, a co za tym piszemy kolejny kod albo bawimy się w "style".

Ja zrobię to za pomocą "class":

<a class='navi' href='http://graphical-thoughts.blogspot.com/'>Link 1<br/><span class='opis'>Opis linku 1</span></a>

<a class='navi' href='http://graphical-thoughts.blogspot.com/'>Link 2<br/><span class='opis'>Opis linku 2</span></a>

<a class='navi' href='http://graphical-thoughts.blogspot.com/'>Link 3<br/><span class='opis'>Opis linku 3</span></a>

<a class='navi' href='http://graphical-thoughts.blogspot.com/'>Link 4<br/><span class='opis'>Opis linku 4</span></a>

<a class='navi' href='http://graphical-thoughts.blogspot.com/'>Link 5<br/><span class='opis'>Opis linku 5</span></a>

<a class='navi' href='http://graphical-thoughts.blogspot.com/'>Link 6<br/><span class='opis'>Opis linku 6</span></a>

Span otwieramy tuż przed opisem i zamykamy tuż za. Robimy tak dlatego, że całość ma działać tylko na opis, nigdzie indziej. Póki co wyglądać to powinno tak samo jak na drugim obrazku. Trzeba więc to zmienić. Kodujemy! Moją klasą jest .opis i to będzie moim selektorem.

Szablon > Dostosuj > Zaawansowane > Dodaj arkusz CSS i piszemy:

.opis {font-size:7pt;color:#aaa;font-style:italic;text-transform:lowercase;}

I to jest koniec naszych działań. U mnie to wygląda tak:

Nie zapomnijcie pochwalić się swoim efektem! Mam nadzieję, że instrukcja czytelna i - co ważniejsze - czy działa! 

Również zachęcam do zostawiania propozycji na instrukcje! 

Miłego dnia!