O szablonach, ich projektowaniu i moich z tym zmaganiach...
Blog > Komentarze do wpisu

Górne menu z ikonkami

Co chwilę dodaję jakąś duperelę do moich szablonów i już nawet mnie samej trudno ogarnąć co w którym szablonie już jest a co trzeba dodać. Dzisiejsza duperela to całkiem przydatne górne menu z obrazkami. Ostatnio często dodaję je do szablonów i choć zawsze staram się umieszczać stronę z dokładną instrukcją to myślę, że przyda się i taka notka jak ta dzisiejsza, która wyjaśni jak to zrobić w najprostszej formie.

#menuIkon

Moje ikonkowe menu często są specjalnie stylowane: wtapiają się w tło, powoli zaokrąglają albo zmieniają kolory. Każda z tych rzeczy wymaga innego opisu CSS. Dzisiaj daruję sobie taką szczegółowość i opiszę tylko jak sprawić aby ikonki pojawiły się w wybranym miejscu.

UWAGA! Jeżeli na blogu z którego pobrałaś szablon ikonkowe menu jest widoczne to wystarczy, że w polu na dodatki wpiszesz odpowiedni kod HTML. Skoro ikonki są na blogu z szablonem oznacza to, że ich położenie jest już opisane.

Do stworzenia ikonkowego menu potrzebne będą:

  1. Niewielkie obrazki
    wybrane ikonki dodaj do zasobów bloga
  2. Fragment kodu HTML
    wystarczy prosty kod ilustracji z linkiem otoczony divem o identyfikatorze menuIkon
  3. Odpowiednie stylowanie (CSS)
    trzeba zmienić położeni elementu poprzez cechę position:absolute; i określić nowe położenie względem wybranych krawędzi (top:10px; right:10px;)

Przede wszystkim musisz podjąć decyzję do czego będą linkować elementy z nowego menu i poszukać albo samemu przygotować odpowiednie obrazki. Proponuję zapoznać się z zawartością strony IconArchive, można znaleźć tam prawdziwe skarby, trzeba tylko się upewnić czy licencja pozwala nam je użyć.

Ustal sobie jakiego rozmiaru będą obrazki w tym menu. Niech będzie stały, jednakowy dla wszystkich elementów. Rytm to jedna z cech piękna. Wydaje mi się, że w większości przypadków całkiem odpowiednim rozmiarem będzie 32×32px. Rozmiar dopasuj do stylu szablonu i liczby elementów w menu. Nie przesadzaj z wielkością: to ma być drobne pomocnicze menu a nie logo strony.

Na początek dla przykładu wybrałam bardzo obszerną (436) kolekcję ikon autorstwa dAKirby309 udostępnionych na licencji CC BY 3.0. Są to bardzo proste dwukolorowe wzory prezentujące loga wielu aplikacji, przeglądarek, systemów. W zależności od pomysłu na menu poszukaj sobie odpowiednich dla Twojego bloga ikon. Ja zamierzam stworzyć menu kontaktowo-subskrypcyjne więc potrzebuję podstawowych symboli kontaktu i subskrypcji (via różne serwisy).

Wybrane ilustracje dodajemy do zasobów bloga:

Edycja blogu -> WPISY -> PLIKI -> Nowy plik

Tym razem kod będzie bardzo porosty. Każdy obrazek należy przedstawić w postaci kodu linku. Przy ilustracji konieczny jest atrybut alt a do linku można dodać atrybut title, który dodatkowo wyjaśniał będzie przeznaczenie ikonki. Przykładowo link kontaktowy może mieć w title wpisane zachęcające napisz do mnie.

kod ilustracji z linkiem

Czerwone fragmenty na powyższym przykładnie są niezmienne, każda kreseczka się liczy. Beżowe należy uzupełnić własnymi danymi: adresem strony do której chcesz zalinkować i adresem ilustracji (ikonki) w zasobach twojego bloga.

Gdy przygotujesz taki kod, dla każdej ikonki osobno, całość ubierz w div o identyfikatorze menuIkon. Pozwoli nam to dowolnie dysonować tym elementem. Bez identyfikatora nie mamy jak powiedzieć przeglądarce o co nam chodzi. Teraz gdy nazwaliśmy element (daliśmy mu unikalny identyfikator) możemy go w szablonie wołać po imieniu i ustalić jak ma wyglądać i gdzie ma być położony.

przykładowy kod dla menuIkon

Na powyższym przykładzie czerwone elementy to te kluczowe, które zadecydują o tym, czy będziemy mogli coś zrobić z elementem czy nie. Dowolna zawartość to miejsce na kody poszczególnych ikonek. Całość powinna wyglądać mniej więcej tak: zobacz tekstową wersję przykładowego kodu.

Nowo stworzony kompletny kod wklejamy w polu na dodatki:

edycja blogu -> USTAWIENIA -> BOCZNA SZPALTA -> Dodatki

Jeżeli w polu na dodatki masz jakiś kod to nie ma większego znaczenia gdzie wkleisz ten nowy (na początku czy na końcu) o ile nie zrobisz tego w środku jakiegoś innego kodu. Pilnuj aby w polu na dodatki nie było zamieszania. Aby lepiej wszystko widzieć możesz sobie powiększyć pole - kliknij na jego prawy dolny róg i przeciągnij nieco w dół.

Dysponując elementem, który ma konkretną nazwę (identyfikator) możemy z nim zrobić w szablonie wiele różnych magicznych rzeczy. Dla tak prostego elementu jak górne menu wystarczy nam określić położenie.

a. Ustal element względem którego będziesz określać położenie.

Sprawdź jakie są zapisy przy elementach #BlogGlownyBox i #BlogBodyBox, to są dwa nadrzędne dla pola na dodatki elementy. Jeżeli menu dodajesz w szablonie który ja zrobiłam ale w którym nie ma jeszcze opisu takiego menu to jest bardzo duże prawdopodobieństwo, że przy którymś ze wspomnianych elementów będzie wpisane position:relative; Taki zapis określa właśnie nasz element względem którego będziemy opisywać położenie. Sprawdź też czy któryś z tych elementów ma też określoną szerokość. Jeżeli jest to jeden z moich szablonów to zapewne ma.

Jeżeli żaden z wspomnianych dwóch elementów nie ma width to potrzebujesz nieco trudniejszego pozycjonowania względem środka strony. O tym napiszę przy innej okazji. Jeżeli widthwystępuje choćby przy jednym  z wspomnianych selektorów to ok, masz ułatwione zadanie.

Jeżeli, żaden ze wspomnianych dwóch elementów nie ma wpisane position:relative; to dodaj taki zapis do #BlogGlownyBox, zapisz zmiany w arkuszu i sprawdź czy nie spowodowało to jakiś niemile widzianych zmian na twoim blogu. Jeżeli wszystko ok to świetnie. Jeżeli coś nieoczekiwanie zmieniło położenie to skasuj dodany zapis i skorzystaj z nieco trudniejszego opisu określenia położenia względem środka strony.

b. Określ nowe położenie elementu

Jeżeli wszystko jest ok to wystarczy, że na koniec arkusza szablonu wpiszesz kod odpowiedzialny za zmianę położenia elementu:

#menuIkon {
position:absolute;
top:10px;
right:10px;
width:180px;
}

I gotowe. Twój szablon od teraz ma ikonkowe menu.

Położenie ustal biorąc pod uwagę wygląd własnego szablonu. Dla przykładu proponuję przyjrzeć się szablonowi 07 czerwony i czarny. Jest to stary szablon, któremu nie zamierzam dodawać ikonkowego menu. Nad archiwum, w wąskiej kolumnie wyświetla się tam duża ikonka RSS. Jest to świetne miejsce ta takie subskrybcyjne menu więc zamiast jednej dużej ikonki umieszczę tam kilka mniejszych.

Sprawdziłam, zarówno width jak i position:relative; są już wpisane w tym szablonie przy elemencie #BlogBodyBox. Może tak zostać, to bardzo dobre rozwiązanie dla tego szablonu.

Na koniec arkusza dodaję uprzednio przygotowany przykładowy kod i sprawdzam co się stało z moim menu.

Nie jest źle ale kilka rzeczy przydałoby się poprawić nieco. Z szerokością całkiem nieźle się wpasowałam. położenie też jest ok, tylko trochę przesunę całość aby była lepiej ustawiona względem obu krawędzi. Linki w tym szablonie są podkreślone więc to muszę usunąć i na koniec dodam bardzo prosty efekt wtapiania w tło po najechaniu kursorem.

#menuIkon {
 position:absolute;
 top:10px;
 right:0;
 width:177px;
}
#menuIkon a {
 text-decoration:none;
}
#menuIkon a:hover {
 opacity:0.5;
}


Na koniec pozostaje mi tylko ukryć oryginalny przycisk RSS.

#BlogRss { display:none; }

Wybrałam ten szablon jako przykład bo ma wygospodarowane miejsce nad wąską szpaltą. Wystarczy więc ukryć element tam wyświetlający się i już mam miejsce na moje ikonkowe menu. Jeżeli w twoim szablonie brak takiego miejsca to do elementów #BlogWazkaSzpalta, #SkomentujWazkaSzpalta dodaj większy górny margines albo odstęp.


Polecane notki:



sobota, 10 listopada 2012, szablonykatemac

Społecznościowo


Polecane wpisy

TrackBack
TrackBack w tym blogu jest moderowany. TrackBack URL do wpisu:
Komentarze
hudescu
2013/02/15 13:03:30
Czesc,

zaczynam dopiero przygode z blogowaniem. udalo mi sie costam ogarnac w tym cssie i z podstawowego szablonu z bloxa stworzylem cos co na razie jest ok i mi sie podoba. mam tylko pytanie o przycisk Like do Facebooka. jak to dziala? wstawilem go u siebie, ale nawet jak znajomi klikneli LIke to pozniej im sie na Wallu na FB nie wyswietla. Mozesz zerknac czy jest ok?

gotowanienaprzyjaciol.blox.pl/html

No i Dzieki Wielkie!!Twoj Blog pomogl mi niezmirnie! Pozdrawiam
-
kate_mac
2013/02/16 21:31:25
@hudescu
Prawdopodobnie wstawiłeś nie ten przycisk co trzeba. Ten, który widzę u Ciebie w bocznej szpalcie wygląda mi na zwykły "like!", taki jak jest pod notkami przykładowo. Najczęściej w bocznej szpalcie widuje się wklejki "Like Box" których kliknięcia dotyczą nie tyle strony na której wklejka jest umieszczona co facebookowego fanpage'a danej strony.
-
hudescu
2013/02/20 18:54:06
aha. dzieki. poklikam i sie moze uda zmienic. pozdrawiam i juz za kilka chwil zapraszam do sprawdzenia nowego wpisu na gotowanienaprzyjaciol. szczegolnie jesli lubisz sajgonki! :)
Follow Me on Pinterest
Related Posts Plugin for WordPress, Blogger...