poniedziałek, 24 marca 2014

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!


14 komentarzy:

  1. Ten komentarz został usunięty przez autora.

    OdpowiedzUsuń
  2. Jesteś genialna, Tyler! :) Kolejne moje menu będzie zdecydowanie zrobione w ten sposób! Dziękuję ślicznie za instrukcję ♥
    Wspominałam już kiedyś, że jesteś moją mentorką? Nie? No to mówię :>

    Pozdrawiam gorąco w ten chłodny dzień!

    OdpowiedzUsuń
  3. oo ty geniuszu <3

    OdpowiedzUsuń
  4. na pewno skorzystam z tej instrukcji (nawet od dłuższego czasu zastanawiałam się jak coś takiego zrobić) i muszę dodać, że jest bardzo fajnie opisana :D

    OdpowiedzUsuń
  5. Ja się tak zastanawiam.... a koniec końców to takie proste :D Bardzo dziękujemy za śliczną instrukcję!

    OdpowiedzUsuń
  6. Super post, na pewno to kiedyś wykorzystam :D
    A mam jeszcze 'uwagę' co do twojego nowego szablonu. Zauważ co się dzieje z kartami w 'kategoriach' (szczególnie z tymi po lewej stronie) Jak się już wejdzie w jakąś kategorię, to przycisk z prawej kolumny wjeżdża nieładnie na lewy przycisk odwiedzanej kategorii. Może tego nie zauważyłaś, albo coś, dlatego to piszę :)

    I po krótkich przemyśleniach doszłam do wniosku, że ty tym nowym szablonem zrobiłaś z tego bloga stronę internetową, a nie typowego bloga. Nie mówię, że to źle, bo ja już się przyzwyczaiłam do tego szablonu.

    Pozdrawiam xx *.*

    OdpowiedzUsuń
  7. Te kolorowe literki przyprawią mnie kiedyś o zawał, apopleksję, a potem jeszcze arytmię i... och.

    OdpowiedzUsuń

  8. to nie spacja tylko złamanie linii. a co do tutka to świetny. pozdrawiam

    OdpowiedzUsuń
  9. Dziękuję, u mnie już działa. Zapraszam www.iwonkowepasje.blogspot.com

    OdpowiedzUsuń
  10. długo czegoś takiego szukałam i wreszcie znalazłam! dziękuję, z pewnością skorzystam z tej instrukcji już zaraz :)

    OdpowiedzUsuń
  11. Ten komentarz został usunięty przez autora.

    OdpowiedzUsuń
  12. Dziękuję za instrukcję <3 Jest po prostu świetna!
    Skorzystałam :D
    Pozdrawiam cię Tyler <3

    OdpowiedzUsuń
  13. super instrukcja!
    jednak mam pytanie, jak to poszerzyć?
    chyba wiesz o co mi chodzi. :)

    OdpowiedzUsuń

- +
Szablon wykonany przez Tyler