Pobierz szablon, rozpakuj go i dodaj na swojego bloga.

Wysuwane linki w menu

Edytuj post
Dzisiaj chciałabym wam przedstawić trzy nieco różniące się efekty na wysuwane link w menu. Przykład poniżej.
Na początek przypatrzmy się dokładniej widgetowi .PageList, w którym będziemy chcieli zastosować nasz trik. Jak każda ramka na blogspocie, tak i ogólny zarys .PageList wygląda następująco: <div class="widget PageList" id="PageList1">
<h2></h2>
<div class="widget-content">
</div>
</div>

Dodatkowo w skład .widget-content wchodzi lista, której składania wygląda mniej więcej tak:
<ul>
<li><a href="">Link 1</a></li>
<li><a href="">Link 2</a></li>
<li><a href="">Link 3</a></li>
</ul>
I to właśnie listą zajmiemy się do uzyskania naszego efektu. Jednak zanim zabierzemy się do dodawania kodu, upewnijmy się, że nasze menu z stronami będzie znajdowało się nad kolumnami bloga, a nie w jednej z nich. Dzięki temu linki już na samym początku będą ustawione obok siebie, a nie jeden pod drugim.

Ponownie wykorzystamy fakt, że a jest zagnieżdżone w li (pudełko włożone do pudełka). Tym razem jednak zewnętrzne pudełko li będzie robiło za swojego rodzaju ogrodzenie, tak aby nasz efekt nie przesuwał innych elementów. Dodajmy zatem css: .PageList li {
height:70px;
}
Dokładne ustalenie height sprawia, że li staje się ograniczeniem do jakiej wysokości może nam się zmieniać a. Teraz możemy już wdrażać nasz ruchomy efekt. Na początek dodajmy jakiś ładny i prosty css odpowiadający za wygląd a.
.PageList li a{
width:100px;
display: block;
background-color: #444;
font-size: 12px;
text-align:center;
}
Jak zawsze za interakcję w cssie odpowiada nam pseudo selektor :hover, a właściwość, którą będziemy przy jego pomocy zmieniać to padding. Zapiszmy zatem odpowiednie wartości dla padding zarówno dla wyglądu początkowego jak i tego osiągniętego przy pomocy :hover. .PageList li a {
padding: 5px;
transition:0.5s;
}
Oczywiście właściwość transition odpowiada za efekt animacji. A teraz linijki kodu css odpowiadające za kolejne efekty:
Efekt 1
.PageList li a:hover {
padding-bottom:40px;
}
Efekt 2
.PageList li a:hover {
padding-top:40px;
}
Efekt 3
.PageList li a:hover {
padding-top:20px;
padding-bottom:20px;
}
Mam nadzieję, że wszystko wytłumaczyłam jasno i klarownie. Wszelakie pytania zamieszczajcie w komentarzach.

3 komentarze

  1. A ja mam pytanie, wiem, że kiedyś była możliwość automatycznego zawijania postów na stronie głównej (tak żeby wszystkie posty na blogu były z funkcją "czytaj dalej" wiem, że można,to było zrobić w HTML,ale nie jestem pewna, wiesz może jak to zrobić?

    OdpowiedzUsuń
    Odpowiedzi
    1. Być może chodzi ci o coś takiego jak tutaj. Jednak jeżeli myślisz o czymś takim, gdzie automatycznie po dodaniu postu, ten jest skracany do pewnej ilości słów, to tak jak w powyższym przykładzie, jest za to odpowiedzialny javascript, a nie html. Nie znam innej 'html'owej' możliwości niż manualne dodawanie czytaj dalej w poście.

      Także napisz mi proszę czy miałaś na myśli którąś z powyższych opcji, czy jeszcze coś innego. Postaram się coś na ten temat poradzić.

      Usuń
  2. Ja też mam pytanie.
    Rozwija mi się cały pasek menu, a chciałabym, żeby wysuwały się tylko strony.
    Da się to zrobić?
    Jeśli tak - wiesz jak?

    OdpowiedzUsuń

© Agata | WS | x.