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.
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ń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.
Usuń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ć.
Ja też mam pytanie.
OdpowiedzUsuń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?