Na głównym szablonie Wioski obok jej nazwy widnieją trzy kwadraciki, po najechaniu których wysuwa się z góry krótka informacja tekstowa. Tym razem chciałabym wam pokazać jak wykonać dokładnie w takimi stylu minimalistyczne menu, o takie jak poniżej.
Całe menu należy wstawić do widgetu HTML/JavaScript.
Ale zanim do tego dojdziemy, najpierw stwórzmy div, w którym będzie się mieściło nasze menu.
<div class="pudelko"><div>
I nadamy mu odpowiedni css. Nie zapomnijmy przy tym, aby zostawić wokół menu trochę miejsca na animację oraz wyśrodkować wewnętrznych elementów.
.pudelko{
padding:50px 10px 10px;
text-align:center;
font:normal normal 8px Verdana;
letter-spacing:2px;
text-transform:uppercase;
}
Teraz możemy się już zając tym, co jest w środku. Na początek stwórzmy kolejne divy, w których umieścimy nasze linki z menu. Nadajmy divom zarówno tę samą klasę jak i indywidualne id. Nasz kod html powinien wyglądać mniej więcej tak:
<div class="pudelko">
<div class="kwadracik" id="k1"></div>
<div class="kwadracik" id="k2"></div>
<div class="kwadracik" id="k3"></div>
<div class="kwadracik" id="k4"></div>
</div>
Teraz zajmijmy się stworzeniem naszych kolorowych kwadracików przy pomocy pseudoklasy
:before.
.kwadracik:before{
content:"";
width:9px;
height:9px;
display:block;
}
Dodajmy już od razu koloy dla poszczególnych kwadracików. W tym pomoże nam indywidualne id, które wcześniej dopisaliśmy do każdego z divów.
#k1:before {background-color:greenyellow;}
#k2:before {background-color:tomato;}
#k3:before {background-color:turquoise;}
#k4:before {background-color:plum;}
Powyższy kod daje nam coś takiego jak poniżej:
Aby nasze kwadraciki wyświetlały się w jednej linii musimy dodać odpowiednią wartość dla właściwości
display w selektorze
.kwadracik.
.kwadracik{
display:inline-block;
position:relative;
}
Teraz włóżmy do naszych divów z kolorowymi kwadracikami linki będące naszym menu i jednocześnie elementem, który będziemy animować.
<div class="pudelko">
<div class="kwadracik" id="k1">
<a href="http://wioskaszablonow.blogspot.com/">Strona główna</a></div>
<div class="kwadracik" id="k2">
<a href="http://wioskaszablonow.blogspot.com/">Autor</a></div>
<div class="kwadracik" id="k3">
<a href="http://wioskaszablonow.blogspot.com/">Blog</a></div>
<div class="kwadracik" id="k4">
<a href="http://wioskaszablonow.blogspot.com/">Szablon</a></div>
</div>
Od razu też dodajmy odpowiedni css dla elemeny
a, gdzie najważniejszą częścią jest właściwość
position, której musimy nadać wartość
absolute. Ważne jest także nadanie elementowi odpowiedniej szerokości, aby nasz wiersz się nie zawijał.
.kwadracik a {
width:100px;
display:block;
position:absolute;
top:-40px;
left:0
transition:.3s;
opacity:0;
visibility:hidden;
padding:0 0 5px 5px;
}
Właściwość
top należy dopasować indywidualnie w zależności od zastosowanego rodzaju czcionki i jej wielkości oraz ilości tekstu.
Natomiast aby zapoznać się z znaczeniem właściwości
visibility i
opacity w tym przykładzie zapraszam do przeczytania instrukcji odnoścnie
wypływania elementu. Tam cały efekt został dokładnie zaanalizowany.
Powróćmy teraz do naszego menu. Jedyne co nam pozostało, to dodać właściwy kod przy pseudoklasie
:hover, dzięki czemu po najechaniu kursorem na kwadracik, pokaże nam się nasz link.
.kwadracik:hover a {
opacity:1;
visibility:visible;
top:-15px;
}
Prawie zapomniałabym o dodaniu po lewej stronie naszego linku obramowania w kolorze kwadracika. Robimy to w sposób analogiczny do tego, w jaki kwadraciki otrzymały swój kolor - dzięki nadanym divom indywidualnym id.
#k1 a{ border-left:1px solid greenyellow;}
#k2 a{ border-left:1px solid tomato;}
#k3 a{ border-left:1px solid turquoise;}
#k4 a{ border-left:1px solid plum;}
To byłoby na tyle. Mam nadzieję, że instrukcja była dla was przydatna.
Bardzo przydatna instrukcja :) w niedalekiej przyszłości skorzystam, oczywiście podam credit ;)
OdpowiedzUsuń+ w kodzie na ustawienie kwadracików w jednej lini zamiast "kwadraciki" powinno być chyba "kwadracik" :)
UsuńRacja! Już poprawiłam. Widać, że przy końcówce moja spostrzegawczość nieco spadła. ;)
UsuńPiekna grafika
OdpowiedzUsuńZapraszam do mnie szukam osoby do pomocy lub pare osub : http://graphicnina-grafika.blogspot.co.uk/
Osób a nie 'osub'. Warto zapamiętać. ;)
UsuńBardzo fajny efekt. :3 Użyłam go do mojego szablonu, ale oczywiście dodam credit. Czym właściwie różni się :hover a od a:hover? Aha i czy czasem kody w java script mają prawo tak sobie zniknąć z szablonu? Czasem mi znikał znak wodny albo strony (w zależnośći co miałam) i nie było go widać na blogach, zwłaszcza jak to jest wolny szablon i ktoś go użył i czy lepiej właśnie pisać javascript czy używać widżgetów przy robieniu szablonu?
OdpowiedzUsuńCzym różni się :hover a od a:hover? W pierwszym przypadku animujemy coś, w czym znajduje się link. Czyli, żeby link np. zmienił kolor, wystarczy tylko najechać na div, w którym się a znajduje. A:hover animuje link dopiero po najechaniu na niego. Różnica jest najlepiej widoczna, kiedy chcemy, aby nasz link się pojawiał i znikał. Jeżeli ustawimy dla linku display:none, zostanie on całkowicie usunięty i nie bd można na niego najechać myszką, by nam się wyświetlił. Ale jeżeli wyświetlenie dodamy poprzez :hover a, to wystarczy jakoś wyróżnić div, w którym znajduje się link, tak aby widocznym było, że po najechaniu na akurat ten div coś się stanie, tu: pojawi się link przez dodanie display:block. Mam nadzieję, że teraz już jest jasne jaka jest różnica pomiędzy tymi dwoma określeniami.
UsuńKażdy element/kod dodany do ramki HTML/JavaScript będzie się wyświetlał wyłącznie na blogu, na którym został dodany. Nie ma szans, żeby się przeniósł wraz z kodem, bo ten zapisuje wygląd i rozmieszczenie ramek na blogu, ale nie treść tych ramek. Gdyby tak było, przy zapisywaniu szablonu, mogłoby się też zapisać treści postów, podstron itd.
Jeżeli chcesz umieścić jakiś element na trwałe w szablonie, tak jak choćby w tym szablonie jest umieszczony kredyt (na samym dole), to musisz to zrobić w kodzie lub właśnie opisać widgety typowe dla blogger np. .PageList .Label itd.
Bo jeżeli pisałaś w kodzie w języku skryptu javascript, to nic zniknąć nie powinno.
Trochę się rozpisałam, ale mam nadzieję, że pomogłam.
I jeszcze do tego :hover i a:hover następujący schemat.
Usuń:hover - jestem na pudełku i zmieniam pudełko
:hover a - jestem na pudełku ale zmieniam link
a:hover jestem na linku i zmieniam link
Dziękuję. :3
UsuńZawsze używałam tylko widżetów i css bez HTML/java i trochę będzie mi się ciężko tego nauczyć, jeśli chcę by moje szablony wyglądały na dobre.
UsuńAle chyba właśnie napisałam, że to widgetów i css powinno się używać. :D Już nie ogarniam.
UsuńTak wiem, ale w twoich instrukcjach zawsze używasz html/java i css a nie wiem czy można te twoje instrukcje zastosować na zwykłych widżetach.
UsuńUżywam htmla, ponieważ o wiele łatwiej jest coś na nim wytłumaczyć niż na widgecie np. .PageList, który składa się z listy i którą najpierw należy odpowiedni przygotować np. usunąć paddingi, marginy, wypunktowania. Jeżeli ktoś chciałby takie menu na własny użytek tylko, to o wiele łatwiej będzie mu je wstawi do HTML/JavaScript niż opisywać cssem .PageList. Niemniej każdą z napisanych przeze mnie instrukcji da się bez przeszkód zastosować do widgetów bloggera (tak jak było w przypadku wypływania elementu).
UsuńJeżeli chcesz, mogę też w tym przypadku również przygotować instrukcję, jak wcielić powyższy efekt dla .PageList.
Robię przyjaciółce takie menu, jednak niestety nie chce działać animacja
OdpowiedzUsuńWiesz może co jest przyczyną?
Proszę o możliwie szybką odpowiedź i pozdrawiam ;)
HTML, jest zapisany jak u Ciebie, jednak z innym linkiem ;)
Treść CSS:
.pudelko{ padding:50px 10px 10px;
text-align:center;
font:normal normal 8px Verdana;
letter-spacing:2px;
text-transform:uppercase;
}
.kwadracik:before{
content:"";
width:9px;
height:9px;
display:block;
}
#k1:before {
background-color: #99FF9B;
}
#k2:before {
background-color: #CE9AFF;
}
#k3:before {
background-color: #98FFFE;
}
#k4:before {
background-color: #FDFDCB;
}
.kwadracik{
display:inline-block;
position:relative;
}
.kwadracik a {
width:100px;
display:block;
position:absolute;
top:-40px;
left:0
transition:.3s;
opacity:0;
visibility:hidden;
padding:0 0 5px 5px;
}
.kwadracik:hover a {
opacity:1; visibility:visible; top:-15px;
}
#k1 a {
border-left:1px solid #99FF9B;
}
#k2 a {
border-left:1px solid #CE9AFF;
}
#k3 a {
border-left:1px solid #98FFFE;
}
#k4 a {
border-left:1px solid #FDFDCB;
}
Po left:0 nie masz ; przez co nie działa również następne polecenie transition:.3s. Pisać kod należy naprawdę ostrożnie, bo przez pominięcie średnika albo złe domknięcie klamry wszystko może się popsuć.
UsuńNie wiesz może, jak dodać szablon na dropboxa tak by działał jak na bloggerze (efekty po najechaniu itp)? Jeśli tak to czy mogłabyś dodać właśnie takie poradnik? Nie raz chciałam pokazać szablon na żywo, zwłaszcza kiedy potrzeba była na nabór do jakiejś szabloniarni, a tworzenie kolejnego bloga na pokazywanie itp... aż nwm na którym próbnym blogu tworzę, a na którym tylko je pokazuję.
OdpowiedzUsuńBierzesz blog z szablonem, przy pomocy ctrl + u przechodzisz do kodu źródłowego, kopiujesz go i wklejasz do notatnika. Zapisujesz jako nazwa.html, kodowanie zmieniasz na UTF-8. Zapisujesz plik notatnika na dropboxie. Prawym przyciskiem myszy kliknij na plik, z menu wybierz 'udostępnij łącze do dropboxa'. Automatycznie skopiuje się link. Teraz wklej go w pasek adresu w przeglądarce i zmień w nim www na dl, naciśnij enter i koniec. Powinien pojawić się szablon.
UsuńPozostaje taki problem, że linki w takim szablonie wciąż są aktywne i przenoszą do bloga, skąd został wzięty szablon (chyba, że się ogólnie zablokuje dostęp do bloga). Ale z tego co wiem, Hellen Dunst (http://manvspixel.blogspot.com/) ma jakiś sposób, żeby te linki zablokować, więc napisz też do niej w tej sprawie.
Sposób działa, tylko, że czcionki na tym podglądzie nie działają. Czcionki są wzięte z google fonts i nawet je instalowałam w HTML.
UsuńA to dziwne, bo mnie te z google fonts działały, ale podgląd nie ogarniał tych dodanych przez projektanta. :)
UsuńGenialna instrukcja Agata!
OdpowiedzUsuńJestem pod wielkim wrażeniem. Bardzo ciekawie prezentuje się treść, więc na pewno skorzystam z tak cennej instrukcji ;) oczywiście pochwalę się, skąd znam taki ciekawy efekt :)
Pozdrawiam serdecznie!
Natx z lost souls :D
Agato... mam problem z tym menu ;-; nie wiem, co źle zrobiłam. Może pokażę ci i HTML i CSS, jaki zrobiłam z pomocą twojego tutka:
UsuńCSS:
.pudelko{ padding:50px 10px 10px;
text-align:center;
font:normal 8px Verdana;
letter-spacing:2px;
text-transform:uppercase;
z-index:10!important;
}
.kwadracik:before{
content:"";
width:9px;
height:9px;
display:block;
}
#k1:before {background-color:white;}
#k2:before {background-color:#D9D9D9;}
#k3:before {background-color:darkgray;}
#k4:before {background-color:gray;}
#k5:before {background-color:#3C3C3C;}
#k6:before {background-color:#313131;}
#k7:before {background-color:#222222!important;}
.kwadracik{
display:inline-block;
position:relative;
}
.kwadracik a{
width:100px !important;
display:block !important;
position:absolute !important;
top:-40px !important;
left:0px !important;
transition: 3s !important;
opacity:0 !important;
visibility:hidden !important;
padding:0px 0px 5px 5px !important;
}
.kwadracik:hover a{opacity:1; visibility:visible; top:-15px;}
#k1 a{ border-left:1px solid white;}
#k2 a{ border-left:1px solid #D9D9D9;}
#k3 a{ border-left:1px solid darkgray;}
#k4 a{ border-left:1px solid gray;}
#k5 a{ border-left:1px solid #3C3C3C;}
#k6 a{ border-left:1px solid #313131;}
#k7 a{ border-left:1px solid #222222;}
link do zdj HTML: http://scr.hu/4suu/52peh
Błagam cię! Pomóż mi!
Mogłabyś mi pokazać blog z tym menu, bo teraz nawet nie wiem CO jest nie tak i nie za bardzo orientuję się, czego mam szukać. :)
UsuńOk, cofam. Zerknęłam do screenu z htmlem, linki powinny być w divach o klasie kwadracik ;)
Usuńdiv class="kwadracik"> a href="link">link /a> /div>
Oczywiście wszystkie komendy powinny się rozpoczynać od <
Korzystam z tej instrukcji ♥
OdpowiedzUsuńHej! Świetna instrukcja, wszystko mi działa, tylko jak wyświetla się ten link, to jest on bardzo daleko od pionowej kreski,a chciałabym żeby było blisko.Możesz coś poradzić? A i jeszcze chciałam się zapytać czy można też zrobić tak, żeby zamiast linków wyświetlał się tekst? Jeśli tak , to jak? :)
OdpowiedzUsuńBędę wdzięczna. Mam problemy z kontem google, dlatego piszę z anonima.
Pozdrawiam Kim.
Czytelnie napisane, na pewno każdy z tym poradnikiem poradzi sobie z podstawami programowania :D Jak się wkręcicie w temat to może i coś więcej z tego wyjdzie, kto wie.
OdpowiedzUsuń