Vivee - blog o grafice, webmasteringu i fotografii

Menu akordeonowe z odrobiną CSS3

agressiva — Mon, 06 Jul 2009 20:18:48 +0000

W tym artykule dowiecie się w jaki sposób stworzyć menu akordeonowe, które funkcjonuje m.in. na stronie www.apple.com. Na tej samej zasadzie działa również moje portfolio, gdzie każda zakładka działa jak osobny dział na stronie (www.waterdesign.pl).

Krok 1 – Struktura html naszej rozwijanej listy

Całe menu akordeonowe oparte jest na liście zagnieżdżonej oraz divach, w których zamieszczane są pozycje drugiego zagłębienia menu oraz ewentualna treść nie będąca listą.

Pojedyncza zakładka od strony htmlowej w naszym przykładzie wygląda następująco:

class="kategoria">

class="naglowek">class="link rss" href="#">Subscribe RSS</a></div>
class="fade">

class="text">

href="http://pl.wikipedia.org/wiki/RSS">RSS – Wikipedia</a></li>

href="http://vivee.info/2009/02/15/jak-wyizolowac-liczbe-subskrybentow-rss-korzystajac-z-feedburnera/">RSS – korzystanie z feedburnera</a></li>

href="http://dobreprogramy.pl/index.php?dz=1&t=95&Czytniki+RSS">Czytniki RSS</a></li>

Wygląd:

Pierwsza pozycja w menu (li.kategoria) jest zawsze widoczna. Elementem, który dzięki funkcji javascript będzie chowany, a po kliknieciu na li.kategoria będzie ukazywany jest ul.fade.

Całkowity kod html naszej pokazówki przestawia się tak jak widać to poniżej:

id="page">

class="kategoria">

class="naglowek">class="link rss" href="#">Subscribe RSS</a></div>
class="fade">

class="text">

href="http://pl.wikipedia.org/wiki/RSS">RSS – Wikipedia</a></li>

href="http://vivee.info/2009/02/15/jak-wyizolowac-liczbe-subskrybentow-rss-korzystajac-z-feedburnera/">RSS – korzystanie z feedburnera</a></li>

href="http://dobreprogramy.pl/index.php?dz=1&t=95&Czytniki+RSS">Czytniki RSS</a></li>

class="kategoria">

class="naglowek">class="link facebook" href="#">Facebook</a></div>
class="fade">

class="text">

href="http://www.facebook.com/">Facebook – Main Page</a></li>

href="http://www.facebook.com/">Facebook – Rejestracja</a></li>

href="http://www.facebook.com/pages/create.php">Facebook – Stwórz swoją stronę</a></li>

class="kategoria">

class="naglowek">class="link technorati" href="#">Technorati</a></div>
class="fade">

class="text">

href="http://technorati.com/">Technorati – Main Page</a></li>

href="http://technorati.com/technology/">Technorati – Technology</a></li>

href="http://technorati.com/technology/it/">Technorati – IT</a></li>

class="kategoria">

class="naglowek">class="link twitter" href="#">Twitter</a></div>
class="fade">

class="text">

href="http://twitter.com/">Twitter – Main Page</a></li>

href="https://twitter.com/signup">Twitter – Join</a></li>

href="https://twitter.com/viveeinfo">Vivee na Twitterze</a></li>

class="kategoria">

class="naglowek">class="link vimeo" href="#">Vimeo</a></div>
class="fade">

class="text">

href="http://vimeo.com/">Vimeo – Main Page</a></li>

href="http://vimeo.com/join">Vimeo – Join</a></li>

href="http://vimeo.com/upload/video">Vimeo – Upload</a></li>

Niektóre dodatkowe klasy w htmlu zostały tutaj wprowadzone celowo w celu upiększeń poszczególnych zakładek pierwszego poziomu. Także na klasy typu "twitter", "vimeo", itp w swoich wersjach menu akordeonowego nie musicie zwracać uwagi (chyba, że tak jak tutaj chcecie aby każda zakładka miała inny kolor, ikonkę, itp).

Upiększanie menu, czyli struktura CSS

Jak łatwo jest się domyślić każdy kod CSS, który decydować będzie o wyglądzie może być inny.

* {
padding:0;
margin:0;
}

img {
border:0;
}

body {
background:#f4f3ef;
text-align:center;
}

#page {
width:800px;
text-align:left;
margin:0 auto;
}

#page ul {
list-style-type:none;
width:100%;
padding:20px 0 0 0;
}

ul ul {
background:url(img/tlo.png);
padding:0!important;
}

li {
font:22px "Trebuchet MS", Tahoma, Arial, Helvetica, sans-serif;
word-spacing:3px;
vertical-align:middle;
}

div.text {
width:780px;
padding:10px;
line-height:20px;
text-align:justify;
font:11px Tahoma, Arial, Helvetica, sans-serif;
letter-spacing:1px;
color:#7a7a7a;
background:url(text.png) repeat-x top;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}

div.text p {
margin:0 0 10px 0;
}

div.text ul {
list-style-type:none;
}

div.text ul li {
font:12px Helvetica, Tahoma, Arial, Geneva, sans-serif!important;
margin:2px 0!important;
}

div.text ul li a {
color:#585858;
font-weight:bold;
text-decoration:none;
}

div.text ul li a:hover {
color:#08a2b9;
}

.kategoria a.link {
display:block;
width:780px;
padding:22px 0 5px 20px;
font:22px "Trebuchet MS", Tahoma, Arial, Helvetica, sans-serif;
font-weight:bold;
color:#fafafa;
text-decoration:none;
margin:0 0 2px 0;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
height:47px;
text-shadow: 1px 1px 1px #5d5d5d;
}

.kategoria a.link:hover {
color:#ffffff;
text-decoration:none;
}

Całkowita szerokość zakładek i zawartości, która się pojawia po kliknięciu na nie uzależiona jest od od diva w jakim się znajduje czyli od diva #page. Ma on nadaną konkretną szerokość i wyśrodkowany jest on względem okna przeglądarki.

Odrobina CSS3

CSS3 niestety na obecną chwilę nie jest jeszcze obsługiwany przez wszystkie przeglądarki internetowe. Te, które radzą sobie z nim całkiem sprawnie to:

Firefox (od wersji 3 w górę)
Google Chrome
Safari
Opera (wersja 9.64 obsługuje zaledwie kilka możliwości jakie daje nam CSS3)

W menu akordeonowym zostały wykorzystane takie efekty jak:
1. Cień pod napisem

text-shadow: 1px 1px 1px #5d5d5d;

2. Zaokrąglone rogi

-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;

Efekt końcowy zabawy htmlowo-cssowej podejrzeć można w wersji Demo

jQuery

Do w pełni działajacych zakładek brakuje nam jeszcze podłączenie odpowiednich skryptów JS.
W sekcji należy zamieścić odnośnik do jQuery:

type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

oraz skrypt, z funkcją dzięki której zakładki zachowują się zgodnie z naszymi założeniami.

type="text/javascript" src="js/menu.js"></script>

Nasz skrypt, który decyduje o pojawianiu się i znikaniu zawartości wygląda następująco:

$(document).ready(function() {
$("ul.fade").not(":first").hide();
$("a.link").click(function(){
$(".fade:visible").hide();
$(this).parent().next(‘.fade’).fadeIn();
return false;
});
});

gdzie:

$("ul.fade).not(":first").hide();

Po wczytaniu skryptu ukrywa nam wszystkie podtreści zakładek poza pierwszą, która zawsze będzie pokazana i tym samym sugeruje userom, że kliknięcie w następną zakładkę pokaże się jej zawartość.

$(".fade:visible").hide();

Zagnieżdżone ul o klasie .fade będzie ukazywane po wcześniejszym kliknięciu na a.link.
Nadanie klasy pojawiającemu się ul dodatkowo zabezpiecza nas przed sytuacją kiedy w treści mamy następne ul i nie chcemy aby one dziedziczyły to zachowanie.

Został również zastosowany efekt fadeIn dla pojawiających się zawartości menu.

$(this).parent().next(‘.fade’).fadeIn();

Więcej o fade’ach przeczytać możecie w artykule: “FadeIn, fadeOut, fadeTo – czyli o pojawianiu się i znikaniu”.

Jeżeli chcemy aby zawartość pojawiała się nam po najeździe na zakładkę, a nie dopiero po kliknięciu należy w tym fragmencie js’a

$("a.link").click(function(){

podmienić click na hover:

$("a.link").hover(function(){

Hover sprawi, że menu to zachowywać się będzie identycznie jak to zamieszczone na www.apple.com.

Jeszcze jednym efektem dla urozmaicenia wyglądu tego menu jest zwiększenie krycia po najechaniu kursorem na .kategoria a.link.

$(".kategoria a.link").fadeTo("fast", .8);
$(".kategoria a.link").hover(function(){
$(this).fadeTo("fast", 1);
},function(){
$(this).fadeTo("fast", .8);
});

Tym sposobem tak oto wygląda całkowity kod JS, który przyczynia się do ozywienia menu akordeonowego:

$(document).ready(function() {
$("ul.fade").not(":first").hide();
$("a.link").click(function(){
$(".fade:visible").hide();
$(this).parent().next(‘.fade’).fadeIn();
return false;
});

$(".kategoria a.link").fadeTo("fast", .8);
$(".kategoria a.link").hover(function(){
$(this).fadeTo("fast", 1);
},function(){
$(this).fadeTo("fast", .8);
});

});

W taki sposób przestawia się tworzenie akoreonowego menu,
mamy nadzieje, że artykuł ten okaże się dla Was pomocny.

Inspirujące strony www – czerwiec 2009

agressiva — Fri, 03 Jul 2009 07:33:08 +0000

Oto kolejna kolekcja inspirujących stron www, które wzbudziły nasze zainteresowanie pod wzgledem graficznym i funkcjonalnym w czerwcu 2009r.

www.freelanceswitch.com

www.favable.com

www.sketchen.com

www.sprechblase.lokalisten.de

www.zologicka.cz

www.quraninteractive.com

www.dailyrt.com

www.laventanadeldiseno.es

www.skillicorn.org

www.mbdragan.com

www.foodincmovie.com

www.bushtheatre.co.uk

www.biobabybett.de

www.bikevasion.com

www.orcabayseafoods.com

Polecane strony

palmiak — Wed, 24 Jun 2009 19:58:08 +0000

Mamy nową zabawczkę w postaci delicious. Wymyśliliśmy sobie, że dzięki temu będziemy zbierać sobie ciekawe stronki i dzielić się z Wami tym co znaleźliśmy. Póki co kolekcja jest skromna, ale będzie rosnąć w miarę surfowania.

Dodatkowo zachęcamy Was do podsyłania nam różnych znalezisk. Najlepiej poprzez formularz znajdujący się na stronie.

Jeżeli ilość stron będzie wystarczająca to możecie się spodziewać nowej, comiesięcznej serii.

Stronki możecie obejrzeć bezpośrednio na naszej delicjowej stronie, z boku każdej podstrony na vivee lub na wydzielonym ku temu kąciku na vivee.

Query_posts, czyli jak ujarzmić loopa część 2.

palmiak — Mon, 22 Jun 2009 18:44:25 +0000

Po dość długiej przerwie czas dokończyć tematykę query_posts. W pierwszej części nauczyliśmy się jak wybierać wg. kategorii czy typie wpisu. Tym razem zajmiemy się tagami oraz polami użytkownika.

Najbardziej prymitywnym będzie wyświetlenie wszystkich wpisów opisanych tagiem “vivee”. Żeby to zrobić jako argumentów query_posts używamy 'tag=vivee'.

W momencie gdy chcemy wyszukać wpisów określonych tagiem ‘vivee’ lub ‘telefon’ korzystamy z 'tag=vivee,telefon'. Kiedy lub nas nie satysfakcjonuje i potrzebujemy i wtedy tagi rodzielamy za pomocą plusa, czyli 'tag=vivee+telefon'.

Na wszelki wypadek wytłumaczę różnicę między ‘i’ oraz ‘lub’, gdyż w mowie potocznej słowa znaczą to samo (co dość zaciemnia obraz). Wyobraźmy sobie, że mamy 5 wpisów, każdy określony jakimiś tagami:

vivee, palmiak, agrest
agnieszka, marmolada, vivee
śmierć, kable
agrest, wiśnia, vivee
vivee, poziomka

w momencie gdy będziemy szukać po vivee lub agrest pojawią się nam wpisy 1,2,4,5. Czemu? Bo w każdym z nich pojawił się chociaż jeden tag spełniający warunek. Wynikiem poszukiwań po vivee i agrest będzie już tylko pierwszy wpis, gdyż jest on jedynym w którym są oba poszukiwane przez nas tagi.

Pola użytkownika

Jeżeli ktoś nigdy nie korzystał z pól użytkownika (custom fields) lub zapomniał co się z tym robi zapraszam do naszego starego tutka lub na WPNinja.

Wpisy możemy wyszukiwać po tym czy dany klucz występuje, czy któryś klucz ma przypisaną odpowiednią wartość oraz czy dany klucz ma przypisaną odpowiednią wartość.

Jeżeli chcemy uzyskać wszystkie wpisy w który użyte zostało pole nazwane “obrazek” to piszemy meta_key=obrazek. Nie jest ważne co jest wartością tego pola, ważne, że ono występuje. Przydatne jest to wtedy gdy na głównej stronie chcemy pokazać tylko wpisy opatrzone obrazkiem.

Przeciwieństwem tego wyszukiwania jest meta_value=vivee. Wypisane zostaną wtedy tylko wpisy z kluczem o wartości vivee. Nie jest ważne czy wystąpi to w polu np. obrazek czy link zewnętrzny czy jeszcze jakimś innymi. Osobiście przyznam, że nie jestem w stanie wymyślić zastosowania do tego. Może mi podpowiecie.

Wypadało by to teraz połączyć, czyli meta_key=obrazek&meta_value=vivee. Po zastosowaniau czegoś takiego naszym oczom powinny się ukazać wpisy które posiadają pole obrazek i wartość tego pola to vivee.

Pozostaje kwestia co zrobić gdy chcemy wyszukać wpisy w których występuje pole obrazek i jego wartość jest różna od vivee. Wtedy stosujemy meta_compare, czyli sposób porównywania wartości. Do wyboru mamy następujące opcje:

== – równe (wartość domyślna)
!= – różne
> – większe
>= – większe równe
< - mniejsze
<= -mniejsze równe

Wracając do przykładku z obrazkiem różnym od vivee – meta_key=obrazek&meta_compare=!=&meta_value=vivee. Albo załóżmy, że mamy pole priorytet i w nim podajemy ważność wpisu w skali od 1 do 10. Na stronie głównej chcemy podawać tylko te najważniejsze (czyli o priorytecie większym niż 7). Żeby to uzyskać stosujemy meta_key=priorytet&meta_compare=>&meta_value=7.

Podsumowanie

I tak oto zakończyliśmy ten radosny dwuczęściowy artykuł. Używanie query_posts nie powinno Wam już sprawiać problemów. W razie problemów piszcie w komentarzach.

20 darmowych skór do Wordpressa

agressiva — Fri, 19 Jun 2009 13:42:45 +0000

Oto dwadzieścia jednych z najładniejszych Skór do Wordpressa w sieci.

Futura

The Morning After

Elegance

Elegant Grunge

Androida

BlogTheme

SohoMag

WPESP

BlackPower

GrungeD

Color Paper

Curious

Portfolio Wordpress Theme

Wordpress Fun

FREEmium

ModernOak

Masinop

Meta-Morphosis

DeStyle

Irresistible

Zapomnij o IE6!

JaRo — Wed, 17 Jun 2009 11:11:55 +0000

Internet Explorer 6 – czyli popularnie zmora webmasterów.

Wielu z Was ma już zapewne dość ‘użerania się’ z ie6, który mimo upływu czasu, aktualizacji i nowych lepszych wersji nie odszedł wcale w zapomnienie. Według Ranking.pl aż 31.6% polskich internautów wciąż korzysta z Internet Explorer 6.

Osobiście postanowiłem zerwać stosunki z wyżej wymienionym delikwentem i zmusić odwiedzających moją stronę do zmiany przeglądarki na nowszą, lepsza (niepotrzebne skreślić).

Zrobiłem to w bardzo prosty sposób

Każdą osobę posiadającą Internet Explorer 6 w momencie wejścia na moją stronę spotka miła niespodzianka…

I takim sposobem internauta musi (jeżeli oczywiście chce obejrzeć moją stronę) uaktualnić lub zmienić przeglądarkę.

Jak to wygląda od strony kodu?

1. Pierwszym krokiem jest umieszczenie w źródle naszej strony odpowiednich komentarzy warunkowych.

Poniższy kod umieszczamy w sekcji i co ważne koniecznie poniżej stylu naszej strony!

Poniższy kod umieszczamy przed tuż przed zamknięciem .