O Internecie, oprogramowaniu oraz moich własnych małych projektach...
Blog > Komentarze do wpisu

Zaczaruj archiwum bloksa cz. 3

Poprzednio zajmowaliśmy się przekształceniem archiwum do postaci prostego menu. Dziś wykorzystamy nabyte wówczas wiadomości i dokonamy finalnej transformacji archiwum bloksa w rozwijane menu. Przegotujemy dwie jego wersje: menu w położeniu pionowym oraz poziomym.

W poprzedniej wersji menu realizowaliśmy rozwijanie podmenu wyświetlając i ukrywając na zmianę listę miesięcy. Metoda ta powodowała jednak przesuwanie się elementów strony podczas wyświetlania podmenu.
Obecnie zrealizujemy tą funkcję za pomocą metody, która pozwoli nam wyświetlić listę miesięcy ponad innymi elementami strony, a jednocześnie zapewnia szybsze renderowanie menu przez przeglądarkę.

Przygotowania

Naszą pracę rozpoczniemy, tak jak poprzednio, od usunięcia wcięć i wypunktowania:

#nav, #nav ul{
   list-style-type: none;
   padding: 0;
   margin:0}

Ukrycie podmenu

Typ razem ukrycie podmenu zrealizujemy usuwając je z przepływu dokumentu przy pomocy pozycjonowania absolutnego:

#nav ul { position: absolute }

a następnie przesuwając poza widoczną część ekranu:

#nav ul {left: -9999px}

Wyświetlenie podmenu

Wyświetlimy podmenu przywracając je do widocznego obszaru ekranu.

#nav li:hover ul, #nav li.over ul { left: 0 }

Musimy jednak pamiętać, iż pozycjonowanie absolutne odbywa się względem strony i w takim przypadku menu pojawiłoby się w jej lewym brzegu, a nie o to nam chodzi. Wymuszenie pozycjonowania listy miesięcy względem głównego menu (lista lat) osiągniemy pozycjonując element nadrzędny relatywnie, co łącznie z ustaleniem pozycji zapiszemy:

#nav li { position: relative }
Nakładające się menu.

Rys. 1. Nakładanie się menu.

Jak się okazuje tak pozycjonowane podmenu zachodzi na listę lat. Musimy zatem zwiększyć (lub zmniejszyć) wartość left, tak by elementy na siebie nie nachodziły:

#nav li:hover ul, #nav li.over ul { left: 5.5ex }

Zastosowałem tu jako jednostkę szerokość litery x, która pozwoli uzyskać właściwą odległość niezależnie od rozmiaru czcionki.

Poprawnie pozycjonowane menu.

Rys. 2. Poprawnie pozycjonowane manu.

Aby rozwijane menu nakrywało pozostałe elementy strony, tak jak to czyni menu w programach, musimy zmienić mu index określający kolejność nakładania elementów:

#nav ul { z-index: 9 }

Po wykonaniu powyższych czynności otrzymujemy w ten sposób proste pionowe menu.

Menu poziome

Aby otrzymać poziome menu musimy nieco zmienić nasz arkusz CSS, który przygotowaliśmy dla menu pionowego. Pierwszą czynnością jest ułożenie poziome listy lat, które uzyskamy następującą deklaracją:

#nav li { float: left }

Powoduje ona również nie pożądane poziome ułożenie listy miesięcy, co możemy jednak łatwo usunąć.

#nav li li { float: none }
Menu po poziomym pozycjonowaniu listy lat.

Rys. 3. Menu po poziomym pozycjonowaniu listy lat.

Pozostało nam jeszcze do wykonania przemieszczenie listy miesięcy tak by znajdowała się bezpośrednio pod odpowiadającym jej rokiem:

#nav ul { top: 1.2em }
#nav li:hover ul, #nav li.over ul { left: 0ex }

Odległość od góry wyraziłem tu w jednostkach wysokości litery M, co pozwoli na łatwe skalowanie przy zmianie rozmiary czcionki.

Menu poziome w wersji podstawowej.

Rys. 4. Menu poziome w wersji podstawowej.

Tak oto otrzymaliśmy menu poziome.

Wykończenia

Oba rodzaje menu w tej formie są nadal mało atrakcyjne, postaram się więc przedstawić jak w prosty sposób możemy to zmienić.

Lista miesięcy

Zmiana wyglądu listy miesięcy jest jednakowa dla obu przypadków, a jednocześnie stanowi największe pole do popisu. W opisie tym ograniczę się jednak do przygotowania prostej i moim zdaniem najbardziej funkcjonalnej formy menu:

Formatowanie listy rozpoczniemy od jej obramowania, w tym przypadku czarną ramką o szerokości 1px i nadania jasnoszarego koloru tła:

#nav ul {
   border: 1px solid black;
   background-color: #f3f3f3}

Kolejnym krokiem będzie dodanie dla listy miesięcy wewnętrznych marginesów górnego i dolnego (boczne dodamy później).

#nav ul { padding: 5px 0 }
Podmenu po dodaniu obramowania i tła.

Rys. 5. Podmenu po dodaniu obramowania i tła.

Ostatnim elementem, którego wygląd zmienimy na liście miesięcy będzie wygląd poszczególnych miesięcy przed ich wskazaniem (tu zdefiniujemy wewnętrzne marginesy)

#nav a {
   display: block;
   color: black;
   padding: 0 7px }

oraz po wskazaniu myszką

#nav a:hover {
   background-color: black;
   color: white}

Poprawne wyświetlanie elementów rozwijanego menu wymaga jeszcze tylko kilku deklaracji, w tym zdefiniowania jego szerokości:

#nav li li{
   width: 13.5ex;
   padding: 0;
   margin: 0;}
Gotowe podmenu.

Rys. 6. Gotowe podmenu.

Lista lat

Wykończenie listy lat jest nieco odmienne dla menu pionowego i poziomego. Jednakże w obu przypadkach dobrze jest wyróżnić wskazany rok, np. innym kolorem tła:

#nav li:hover, #nav li.over {
   background-color: black;
   color: white}

Dla poprawy wyglądu wskazanego roku dobrze jest zastosować dodatkowe marginesy wewnętrzne, które należy dobrać zależnie od rodzaju menu.

Menu poziome

Dla menu poziomego wystarczą niewielkie wartości wewnętrznych marginesów, np:

#nav li { padding: 0 0.5ex }
Gotowe menu poziome.

Rys. 7. Gotowe menu poziome.

Menu pionowe

W przypadku menu pionowego elementy listy lat zajmują całą dostępną szerokość Archiwum, dlatego, obok wewnętrznych marginesów, należy też określić ich szerokość:

#nav li {
   width: 4.5ex;
   padding: 2px 0.7ex }
Gotowe menu pionowe.

Rys. 8. Gotowe menu pionowe.

Zakończenie

Przygotowane wersje Archiwum stanowią dopiero punkt wyjściowy do przygotowania Twojej własnej wersji. Na ich podstawie w prosty sposób możesz stworzyć własną wersję kolorystyczną dopasowaną do Twojego bloga. Pamiętaj jednak aby nie usuwać deklaracji odpowiedzialnych za wyświetlanie starego archiwum z arkusza. Umożliwić to poprawne wyświetlenie strony także w przeglądarkach z wyłączoną obsługą JavaScript.

Gotowe szablony CSS

Oba przygotowane tu szablony dla archiwum w formie menu umieściłem w plikach CSS. Możesz je pobrać na dysk i swobodnie edytować:

menu poziome
menu pionowe

sobota, 10 lutego 2007, s.z.y.m.o.n

Polecane wpisy

TrackBack
TrackBack w tym blogu jest moderowany. TrackBack URL do wpisu:
Zmiany i homofobia! z 5po5
Gdy tworzy się jakąś stronę w moim przypadku bloga zawsze przychodzi czas na zmiany. Nie będę ich wprowadzał gwałtownie, ale powolutku. Na razie udało mi się zmusić archiwum do tego, żeby stało się rozwijalne i nie zajmowało tyle miejsca co ... »
Wysłany 2007/04/24 23:30:48
Czaruję archiwum bloksa z szablony katemac
Nadeszła wreszcie ta chwila w której postanowiłam się zmierzyć ze zwinięciem archiwum. Moje archiwum nie jest może wielkie ale jako element nawigacji po blogu jest według mnie bardzo mało użyteczne. Dlatego też dzisiaj postanowiłam je zwinąć a w ... »
Wysłany 2007/12/07 17:23:59
archiwum zwijane jak zakładki z experymenty informatyczne
Od bardzo dawna do zwijania rozbudowanego archiwum na bloksie służy czarodziejski skrypt s.z.y.m.o.n.a . Efekt, który on daje jest świetny, ale przyznam szczerze, że czytając trzyczęściową instrukcję do niego czułem się trochę zniechęcony do ... »
Wysłany 2008/02/29 23:35:04
Blox.pl i magia jQuery - zwijane archiwum i zakładki, wyróżnianie komentarzy autora z KosciaKowy blog
Podczas przygotowywania nowego szablonu dla mojego bloga natrafiłem na problem z archiwum i zakładkami - zajmowały zdecydowanie za dużo miejsca. Rozwiązanie było tylko jedno - użyć skryptu pozwalającego na ich zwijanie i rozwijanie. Gotowe rozwiązania ... »
Wysłany 2009/11/14 17:18:37
Komentarze
2007/02/15 18:42:42
Uwaga ;) bede probowac! ale jak cos rozwale.. :D
dzieki
K
-
s.z.y.m.o.n
2007/02/15 19:26:43
Próbuj, próbuj... bo wpadnę sprawdzić wyniki
-
2007/02/15 20:16:40
daj mi jakis tydzien ;)
jakna razie siedze w pierwszej notce dot. archiwum i nic znalezc u siebie nie moge ;)
Ale jeszcze mi nie pomagaj, poczekaj, az sie poddam :D
Pozdrawiam,
Karola
-
2007/02/19 18:06:42
A gdzie ten plik wstawić? Do css czy do zasobów bloga i w html dodac skrypt.
-
Gość: eela, *.acn.waw.pl
2007/02/19 18:11:46
Już wiem, ma być w css ale w którym miejscu?
-
s.z.y.m.o.n
2007/02/19 18:20:40
@eela: Zawartość pliku z rozszerzeniem CSS dodajesz do arkusza CSS - najbezpieczniej na jego końcu.
-
2007/02/20 17:11:57
W Operze 9.02 nie działa zwijanie archiwum
-
s.z.y.m.o.n
2007/02/20 17:22:45
@eela: Na tej wersji nie testowałem. Jak tylko uda mi się do niej dorwać to sprawdzę w czym rzecz.
-
2007/02/20 23:52:54
@eela: Sprawdziłem pod Operą 9.02 i wszystko jest OK. Napisz mi na maila co robiłaś, to może znajdziemy przyczynę problemów.
-
pasiwo
2007/02/23 00:24:39
czarna magia, nic mi nie wychodzi:(
-
2007/02/23 00:59:15
Napisz dokładniej co robisz.
Pamiętaj, iż istotnym elementem jest tu skrypt opisany w części 1 - sam CSS nic nie da.
-
pasiwo
2007/02/24 00:35:18
mnie trzeba lopatologcznie;(
Do okienka html wkleilam skrypt; pobralam plik "blox.archmenu.js" do zasobow (pliki - tak?) i co dalej - wkleic jeszcze css?
Tylko sie nie smiej z kompletnego laika...
I tak prosze - "kawa na lawe" - zwyczajnie, bo to co piszez za madre:)
-
s.z.y.m.o.n
2007/02/24 00:52:19
@pasiwo: W podpunkcie "Wykorzystanie skryptu na bloksie" (cz. 1) jest podane dokładnie co trzeba zrobić z plikiem skryptu.
Jak już będziesz miała działający skrypt, wówczas do szablonu CSS wklejasz (po zmodyfikowaniu) zawartość jednego z podanych na końcu tej notki plików.

Przygotowanie tu szablony menu są czarno-białe więc przydałoby sie pozmieniać kolory. Myślę, że jak się przyjrzysz ilustracjom, to jednak wyłapiesz miejsca gdzie są wprowadzane zmiany - kolory, dla ułatwienia, są podane słownie.
-
pasiwo
2007/02/24 01:11:12
no i tak robilam - dodalam wpis o skrypcie do okienka html, potem "Pobierz plik blox.archmenu.js i dodaj do zasobów swojego bloga." Zapisalam jako skrypt "blox.archmenu.js" i dodalam do plikow (tylko tu moge robic cos nie tak, ale co?). Menu archiwum jest nadal stare:( A moze Ty bys sam to u mnie zrobil?
-
pasiwo
2007/02/24 02:01:28
glowe Ci zawracalam, a blad lezal oczywiscie po mojej stronie;( Sorry:))

Dziekuje:)
-
pasiwo
2007/02/24 02:09:27
mam jednak inny problem, bo lata pojawiaja sie nad napisem "ARCHIWUM", a nie pod nim. Poszczegolne lata rozwija miesiace dobrze - w dol. I w Operze i IE7 tak samo wyglada. Ale to chyba nie moja wina?
-
2007/02/24 02:34:18
@pasiwo: Trudno mi cokolwiek powiedzieć nie widząc co się stało.
Skontaktuj się na maila lub komunikator, to pomyślimy.
-
2007/02/24 14:10:04
@pasiwo: Wywołujesz skrypt dwukrotnie i stąd problem. Przejrzyj dobrze pole na kod HTML ;)
-
pasiwo
2007/02/24 17:10:55
wiem, poprawilam:)) Ale skad Ty to wiesz?;)

W menu, po rozwinieciu miesiecy - 'pazdziernik' ma literke 'k' poza ramka. Nie wyglada to estetycznie, czy moge to jakos poprawic?
-
2007/02/24 19:08:56
@pasiwo: Widać w kodzie ;)

Szerokość menu można oczywiście zmienić - poprawkę podeślę na pocztę.

Zmniejsz ilość awatarów z MBL (max do 12), bo strasznie wolno ładuje się główna treść.
-
pasiwo
2007/02/24 23:16:59
Wiem, dlatego przymuzylam oko:))
Tak jest! Zmniejszylam:)
-
quaero
2007/03/02 18:29:04
Super ekstra bomba - ale czy na początku ładowania się bloga musi wyskakiwać archiwum w starej formie?
Nie, żebym wybrzydzała... :)
-
s.z.y.m.o.n
2007/03/02 18:44:19
Niekoniecznie, ale to już trzeba pokombinować bo skrypt zmienia jego strukturę dopiero po załadowaniu archiwum w standardowej formie.

Jakaś sztuczka z CSS oraz display: none pewnie mogłaby to ukryć. Zawsze pozostaje jednak jakaś grupa użytkowników z wyłączoną obsługą javascript i trzeba ją uwzględnić.
-
quaero
2007/03/02 19:32:16
Hmm, no tak, no tak... Dzięki. :)
-
2007/03/11 01:59:36
Dzieki o Wielki S!!!!!
Dzieki Twojej lopatologi stosowanej i tlumaczen dodatkowych dla Pasiwo, udalo mi sie :D :D :D
Musze jeszcze popracowac nad kolorami ;) ale to pikus ;) (chyba:))

Dziekus Wielgus!!!
Karolina
-
2007/03/11 02:17:57
:)
-
2007/03/11 13:30:57
dziękuję, poczęstowałam się :)
-
nelsonek
2007/04/25 10:23:35
Nie wiem: poddaję się! Może pomożesz? Gdy rozwija siępodmenu z listą miesięcy to owo podmenu ma obramowanie (czarne). I chcę zmienić kolor tego obramowania. Jak to zrobić?
-
2007/04/25 12:45:01
Cały proces ostylowania menu jest tu opisany. Zobacz w części "Lista miesięcy" w tym poście - zmień tylko kolor ramki z black na własny.
-
nelsonek
2007/04/25 12:55:47
Ślepota nie boli!
Tak to jest gdy probuję walsnymi silami.
:P

Dzieki!
-
nelsonek
2007/04/25 17:31:18
Jeszcze troche pomecze. Chcialbym by na miom blogu najpierw byly komentarze, a pozniej trackbacki. Zajrzalem tutaj: kurshtml.boo.pl/css/css.html i nie wiem gdzie tego szukac. Pod pozycjonowanie nie pasuje. To gdzie u licha? :-)

Z gory dzieki za pomoc!

:-)

-
2007/04/25 18:27:56
Tylko JavaScript (zresztą raczej kiepskawo by to działało). Moim zdaniem nie warto ruszać. Wiele trackabaków zazwyczaj nie ma, a ich obecność tylko podnosi wartość notki.
-
martuuha
2007/05/09 22:27:37
dzięki!
w zasadzie prawie się udało.
tylko rozwinięta lista miesiecy nachodzi na kolejne zakładki i jest nieczytelna.
pewnie to się którą wartością szerokości poprawia, ale nie wiem która, probuje po omacku, moze cos zaskoczy.

w każdym razie - dzięki! :)
-
2007/05/09 22:40:41
@martuuha: Szerokość ustawisz
#nav li li{
width: 13.5ex; <=TUTAJ
padding: 0;
margin: 0;}
Ustaw także kolor tła, bo obecna przezroczystość powoduje nieczytelność menu
#nav ul {
border: 1px solid black;
background-color: #fff <=TUTAJ KOLOR BIAŁY
}
-
martuuha
2007/05/09 22:49:28
dzięki!
o tło chodziło :)

Cito ma racje - jestes Aniołem :)
dobrej nocy :)
-
2007/05/13 13:09:26
dobra, wymiękłam
coś zrobiłam źle, ale nie wiem, co.

tu: szablonmae.blox.pl - nie wchodzi mi menu rozwijane, za żadne skarby. a robiłam krok po kroku, ręcznie.
to jedna sprawa,
a duga, że zdjęcie wklejone jako tło w rozdzielczośi 1024*768 pod IE 7.0 się nie całe wyświetla (ucina część, dość istotną :P) - jak to zmnienić?? mozesz coś poradzić?

szablon robię dla Jo_orca (nakrawedziemocji.blox.pl - klucze na skrzynce czekają, jak chcesz), ucina jej osobisty tyłek, dlatego też szablon jest zakluczykowany - klucze do niego również na skrzynce.
z góry dzięki :)
-
2007/05/14 18:47:55
@Kakunia.k: Napisz więcej szczegółów na maila, to pomyślimy
-
2007/06/03 22:01:05
...to ja tylko tak z cicha pozdrawiam cięzko myślących nad moją naderwaną częścią ciała ;).... i oczywiście s.z.y.m.o.n'ie! czuj się zaproszony oficjalnie nie tylko przez Kakunię :)

pozdrawiam
Jo
-
2007/12/26 16:08:08
Świetna rzecz! Wpisałam do CSS kolejne kroki. Działa bez zarzutu, dziękuję:) Tylko kolorki mi nie pasują, za ciemne, można chyba jednak dowolnie modyfikować?
-
2008/01/02 16:47:43
Zrobiłam sobie całkiem ladne archiwum, tak przy okazji aktualizacji, po zmianach wprowadzonych na bloxie: finetka.blox.pl/html
jak widac poziome;
pytanie dotyczy powiększania się archiwum, mam teraz 4 lata, Taisha ma 5 i doszlo u niej w poziomie...; czy to tak cały czas będzie się dodawac w poziomie, czy potem moze będzie w kolejna linijka; pytam może trochę na wyrost, ale ciekawi mnie to. :)
-
s.z.y.m.o.n
2008/01/02 20:53:38
Jeżeli określisz (w CSS) szerokość bloku z archiwum, to doda także kolejny wiersz (gdy się nie zmieści).
-
2008/01/03 15:57:52
A, to super, bo myslalam, że to bardziej skąplikowane. Dzięki. :)
-
2008/02/07 18:14:10
Zauważyłam, że archiwum na moim blogu nie zwija się, kiedy korzystam z przeglądarki IE 7.0
Pod Firefoxem działa bez zarzutu.
Czy mogę coś z tym zrobić?
Nie korzystałam z gotowego szablonu dla archiwum, tylko wpisywałam poszczególne komendy, krok po kroku do arkusza CSS. Nie znalazłam żadnej aktualizacji skryptu, chociaż trafiłam na aktualizację skryptu dot. ostatnich komentarzy.
Co może być przyczyną tego, że pod IE archiwum nie zwija się?
-
s.z.y.m.o.n
2008/02/07 19:53:09
To wina kodu HTML, który wkleiłeś do szablonu CSS. Powinien być on umieszczony w polu na kod HTML (zakładka Wygląd > elementy).
Na gazetowe konto podesłałem poprawiony szablon.
-
2008/02/08 11:04:57
Wkleiłam poprawiony przez Ciebie arkusz CSS, kasując wcześniej ten, którym był niepotrzebnie wklejony kod HTML. Archiwum rozwija się w lewą stronę, jednak jest to jedyna widoczna zmiana i na dodatek widać ją tylko pod Firefoxem. Pod przeglądarką IE archiwum w dalszym ciągu nie zwija się. Próbowałam to samo zrobić na moim blogu testowym wydaniedrugiepoprawione.blox.pl/html na którym czasem próbuję stworzyć jakąś skórkę, jest tak samo. Pod IE archiwum nie chce się zwinąć.
Co może być przyczyną? Nie wykluczam, że popełniłam być może jakiś błąd przy modyfikowaniu arkusza CSS z szablonu o wolnej licencji. Dopiero się uczę i pewnie jest tam dużo błędów.
Będę bardzo wdzięczna za pomoc.
Ania
-
s.z.y.m.o.n
2008/02/08 11:21:15
Faktycznie validator wskazuje na błędy w CSS, które mogą być przyczyną.
Przejdźmy może z dyskusją na maila i nie zaśmiecajmy wątku. Skoro masz testowego bloga, to napisz mi proszę na pocztę, czy działa z domyślnym szablonem (pracuję pod Linuksem i nie mam obecnie IE).
-
Gość: syrna, *.internetdsl.tpnet.pl
2008/02/12 21:50:43
Bardzo dziękuję za pomoc. Mam jeszcze tylko pytanie odnośnie kolorów- nie potrafię zmienić koloru daty (roku)lat przed "najechaniem" na nią myszką- czyli gdy archiwum jest w stanie spoczynku. Czy to również można ustawić z poziomu skryptu??
-
s.z.y.m.o.n
2008/02/12 21:57:06
To zmieniamy w CSS. Trzeba przypisać kolor dla elementu #nav
Jeżeli zmienią się także kolory miesięcy, to poprawiamy dla nich używając selektora #nav ul
-
Gość: syrna, *.internetdsl.tpnet.pl
2008/02/12 23:09:39
Dziekuję:)
-
wojtekb.1
2008/11/06 15:05:21
Pobrałem skrypt na swój blog. Instalacja wcale nie taka trudna, jak się wydaje.
-
felicja79
2012/01/02 19:31:22
Napisałam skróconą instrukcję na podstawie Twoich trzech:

najlepszedodatkinabloga.blox.pl/2012/01/Zwijane-archiwum-lista-lat.html

Skopiowałam też Twoje szablony CSS. Mam nadzieję, że to Ci nie przeszkadza? Jeżeli tak, mogę je usunąć. Mam też prośbę, żebyś przeczytał moją instrukcję i fachowym okiem sprawdził, czy nie popełniłam jakiegoś głupiego błędu. Bardzo dziękuję za ten skrypt, Twoje instrukcje i ewentualną pomoc :-).
Skrypt ostatnie komentarze w nowej wersji
Po sporych perturbacjach skrypt wraca do życia. Teraz z prostym generatorem kodu do w klejenia na blogu!
Wszyskich zainteresowanych zapraszam do ponownej instalacji.
Czytaj dalej...
Promuj swojego bloksa
Czytelnicy mogą promować Twojego bloga umieszczając linki do notek w serwisach społecznościowych. Ułatw im to zadanie dodając na blogu listę odnośników, która tą czynność sprowadzi do jednego kliknięcia.
Czytaj dalej...