piątek, 13 listopada 2015

Instrukcja na menu + ...no właśnie, czyli pierwsze koty za płoty!


           Hej! Mam na imię Lena i właśnie dołączyłam do załogi "Zatracone instrukcje". Jestem z tego mega dumna i mam nadzieję, że spełnię wasze oczekiwania. Jeśli czegoś byście nie zrozumieli pytajcie. Na pewno pomogę!
Grafiką interesują się od mniej więcej roku i postanowiłam spróbować na zatraconych..Może się uda! :D
           Dzisiaj przygotowałam dla was instrukcję na fajne menu, jak na zdjęciu poniżej.




Nie pamiętam już skąd ją "umiem". Po prostu nie wiem. Zacznijmy od początku! Wchodzimy w swój blog > układ > dodaj gadżet > HTML/JavaScript i wklejamy następujący kod. Będzie on odpowiadał za nasze strony.

<a class='kim' href=http://zatracone-instrukcje.blogspot.com/>Instrukcje</a> 

Czerwony- tutaj możemy wpisać co chcemy, tylko później musimy pamiętać, żeby w następnym kodzie wpisać to samo.
Żółty- link , do konkretnej strony.
Zielony-nazwa strony.

Teraz wchodzimy w szablon>dostosuj>zaawansowane>dodaj arkusz css i wklejamy następujący kod:

#HTML1 {width: 80px;margin: 20px 0px 0px -145px;position: absolute;}a.kim:link, a.kim:active, a.kim:visited {display: inline-block;width: 100px;margin: 0px 0px 2px 135px;text-align: left;font-family: times new roman;font-style: italic;color: #000;border-left: 15px solid #dce1e7;padding-left: 10px;}
a.kim:hover {border-left: 45px solid #741b47;text-decoration: none;-webkit-transition-duration: 1s;-moz-transition-duration: 1s;}
Pomarańczowy- czyli, najprostszym językiem numer gadżetu, sprawdza się je wchodząc w układ.Jest opisane na zdjęciu.

 

Niebieski- czyli nasza szerokość kart.
Bordowy-położenie stron.
Turkusowy-czyli  jest tak jakby ruchomy. Oznacza to , że przewija się wraz z przewijaną stroną.Mam nadzieję, że rozumiecie.
Czerwony-to jest właśnie te słowo , które wklejaliśmy do Html'u.
Szary- po prostu to jest po to, "żeby się zmieniało".
Brązowy-położenie tekstu czy ma być na środku czy do lewej, prawej.
Różowy-czcionka.
Jasny fioletowy- styl czcionki, np. pochyła.
Żółty-to jest nasz kwadracik z lewej.Można zmieniać wartość w px i kolory.
Jasny pomarańcz- odstęp między kwadracikiem a nazwą strony.
Zielony- po najechaniu w linku nie ma podkreślenia.
Granatowy-efekty po najechaniu , aby się zmieniało i powracało do stanu pierwotnego.

EDIT.: Tej instrukcji można jedynie używać kiedy kwadraciki są po lewej stronie, po prawej nie działa.

I jeszcze jedna instrukcja też na karty podobna.







Jak za pierwszą instrukcją do HTML/JavaScript wklejamy ten sam kod a następnie wchodzimy w dodaj arkusz css.
Kod to: 


#HTML1 {width: 80px;margin: 6px 0px 0px -75px;}
a.kim:link, a.kim:active, a.kim:visited {display: inline-block;width: 100px;margin: 0px 0px 2px 135px;text-align: right;font-family: times new roman;font-style: italic;color: #000;border-right: 15px solid #dce1e7;padding-right:5px;}
a.kim:hover {border-right: 15px solid #b2d4a2;text-decoration: none;}

Tutaj już nie będę podkreślać, bo wszystko jest takie same jak w poprzedniej instrukcji.

Myślę, że instrukcja jest przydatna i kiedys ją wykorzystacie, a tymczasem do zobaczenia!

EDIT.: 14.11: Mam pytanie do administratorek. Czy mogę dodawać instrukcje, czy na razie  muszę ograniczyć się do tej na okres próbny?



Pozdrawiam xoxo.

4 komentarze:

  1. Widziałam parę razy ten efekt i nigdy nie zastanawiałam się, jak jest tworzony. Cóż, teraz wiem :)

    OdpowiedzUsuń
  2. Bardzo fajnie wyjaśniona instrukcja i ładny efekt. :)
    Miło mi powitać w załodze. ;d

    OdpowiedzUsuń
  3. Dziękuję, z pewnosścią się przyda!

    OdpowiedzUsuń
    Odpowiedzi
    1. Dziękuję za miłe słowa oraz takie same powitanie! :*

      Usuń