wtorek, 30 kwietnia 2013

Menu w gadżecie HTML/JavaScript

Element: Linki
Stopień trudności: xxxx
Czas wykonywania: <10 minut
Myślę, że wśród Was znajdzie się wiele osób, które - może nie tyle znają zapis linku w HTML'u - co może kiedyś się z nim spotkały i wiedzą jak to w ogóle wygląda. Jak wiemy w jaki sposób się nim posługiwać, dla przeróżnych linków możemy zwyczajnie tworzyć cuda - jeden niebieski, drugi zielony, a trzeci różowy i to wszystko w tym samym menu!

Jak zwykle odrobinka anatomii języka HTML; co z tego że w bardzo podstawowej odsłonie.
<a href="http://graphical-thoughts.blogspot.com/">Graphical Thoughts</a>
Do tworzenia odnośnika używa się paremetru <a>. Jako jego parametr href podaje się adres pliku, który ma być wyświetlony po kliknięciu na link.

Gdy przyswoiliście wiedzę powyżej, w takim razie przed Wami jeszcze tylko 3/4 drogi do opanowania umiejętności przedstawianej w dzisiejszym poście! Lecimy dalej, krok 2. 

Krok drugi polegać będzie na dodaniu gadżetu HTML/JavaScript. Właściwie jest to chyba najłatwiejszy krok. Gdy już Wam się wszystko otworzy, skopiujcie link z góry do gadżetu, możecie go też powielić, co jest tak w sumie nawet wskazane. Po zaakceptowaniu gadżetu powinien on wyglądać na blogu mniej więcej tak. 

No cóż wygląda to mało zacnie i do ostatecznego efektu jeszcze połowa drogi, ale jednak ta część jest przełomowa.  

Aby jednak nasz link nie wyglądał jak zwykły, pospolity link, co zazwyczaj równa się ze zwykłą zmianą koloru musimy dodać do tego klasę, czyli po angielsku class. Pozostaje kwestia gdzie to zrobić, aby faktycznie zadziałało.

<a href="http://graphical-thoughts.blogspot.com/" class="nav">Tyler</a>
Ja moją klasę nazwałam "nav" od słowa nawigacja, na blogu używam też "aff", czasem także "box".

Aby dopełnić nasz efekt potrzebujemy nav w naszym kodzie. Co z tego, że my sobie wpiszemy w gadżet słówko nav, jak strona nie znajdzie w naszym kodzie takiego polecenia. 
a.nav:link, a.nav:active, a.nav:visited {display:inline-block; background:#f5f5f5; color: #666; width:88px; text-align:center; font-family:arial; font-size:8px;opacity:0.8;text-transform:uppercase; letter-spacing:2px; cursor:pointer; padding:3px; -webkit-transition-duration: .50s; margin-top:3px;} 
a.nav:hover {background:#333; color:#fff;opacity:1; -webkit-transition-duration: .50s;}
Pozwoliłam sobie zaznaczyć na czerwono dwie właściwości, które są kluczowe dla tego typu menu:
  • display: sposób wyświetlania elementu, czy będą w rzędzie w poziomie, czy może ustawimy je w pionie ( block - element będzie wyświetlony w bloku (odstęp z góry i z dołu) ; inline-block - element będzie wyświetlony w linii (sąsiadująco z innymi));
  • width: jest to szerokość naszego linku, zależy od Waszego pomysłu; pełni jednak dosyć ważną rolę, także nie zapominajcie o tym. 
Gdzie polecam wpisać kod? Myślę, że dobrze byłoby to wpisać pod wszystkimi naszymi komendami css albo nad.


Stworzyliśmy mniej więcej coś takiego. 

Oczywiście takich selektorów jak nav, aff, box, navi, box1, box2, nav2 możemy pisać całą masę i dawać tym samym linkom w gadżecie różne efekty np. 


W użytych powyżej linkach wykorzystałam trzy klasy, które wpisałam wcześniej do swojego kodu. Nie będzie żadnej różnicy, czy link z efektem wrzucicie do postu czy do gadżetu HTML/JavaScript. 

***
Mam nadzieję, że instrukcja okaże się użyteczna i z chęcią będziecie z niej korzystać. Jak będziecie mieć jakiś problem oczywiście jestem tutaj i w każdej chwili mogę Wam pomóc! 

8 komentarzy:

  1. Jesteś geniuszem. Dziękuję Ci bardzo za ten post. Jest bardzo pomocny. Właśnie takiego efektu potrzebowałam do nowego szablonu, który pojawi się w przyszłości. Super, wielkie dzięki ! :))

    OdpowiedzUsuń
  2. Świetnie to napisałaś:) Akurat wiem dobrze, o co chodzi (rozkminiłam te operacje w kodzie już dawno, zupełnie przypadkowo - znalazłam w kodzie strony selektor będący nickiem pewnej osoby zamiast standardowego:p) i dlatego w pełni mogę stwierdzić, że stanęłaś na wysokości zadania i świetnie sobie poradziłaś z wytłumaczeniem tego wszystkiego:) Przy okazji chciałam pochwalić prosty wygląd strony. Niby tak jasno, przejrzyście, bez zbędnych grafik, a cieszy oko:) Takich ludzi nam tutaj trzeba! :)
    Pozdrawiam <3

    OdpowiedzUsuń
  3. Ten cbox jest tak samo popularny jak takie menu w formie drzewa jak np. na Zaczarowanych Instrukcjach:p Wstawiłam go u siebie w ten sposób, bo nie chciałam, żeby zajmował zbyt dużo miejsca. Zależało mi na tym, by posty się wyróżniały, były główną treścią bloga, żeby ramki były małe i zajmowały dosłownie kawałeczek:p
    No przestań, za co miałabym być zła?;p
    Znam ten problem z wysłowieniem. Naprawdę się staram, by moje instrukcje były przejrzyste, żeby wszystko było jasne, krok po kroku. Niestety często i gęsto wciąż ktoś nie może ich zrozumieć:p

    Ojej, faktycznie pozmieniałaś ten szablon:p Ale muszę Ci tak szczerze powiedzieć, że tamten wygląd był chyba lepszy. Taki jednolity, zwarty. Ten też nie jest zły, ale tamten był perfekcyjny:p Nie wiem, czy mnie rozumiesz. Chodzi o to, że wszystko było w jednym bloku i to tak profesjonalnie wyglądało, wszystko się 'kupy' trzymało :3 Chyba nie umiem tłumaczyć ;x

    OdpowiedzUsuń
  4. Świetna instrukcja! Myślę, że w przyszłości na pewno z niej skorzystam, pokłony dla Ciebie! :3
    A szablon główny bloga powala.

    OdpowiedzUsuń
  5. Jak zrobić takie zakładki jak u ciebie na górze??? Ask.fm, propozycje itd ??

    OdpowiedzUsuń
  6. Powiedz mi jak zrobić tak by to były linki do stron na blogu?

    OdpowiedzUsuń
  7. Bardzo przydatna instrukcja ;)

    OdpowiedzUsuń

- +
Szablon wykonany przez Tyler