1# dyskretne menu [instrukcja]

Sama nie jestem fanką stron, które są niezbyt widoczne na blogu. Wiem jednak, że podczas tworzenia niektórych layoutów zastosowanie takiego tricku jest niezbędne, jeśli chcemy zachować estetykę.
Dlatego też jakiś czas temu opracowałam sposób na "dyskretne menu", którym dzisiaj się z wami bardzo chętnie podzielę. Efekt, który chcemy uzyskać jest widoczny poniżej.

Zaczynajmy!
W panelu bloga klikamy na szablon > dostosuj > zaawansowane > dodaj arkusz CSS, a później postępujemy zgodnie z poniższą instrukcją.

#PageList1 ul li {
list-style-type: none; /*kod konieczny do usunięcia stylu listy*/
display: inline-block; /*zablokowanie linków w jednej linijce*/
}
Ta część kodu jest konieczna, kiedy chcemy by menu (nawet umieszczone w kolumnie) było poziome. Możecie ją pominąć jeśli chcecie zdecydować się na menu pionowe. W dalszej części skupiamy się na kodach dla linków, które kryją się w naszej liście.

Zaczynamy od efektu, który jako pierwszy rzuci się w oczy naszych czytelników. Ukryjmy nasze linki pod kwadracikami i zacznijmy prace nad ich wyglądem.
#PageList1 a {
display: block; /*zablokowanie linków - nie zmieniamy*/
overflow: hidden;  /*usunięcie nadmiaru tekstu - nie zmieniamy*/
width:25px;
height: 10px;
padding-top: 5px;
padding-bottom: 10px;  /*dzięki temu i trzem powyższym możliwe jest ustalenie rozmiaru kwadracika*/
text-align: center; /*wyśrodkowanie tekstu*/
background: #88bf3a;  /*kolor kwadracika*/
color: transparent; /*przezroczystość koloru tekstu*/
font-size: 12px;  /*wielkość czcionki*/
transition: 1s; /*czas animacji*/
}
Żeby linki po rozsunięciu ładnie się prezentowały, nie możemy zapomnieć o odpowiednim stworzeniu kwadracika.  Żeby to zrobić należy posiłkować się równaniem:
width = height + padding-top + padding-bottom


#PageList1 a:hover {
width: 200px; /*długość linka po najechaniu kursorem*/
color: white; /*kolor tekstu po najechaniu kursorem*/
transition: 1s; /*czas animacji*/
}
Nic trudnego, prawda?

gotowce

Dla leniwych przygotowałam gotowe kody, które można po prostu skopiować i wkleić do arkusza CSS. Ewolucje są najróżniejsze. Mam nadzieję, że Wam się przydadzą i będą dla Was inspiracją.

 
***
Mam szczerą nadzieję, że post przypadł Wam do gustu i skorzystacie z mojej instrukcji. Pamiętajcie o zapoznaniu się z zasadami. :)

© Paletton, itsAustinJordan

15 komentarzy:

  1. Jejku, czadzik! Uwielbiam takie menu, ale nigdy nie potrafię czegoś takiego zrobić, dlatego jestem pewna, że w przyszłości skorzystam z gotowców :))

    OdpowiedzUsuń
    Odpowiedzi
    1. Polecam eksperymentować! Nawet z gotowcami. :D

      Usuń
  2. Jezuuu! Ale to jest genialne! <3 Boże tak Ci dziękuję, że istnieje ktoś taki jak ZK *O* Kocham Cię dziewczyno <3

    OdpowiedzUsuń
    Odpowiedzi
    1. Też dużo miłości do Ciebie. <3
      Dziękuję!

      Usuń
  3. Ciekawy kod bez bawienia się z Java/script. :3 Java mnie zawsze denerwuje zwłaszcza przy instalowaniu moich starych szablonów. Tą "zabawę" zawsze nazywam "znikające linki". Wciąż w kółko pisać to samo przyprawia mnie o mdłości, ale cóż. Blogger żyje swoim prawami.
    Pozdrawiam i miłego kodowania!
    MrsLogan Everlasting Wishes

    OdpowiedzUsuń
    Odpowiedzi
    1. Pomijając, że to troszkę irytujące - warto podkreślić, że mi nie zawsze javascript i jquery na bloggerze działają. Jakby ten nie ogarniał sporej części kodów. >.>

      Usuń
  4. OMG! To jest super! Dziękuję ♥

    OdpowiedzUsuń
  5. OMG! To jest super! Dziękuję ♥

    OdpowiedzUsuń

statystyka

Archiwum bloga

Obserwatorzy