Új fejléc és menü

Már jócskán megérett az ideje, hogy a honlapomon lecseréljem az elavult és egyáltalán nem odaillő fejlécemet. A névjegyem designjából jött az ötlet, hogy a logóból szétszéledő körökbe akár a honlapom menüjét is bele lehetne építeni. A blogom olvasói számára Orsi gyanítom nem lesz ismeretlen, ő tervezte a blogom logóját ill. a névjegyemet is. További ötletes munkái a designblogján tekinthetőek meg. Orsival tovább értekeztünk a fejléc-menü tervekről, majd végül tegnap felkerült a végleges menüváltozat a honlapomra. Remélem, nektek is elnyeri a tetszéseteket.

új fejléc beleépített menüvel a honlapomon

S egy kis technikai háttér: A fejlécmenü honlapomba való belebarkácsolása során igyekeztem továbbra is mindent tisztán CSS-sel, javascript nélkül megoldani. Több ötletet is kipróbáltam a buborékok megjelenítésére, de mindegyik vagy csak Firefoxban, vagy csak Internet Explorerben működött. Ha esetleg valaki hasonló menüt tervezne tisztán CSS-sel, akkor itt van néhány tipp:

• Az alaptrükk annyi, hogy az üres és a teljesen kitöltött képet egymás alatt egy képpé raktam össze (lehet persze egymás mellett is). Ezáltal nem kell várni a kis képek utántöltésére, hanem az oldal betöltésekor lementődik a teljes kép a böngészőbe. A megjelenítendő képméret pontos megadásával szabályozható, hogy csak a buborékmentes üres fejléckép jelenjen meg. Ezután már csak az egyes képkivágások koordinátáit kell megadni az egyes menüelemekhez (ezeknek mind külön saját nevet kell adni). A kivágások lehetőleg ne fedjék egymást és csak téglalap alakúak lehetnek - más alakzatokhoz transzparens gif képekkel kell dolgozni.
• A menü elemei szöveges alakban is benne vannak az oldalban (hogy pl. Google is megértse és tudja követni), ezeket írom felül képekkel, ill. display:none beállítással arra kérem a böngészőket, hogy a szöveges tartalmat ne jelenítsék meg.
• Abszolút elhelyezés (position:absolute) lett volna a legegyszerűbb az egyes buborékok pozicionálására, Internet Explorerben szépen működött is, Firefoxban viszont sajnos nem. Úgy tűnik, hogy ha vízszintesen vagy függőlegesen még egy további képdarab is elhelyezkedik (pl. "kezdőlap" és "rólam" menüpontok), akkor csak az utóbbi képdarabot képes betölteni a Firefox. Erre sajnos nem is sikerült kiutat találnom.
• Relatív elhelyezésnél (position:relative) valamilyen okból mindig néhány pixellel el voltak csúszva az egyes képelemek Internet Explorerben. Sehol nem láttam már lehetőséget ennek a kiküszöbölésére, mikor olyan ötletem támadt, hogy - az egyébként nem megjelenített (ld. fentebb) - menü szöveges elemeinek a betűméretét nullára teszem. Meglepő módon ez volt végül a megoldás...

Jelenleg aktuális verziójú Firefoxban, Internet Explorerben, Opera-ban, Chrome-ban és Safariban teszteltem, s mindenhol gond nélkül működött az új menü. A böngészők gyorsítótárába lementett adatok felülírása miatt esetleg szükség lehet egy "shift billentyű + oldal újratöltése" műveletre. Ha esetleg valakinek gondja lenne a menü használatával, akkor kérem jelezze.