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

Zaczaruj swoje zakładki

Zwinęliśmy już archiwum, teraz czas na pozbycie się niekiedy straszliwie długiej listy zakładek. Nie będziemy oczywiście jej wyrzucać, a jedynie przeniesiemy do pola na kod HTML i przekształcimy w łatwe do przeglądania menu.

Zatem, jakby to powiedzieli panowie z kabaretu Mumio, pozbądźmy się naszego wewnętrznego fuj...

Wykorzystamy w tym celu technikę Suckerfish Dropdowns. Metoda przygotowania rozwijanej listy zakładek nie odbiega wiele od tej jaką zastosowałem w przypadku menu z archiwum bloksa.

Kod HTML menu

Aby otrzymać efekt menu przeniesiemy odnośniki z domyślnych zakładek bloksa do pola na kod HTML. Powinny one jednak zostać umieszczone wewnątrz listy. Poniżej znajduje się przykładowy kod menu zakładek:
<ul id="lnav">
  <li>TYTUŁ MENU 1</li>
    <ul>
      <li><a href="Adres_URL">TYTUŁ ODNOŚNIKA 1</a></li>

      <li><a href="Adres_URL">TYTUŁ ODNOŚNIKA 21</a></li>
    </ul>
  </li>
  <li>TYTUŁ MENU 1<li>
    <ul>
      <li><a href="Adres_URL">TYTUŁ ODNOŚNIKA 1</a></li>
      <li><a href="Adres_URL">TYTUŁ ODNOŚNIKA 21</a></li>
    </ul>
  </li>
</ul>

Co daje nam następującą listę z odnośnikami:

Poszczególne menu (oddzielone tutaj pustymi liniami) odpowiadają folderom zakładek. Ich podelementy:

<li><a href="Adres_URL">TYTUŁ ODNOŚNIKA 2</a></li>

przedstawiają pojedynczy odnośnik.

Style CSS

Do uzyskania efektu rozwijanego menu należy dodać jeszcze szablon CSS, który listę wypunktowaną zmieni w takie oto menu:

Rozwijane zakładki na blogu http://tymczasowo.blox.pl

Menu z zakładkami z bloga A tymczasem.

Przygotowany przeze mnie szablon przeznaczony jest dla bloga z wąską szpaltą po prawej stronie. Posiadacze blogów z wąską szpaltą z lewej muszą zatem dokonać kilku zmian w szablonie zgodnie z umieszczonymi w nim wskazówkami (kilka drobnych modyfikacji).

Dostosowany do własnych potrzeb kod CSS (zmienione kolory, czcionki itp.) należy dodać do własnego szablonu. Dokonanie zmian w tym szablonie nie różni się wiele od zmian dla rozwijanego archiwum, pomocny może okazać się zatem opis formatowania menu archiwum.

Oswajanie IE

Tak przygotowane menu nie działa niestety w IE 6. Pełną funkcjonalność naszych zakładek uzyskamy dodając do zasobów skrypt blox.linksmenu.js oraz umieszczając w polu na HTML następujący kod:

<script type="text/javascript" src="/resource/blox.linksmenu.js">
</script>

Po tych wszystkich zabiegach możemy się już cieszyć nową, krótszą i przejrzystszą listą zakładek.

wtorek, 08 maja 2007, s.z.y.m.o.n
Tagi: blox

Polecane wpisy

TrackBack
TrackBack w tym blogu jest moderowany. TrackBack URL do wpisu:
Komentarze
ufujestem
2007/05/08 15:08:27
czekałam na to, tylko nie wiem czy mi się uda zrobić :*
-
2007/05/08 15:14:13
No i nie zdążyłam być pierwsza, a tyle stałam, czekałam :(
Szymek :*
-
ufujestem
2007/05/08 15:19:11
Cito 1 to można usunąć mój komentarz i będziesz pierwsza mi tak nie zależy :D
-
2007/05/08 15:23:23
Dodam tylko, że jak już mamy skrypt w html, to bardziej uciążliwe jest samo dodawanie nowych, kolejnych linków. Dłubanina. Dlatego warto przed klikiem "zapisz" jednak skopiować gdzieś całość, bo mnie raz umknęło i musiałam grzebać się w tym ponownie.
Natomiast naprawdę warto się poświęcić, bo efekt jest więcej niż zadowalający.
Nie miałam zakładek z przyczyn estetycznych, nie lubię wielości na blogu, chciałam przejrzystość, czystość, ład, czytelność i minimalizm jakby. A teraz też to mam ale i dostęp do swych ulubionych linków.
Szymek wprowadził kilka zmian, jedne na potrzeby przeglądarek, inne na potrzeby rodzielczości, szapalty, jeszcze inne akurat te najbardziej dla mnie ważne na potrzeby mojego bloga (kolorystyka, dopasowanie do wystroju szablonu)
Szymek po prostu to bardziej niż bardzo łebski facet, marnuje się tu na tych prywatnych blogach.
-
2007/05/08 15:25:25
ufujestem a dasz radę usunąć? ;)
Szymek o tym potem wpisa zrobi - jak samemu usuwać swe komentarze na cudzych blogach :D
-
2007/05/08 15:38:36
Dobra ostatni raz zaspamuję i zmykam :)
"Jak usuwać swe komnetarze na cudzych blogach: trza miec nick mpieck"
:)))
-
nelsonek
2007/05/09 15:47:38
Jak zwykle pomarudzę. Myślę, że konstruktywna krytyka nie wkurzy autora tego bloga. :-)

"Wewnetrzne fuj" rozwiazania proponowane przez S.z.y.m.o.n.a. jest takie: miejsce na kod html jest ograniczone do 4kB. Nawet gdyby go oczyścić ze wszystkich poprzednich "bajerów" jakie każdy ma na swoim blogu to i tak zakladek będziemy mieli niewiele. A przecież malo kto chce pozbywać się swoich bajerów.

Z powyższego powodu uważam techniczną stronę proponowanej zmiany za bardzo malo praktyczną.

Pozdrawiam
-
2007/05/09 19:23:11
@nelsonek: W te 4kB można naprawdę dużo wcisnąć. Ja mam tam zakładki, zajawki 2 artykułów, formę wyszukiwania, statystyki, status komunikatora, linki oraz ikonkę kanałów RSS, skrypt MBL, faviconke, dodatkowy kanał RSS i jeszcze zostało trochę miejsca.

Zróbmy jednak małą symulację.. Załóżmy, że standardowy użytkownik ma co najmniej tyle różnych dodatków co Ty. Pozostanie mu wówczas trochę ponad 2kB miejsca na kod HTML, gdzie może zmieścić ~ 30 linków. Podejrzewam, że w znacznej części przypadków zmieści się do 40 zakładek.

Prawdą jednak jest, że tak długiej listy jak u Onka ( zwyczajnyon.blox.pl ) nie wciśniemy i to chyba będzie warto zaznaczyć (update?).

Wybór rozwiązania zależy i tak od użytkownika.
-
2007/05/09 19:27:59
Tez mi się nie udało ale nie z powodu braku miejsca, tylko braku umiejętności. nie dodaję do zakładek właśnie dlatego żeby uniknąć efektu jak u Onka.
-
nelsonek
2007/05/09 19:33:50
No dobra, ale czy można te zakładki "wcisnąć" w jakieś inne miejsce niż kod html? NA PRZYKŁAD w samym skrypcie. Albo w jakiejś jakiejś starej notce z której usunąłbym stary tekst zastępując je zakładkami. Dałoby się? Bo na swoim testowym blogu próbowałem różne rózności, ale wychodzi na to, żem żółtodziób i niewiele potrafię.
-
2007/05/09 20:46:53
@ufujestem: W czym problem?

@nelsonek: W skrypt i owszem można. Ja jednak wyznaję zasadę dostępności elementów strony także przy wyłączonej obsłudze skryptów.
-
nelsonek
2007/05/09 20:50:35
To co zaproponowałbyś Onkowi, który (załóżmy) uparłby się przy rozwijalnym menu?
-
2007/05/10 11:52:27
Zrobiłam wszystko dobrze do momentu zmian w CSS, nie wiem w którym miejscu umieścić te zmiany, kombinowałam... w końcu rozbolała mnie głowa
-
2007/05/12 13:46:25
@nelsonek: Tu byłby ciężki orzech do zgryzienia - zapewne rozwiązanie skryptowe.
@ufujestem: Zasadniczo najlepszym miejscem jest koniec arkusza CSS bloksa. Oczywiście kolory należałoby zmienić na bardziej odpowiadające kolorystyce bloga.
-
2007/05/12 13:53:11
świetne...spróbuję ale pewnie nie dam rady :(
-
2007/05/12 16:55:17
Mam małe 2 pytania
1.Co nalezy zrobic by każdy folder zakładek był w oddzielnej ramce?
2. Zrobiłam w szerokiej szpalcie oddzielne tła dla wpisów ale nie umiem zrobić tak by były w ramce. Jak to zrobić? Jeśli znajdziesz chwilkę czasu proszę o odpowiedż :)
-
2007/05/12 16:56:23
zapomniałam dodać,że chodzi o folder zwykłych zakładek :)
-
2007/05/12 19:09:02
@dzika_kobieta: W przypadku wpisów dodaj dla selektorów (są już w CSSie)
.BlogWpisBox, .SkomentujBox następującą definicję:
border: 1px solid black; linię (parametry można zmienić)

Dla zakładek trzeba dodać to samo dla selektora
.ZakladkiItems - jeżeli tytuł też ma być w ramce
lub .PoziomDrzewa - tytuł folderu zakładek po za ramką
-
nelsonek
2007/05/12 19:35:35
Rozwiązanie skryptowe? Czyli jak? W skrypcie, który podałeś należałoby dopisywać zakładki?

PS. W Operze (9.02) pojawiły się przyciski "Zapisz" i "Anuluj". To Twoja sprawka? :)
-
2007/05/12 19:59:01
@nelsonek: Myślałem raczej o odpowiedniku skryptu dla archiwum, który przekształciłby strukturę dokumentu.

Przyznaje się. Przyciski, to moja sprawka ;)
-
2007/05/13 15:23:11
Dziękuję-udało się...a czy mogę zająć jeszcze chwilkę Twojego cennego czasu?
Czy możesz mi powiedzieć gdzie i co wpisać by tytuł wpisów był nieco niżej niż jest, tzn, by był większy odstęp daty i tytułu wpisu.oraz by przyblizyć opis bloga do tytułu, tzn zmniejszyc odległośc między tytułem a opisem? I jeszcze jedno :(w żaden sposób nie mogę dojść gdzie się zmienia kolor loginu komentującego -gdy się juz czyta wpisany komentarz?
-
2007/05/13 15:29:51
tzn, chodzi mi tam wyżej o odsunięcie tytułu wpisu od górnego brzegu ramki
-
2007/05/14 09:03:32
Dziekuję :)
-
anna_1503
2007/06/02 19:41:50
Przeczytałam wszystko dwa razy i chyyyyba ciut, ciut zrozumiałam. Ale aż boję się zacząć grzebanie w swoim css. Mam jednka wielką ochotę schować swoje zakładki.
W każdym razie dziękuję za instrukcje!
Pewnie jeszcze nie raz tu będę zalgądać. :)
Pozdrawiam!
-
guslarka
2007/12/15 00:03:54
Ratunku.

Jak udało mi się z archiwum, tak za cholerę nie wychodzi z zakładkami. Może dlatego, że mam ich stanowczo za dużo i musiałam wstawić je w pole na kod w postaci skryptu document.write. Po dłuuugiej walce z wyszukaniem wszystkich apostrofów i innych przeszkadzaczy udało mi się w ten sposób wszystkie zakładki wsadzić w kod w postaci ślicznej listy, czyli tak jak powinno to wyglądać. Twój skrypt też wsadziłam do zasobów, a wywołanie do pola na kod. W arkuszu css dopracowałam sobie wygląd, na podstawie tego co wcześniej uzyskałam dla archiwum - dodałam element #lnav po przecinku do elementu #nav. I okazało się, że wyświetla mi się dłuuugaśna lista, w paskudnym defaultowym kolorze blue, nie reagująca ani na zwijający ją skrypt, ani ma zapisy w arkuszu. Czyżby powodem było to, że zakładki do pola na kod html wstawiłam skryptem? I czy umiałbyś coś doradzić - czy w ogóle się to da jakoś rozwiązać - nie wiem - wstawiając wszystko w jeden skrypt, łącznie z rozpisaniem stylu? Bo na to to ja stanowczo za krótka jestem... ;)

Pozdrawiam.
-
s.z.y.m.o.n
2007/12/15 02:14:15
Nie widząc efektu nie mogę nic poradzić. Podeślij ten skrypt i CSS (na gazetową pocztę), to postaram się zobaczyć co da się zrobić (jeśli znajdę chwilkę czasu).
-
2007/12/15 02:55:00
Łatwo powiedzieć... Wywaliłam.
To chyba nie był dobry pomysł z ładowaniem zakładek do skryptu. Zwłąszcza jak człowiek się na js nie zna kompletnie :D cNajwyżej na swoim testowym bloxie, gdzie czasem sobie kombinuję z własnym szablonem powtórzę ów porażający efekt, coby właściwego bloga nie psuć. ;)

Jak odeśpię nocne pracowanie, jeszcze przysiądę nad tym i co trzeba podeślę na maila. Jeśli uda Ci się znaleźć chwilkę będzie bardzo miło. Tym bardziej, że taka rzecz zwijająca zakładki byłaby jak znalazł dla tych, co mają ich dużo... Jasne blog, to nie linkownia. Ale mimo wszystko ;)
-
s.z.y.m.o.n
2007/12/15 11:17:22
W skrypcie nie nadałaś elementowi ul identyfikatora lnav - zapewne to jest problemem.
-
2007/12/17 00:43:33
Pewnie tak. Po Twojej poprawce zadziałało jak trzeba. Tak to jest jak lamery biorą się za pisanie skryptów.

Bardzo dziękuję - i przy okazji następnego bloxowego spotkania masz u mnie piwo. Albo co ;)
-
myprettyeats
2012/05/02 21:26:26
Dziekuje, zastosowalam i bardzo jestem zadowolona z efektu, moj spis tresci pokazuje sie dokladnie na wszystkich stornach tak jak chcialam, mam jednak pytanie, jak zmienic kolor i czcionke stron/linkow? W tej chwili jest brzydka domyslana blox'owa, nie podoba mi sie :( Z gory dziekuje za odpowiedz
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...