30 października 2013

Instrukcja: Jak zrobić graficzne menu z efektem wznoszenia się?

Hej! Przed chwilą dowiedziałam się, że jeszcze dzisiaj wyjeżdżam do rodziny i wracam w piątek lub sobotę. Przez ten czas będę miała dostęp do bloga tylko w telefonie, więc postaram się przygotować później kilka postów na zaś, które opublikują się automatycznie. Dziś mam dla Was instrukcję, tym razem graficzną (przy odrobinie chęci Paint wystarczy) - jak zrobić graficzne menu z efektem wznoszenia się. Jest to rodzaj menu, w którym po najechaniu myszką na daną nazwę (czy też obrazek) w jej miejsce "wjeżdża" od góry inna nazwa (obrazek, grafika, cokolwiek - zależne od Was). Jesteście zainteresowani? To zapraszam do poczytania instrukcji (i przetestowania na swoim blogu) :)

CZĘŚĆ PIERWSZA


Potrzebujemy obrazka, który będzie się składał z dwóch równych części. Wymiary obrazka są dowolne, ważne jest jednak aby obydwie części były tej samej wielkości/szerokości/długości i tekst umieszczony był równo, bo inaczej będzie "wjeżdżał" w inne miejsce.  



Ja dla przykładu przygotowałam obrazek o wymiarach 200x100 pikseli. W części A umieściłam pajączka, który jest widoczny dopiero po najechaniu myszką. Część B to część widoczna wtedy, gdy nie ma kontaktu z myszką. Mam nadzieję, że rozumiecie o co mi chodzi, jeśli nie to zobaczycie to w efekcie końcowym.


Przygotowany przez Was obrazek zapisujecie w formacie .jpg (w przypadku Painta będzie to .png, gdyż Paint niszczy jakość w formacie .jpg).

Zapisany obrazek należy zalinkować, czyli zrobić tak, aby miał adres URL. Ja używam do tego celu imageshack.us , ale Wy możecie wybrać dowolną stronę. Tutaj macie wideo-instrukcję jak zalinkować obrazek na podanym przeze mnie serwerze - KLIK. Kiedy już Was obrazek będzie zalinkowany to kopiujecie BEZPOŚREDNI link. Będzie potrzebny do dalszej części instrukcji.

CZĘŚĆ DRUGA

- CSS - jeden błąd może zaważyć o całości, więc trzeba się dobrze skupić, a nie będzie problemu

Nie będę pisać skąd się co wzięło tylko po prostu wstawiam Wam praktycznie gotowy kod. Będziecie w nim dokonywać jedynie drobnych zmian - tak, aby dopasować go do Waszego bloga.

Są dwie opcje - menu poziome (tak jak na moim blogu) lub pionowe (w pasku bocznym). Kod różni się tylko jednym słowem, ale żebyście się nie pomylili to wklejam kod dwa razy - z wyraźnym zaznaczeniem, który jest do którego.

I. MENU POZIOME

.twojanazwa {
display: inline-block;
float: left;
width: 200px; /* szerokość obrazka */
height: 50px; /* wysokość jednej części obrazka */
background: url('bezpośrednilinkdoobrazka') bottom;
text-indent: -99999px;
margin-right: 5px; /* odstęp między poszczególnymi elementami menu */
}

.twojanazwa:hover {
background-position: 0 0;
}

II. MENU PIONOWE

.twojanazwa {
display: block;
float: left;
width: 200px; /* szerokość obrazka */
height: 50px; /* wysokość jednej części obrazka */
background: url('bezpośrednilinkdoobrazka') bottom;
text-indent: -99999px;
margin-right: 5px; /* odstęp pomiędzy poszczególnymi elementami menu */
}

.twojanazwa:hover {
background-position: 0 0;
}


Objaśnienia:

.twojanazwa - wpisz tutaj nazwę zakładki menu, którą definiujesz, BEZ POLSKICH ZNAKÓW, np.: .omnie , .wspolpraca , .inne itp. Ważna jest kropka na początku. To samo słowo wpisujemy w obydwu zaznaczonych miejscach. 
szerokość obrazka - podajemy ją w pikselach, w moim przypadku jest to 200px

wysokość jednej części obrazka - jeżeli obrazek w całości ma wysokość 100 px to wpisujemy 50 px, drugie 50 px będzie widoczne po najechaniu na obrazek myszką
bezpośrednilinkdoobrazka - wklejamy tam przygotowany wcześniej link do obrazka, musi znajdować się pomiędzy znakami:  ' ' ,  bez spacji.

odstęp pomiędzy poszczególnymi elementami menu
- jeżeli chcecie żeby zakładki przylegały do siebie to zamiast 5 wpisujecie 0 lub -1 :)

Gotowy kod wstawiamy na bloga jako arkusz CSS (Szablon -> Dostosuj -> Zastosuj -> Dodaj arkusz CSS).



CZĘŚĆ TRZECIA

- HTML - część najłatwiejsza

Dodajemy nowy gadżet html/java i wstawiamy tam kod:

<a class="twojanazwa" href="adres odnośnika">Tytuł linku (nie będzie widoczny) </a>

Objaśnienia:
twojanazwa - musi być identyczna jak ta wpisana w CSS, tym razem bez kropki

adres odnośnika - po prostu adres strony, na którą ma nas przenosić po kilknięciu

Zapisujemy i przeciągamy gadżet w wybrane miejsce. I gotowe :)


EFEKT:





To jest instrukcja na dodanie jednej zakładki menu. Jeżeli chcecie mieć więcej zakładek to po prostu wykonujecie te czynności tyle razy ile potrzeba Wam zakładek. Należy pamiętać, że każda zakładka musi mieć inną nazwę w CSS (i analogicznie w HTML - zgodnie z CSS).  

Mam nadzieję, że wytłumaczyłam to dość zrozumiale. W razie jakikolwiek niejasności dopytujcie w komentarzach lub emailowo. 

Idę teraz się wykąpać, a potem malować paznokcie. Później postaram się przygotować kilka postów na najbliższe dni, w których będę częściowo nieobecna w blogosferze.

Dajcie znać jak wyszło Wam menu z instrukcji! :)




61 komentarzy

  1. Odpowiedzi
    1. Zrobiłabym sobie to, ale napisy chciałabym w takiej czcionce, jak zrobiłaś mi w nagłówku ;p Powiedziałabyś mi jak nazywa się ta czcionka? Odp u mnie jak możesz ; D

      Usuń
    2. Napisze Ci jak będę w domu, bo teraz nie mam dostępu do "moich" czcionek :P

      Usuń
  2. Czytam 3 raz i dalej nie wiem co tu jest napisane :D
    MATRIX :D

    OdpowiedzUsuń
  3. Ja jestem na to za tępa, a coraz bardziej podoba mi się u innych dziewczyn menu z kategoriami itp...w które wystarczy kliknąć by pokazały się posty z daną etykietą...Jak takie cuś zrobić?

    OdpowiedzUsuń
    Odpowiedzi
    1. Tak jak w instrukcji :D a co do etykiet to dodajesz taki gadżet na bloga, a potem dopisujesz etykiety do każdego posta :P

      Usuń
  4. może przy następnej zmianie wyglądu bloga zrobię coś w tym stylu ;D

    OdpowiedzUsuń
  5. O wow! Wygląda to genialnie :) Ale dla mnie czarna magia ;P

    OdpowiedzUsuń
  6. podziwiam Cię, że to wszystko ogarniasz !

    OdpowiedzUsuń
  7. mimo, że Twoja instrukcja jest prosta nawet nie będę starała sie tego ogarnąć, bo jeszcze coś pomylę

    OdpowiedzUsuń
    Odpowiedzi
    1. tu nie ma co pomylić, wystarczy robić krok po kroku :P

      Usuń
  8. Świetna instrukcja, może wykorzystam ją przy nowym szablonie :)

    Ps. Halloweenowy szablon jest świetny!

    OdpowiedzUsuń
  9. Jesteś genialna !! Zabieram się dzisiaj po południu za mój szablon :) ;*

    OdpowiedzUsuń
  10. Bardzo fajna, czytelna instrukcja ;)

    OdpowiedzUsuń
  11. Wygląda genialnie! Będę musiała kiedyś pobawić się z takimi zaawansowanymi efektami. Świetny tutorial :)

    OdpowiedzUsuń
  12. Bardzo przydatne informacje. Aktualnie jestem na etapie zmian na blogu więc może przyda mi się Twój post :)

    Zapraszam do mnie, www.modjus.pl

    OdpowiedzUsuń
  13. Skąd Ty wiesz takie rzeczy? Jak ja Ci zazdroszczę :) Właśnie planuję zmienić sobie nagłówek i już mi się czoło marszczy, bo wiem, że chwilę mi to zajmie :)

    Dzięki za tutka :D

    OdpowiedzUsuń
    Odpowiedzi
    1. głównie z zagranicznych stron i blogów :P

      Usuń
  14. jestes wybawieniem dla osob ktore na takich rzeczach sie nie znaja :) czyli dla mnie :D

    OdpowiedzUsuń
  15. Czytałam kilka razy i nie wiem o co chodzi :P Ale ja człowiek tępy xD

    OdpowiedzUsuń
    Odpowiedzi
    1. ee dałabyś radę to zrobić :P

      Usuń
    2. Może pokombinuje coś, ale nie teraz :P

      Usuń
  16. Kiedyś na pewno spróbuję takie zrobić :) Wydaje mi się, że wszystko jest jasne i klarowne :) Doszła może paczuszka ?

    OdpowiedzUsuń
    Odpowiedzi
    1. jeszcze nie doszła, pewnie dzisiaj będzie :) ale ja i tak ją zobaczę dopiero w jutro wieczorem lub w sobotę, bo obecnie jestem 100 parę km od domu :P

      Usuń
  17. uwielbiam Cię za te dobre rady :D

    OdpowiedzUsuń
    Odpowiedzi
    1. a ja Ciebie za te wszystkie przepisy, które się zawsze udają :P

      Usuń
  18. dlaczego nie poszłaś na informatykę? :D jesteś moj guru :D really :)

    OdpowiedzUsuń
    Odpowiedzi
    1. a zastanawiałam się trochę nad tym :D a potem stwierdziłam, że i tak się nie dostanę :D

      Usuń
  19. Matko kochana... Podziel się ze mną tymi zdolnościami :D Bo ja pomimo Twojego postu i tak nie ogarniam tego xD.

    OdpowiedzUsuń
    Odpowiedzi
    1. to nie jest trudne, dałabyś radę :P

      Usuń
  20. Ooo super :D Może pokombinuję przy większej ilości czasu :D

    OdpowiedzUsuń
  21. fajna instrukcja, pewnie przyda się w przyszłości bo fajnie to wygląda ;)

    zajrzyj do nas ;)
    pozdrawiam, martyna z PLDesign

    OdpowiedzUsuń
  22. właśnie miałam zamiar w wolnej chwili poszukać takich info żeby zrobić to u siebie, a tu proszę ....jest:)dzieki:)

    OdpowiedzUsuń
    Odpowiedzi
    1. o to super trafiłam z tą instrukcją :P

      Usuń
  23. Świetnie, że dodałaś taką instrukcję, jeśli tylko będę robić takie menu na pewno z niej skorzystam ;)

    OdpowiedzUsuń
  24. przy następnym wyglądzie z większa ilością czasu coś pewnie pokombinuję :) Ale nie wiem czy mi wyjdzie, sądząc po tym jak nie poradziłam sobie z datą :P

    OdpowiedzUsuń
    Odpowiedzi
    1. przy dacie było trochę ingerencji w html :P a tu tylko dodawanie CSS, więc nie ma co zepsuć :P

      Usuń
  25. Świetny pomysł. Na pewno kiedyś wypróbuję. Dzięki :)

    OdpowiedzUsuń
  26. Jeszcze nie próbowałam, ale dobrze wiedzieć na przyszłość, bo ja to mało obeznana w tym temacie jestem :D

    OdpowiedzUsuń
    Odpowiedzi
    1. warto próbować i ćwiczyć :P praktyka czyni mistrza :P

      Usuń
  27. Świetna instrukcja, jednak zdam się na razie na umiejętności koleżanek, może kiedyś mi się uda zastosować. :)

    OdpowiedzUsuń
  28. Ty to jesteś zajebista pod względem zmiany wyglądu bloga! Raz jeszcze dziękuję za pomoc!

    OdpowiedzUsuń

Jeśli masz jakieś pytanie - pisz śmiało, odpowiem pod Twoim komentarzem :)

Staram się odwiedzać wszystkich komentujących. Możesz zostawić w komentarzu adres swojego bloga - będzie mi łatwiej na niego trafić :)

Related Posts Plugin for WordPress, Blogger...