[PHP /JS / Flash] Beste manier om menu te genereren

[Reveller]

Ik ben bezig met een website voor een freelance jurist. De achtergrond heeft een gradient die naar onderen toe steeds lichter wordt. Hierop wil ik een dropdown menuutje maken. Opzich geen probleem, maar ik wil dat het er precies zo uitziet als in de Photoshop screenshot hierboven. Na wat onderzoek kwam ik erachter dat dat op verschillende manieren kan:

• meest voor de hand liggend: van elk menu item een gifje maken in Photoshop
• gifjes maken van het alfabet, en client- of serverside letters door plaatjes vervangen
• sIFR, frontenders wellicht bekend
• FIR
• ?

Zelf de plaatjes in Photoshop maken geniet de voorkeur, want later moet het menu via een cms'je makkelijk uit te breiden / aan te passen zijn.

Mijn vraag is of jullie ervaring hebben met deze verschillende image replacement technieken en welke (om welke redenen) de voorkeur geniet. Ook: zijn er alternatieven die ik nog niet tegengekomen ben?

N.B: natuurlijk moet elk menu item een actieve (donkere kleur) en actieve (onmouseover, geselecteerd) lichte kleur hebben.

Omdat het een optie is de plaatjes server-side te genereren, heb ik het topic in /14 geplaatst ipv. in /13

[Ch3cker]

Vraagje: Waarom wil je het überhaupt met plaatjes doen en niet met tekst?

Naar mijn inzien kan je dit beter in flash doen trouwens.

[Verwijderd]

Reveller schreef op dinsdag 11 november 2008 @ 19:23:
[afbeelding]

Ik ben bezig met een website voor een freelance jurist. De achtergrond heeft een gradient die naar onderen toe steeds lichter wordt. Hierop wil ik een dropdown menuutje maken. Opzich geen probleem, maar ik wil dat het er precies zo uitziet als in de Photoshop screenshot hierboven. Na wat onderzoek kwam ik erachter dat dat op verschillende manieren kan:

• meest voor de hand liggend: van elk menu item een gifje maken in Photoshop
• gifjes maken van het alfabet, en client- of serverside letters door plaatjes vervangen
• sIFR, frontenders wellicht bekend
• FIR
• ?

Zelf de plaatjes in Photoshop maken geniet de voorkeur, want later moet het menu via een cms'je makkelijk uit te breiden / aan te passen zijn.

Mijn vraag is of jullie ervaring hebben met deze verschillende image replacement technieken en welke (om welke redenen) de voorkeur geniet. Ook: zijn er alternatieven die ik nog niet tegengekomen ben?

N.B: natuurlijk moet elk menu item een actieve (donkere kleur) en actieve (onmouseover, geselecteerd) lichte kleur hebben.

Omdat het een optie is de plaatjes server-side te genereren, heb ik het topic in /14 geplaatst ipv. in /13

Ik zou het mooi doen met het Suckerfish dropdown menu (100% css in de meeste browsers, IE heeft een klein javascriptje nodig) met gegenereerde PNGtjes (eventueel serverside scriptje maken om snel te genereren ) icm de Sliding doors methode of een javascript rollover.

[Reveller]

Ch3cker schreef op dinsdag 11 november 2008 @ 19:26:
Vraagje: Waarom wil je het überhaupt met plaatjes doen en niet met tekst?

Naar mijn inzien kan je dit beter in flash doen trouwens.

Omdat je met tekst nooit die "zachte randjes" krijgt (anti-aliased?). "HOME" uit het menu is Times New Roman...moet je dat in gewone tekst doen, dan ziet het er veel minder mooi uit imho...veel te "scherp".

[Ch3cker]

Reveller schreef op dinsdag 11 november 2008 @ 19:34:
[...]

Omdat je met tekst nooit die "zachte randjes" krijgt (anti-aliased?). "HOME" uit het menu is Times New Roman...moet je dat in gewone tekst doen, dan ziet het er veel minder mooi uit imho...veel te "scherp".

Weet eerlijk gezegd niet of het kan, maar daar zal CSS vast wel uitkomst kunne bieden.
Maar waarom doe je dit niet in flash?

[crisp]

Reveller schreef op dinsdag 11 november 2008 @ 19:34:
[...]

Omdat je met tekst nooit die "zachte randjes" krijgt (anti-aliased?). "HOME" uit het menu is Times New Roman...moet je dat in gewone tekst doen, dan ziet het er veel minder mooi uit imho...veel te "scherp".

ClearType/Font Smoothing is toch standaard tegenwoordig. Als dit gewoon standaard Times is zou ik niet met plaatjes gaan lopen klooien.

Ch3cker schreef op dinsdag 11 november 2008 @ 19:37:
[...]


Weet eerlijk gezegd niet of het kan, maar daar zal CSS vast wel uitkomst kunne bieden.
Maar waarom doe je dit niet in flash?

Misschien omdat dat niet nodig is en minder toegankelijk?

Verwijderd schreef op dinsdag 11 november 2008 @ 19:33:
[...]

Ik zou het mooi doen met het Suckerfish dropdown menu (100% css in de meeste browsers, IE heeft een klein javascriptje nodig)

CSS is niet voor behaviour. Suckerfish is imo absoluut een verkeerde toepassing van CSS.

[ Voor 42% gewijzigd door crisp op 11-11-2008 19:40 ]

[Verwijderd]

crisp schreef op dinsdag 11 november 2008 @ 19:38:

[...]

CSS is niet voor behaviour. Suckerfish is imo absoluut een verkeerde toepassing van CSS.

Mjah in dat geval breekt je hele menu in alle browsers wanneer Javascript uitstaat, terwijl enkel door wat van die behaviour naar je CSS te verplaatsen je je site normaal kunt laten werken zonder Javascript.
Tuurlijk kan CSS óók uit staan maar in dat geval zal een standaard uitgevouwen menu niet zo'n probleem zijn, alles ziet er al lelijk uit.

[crisp]

Hier overigens een snelle impressie in IE wanneer ClearType aanstaat (ik heb fontsmoothing overigens globaal uitstaan op mijn PC):


uiteraard is eea afhankelijk van OS/browser en instellingen, maar web is natuurlijk geen print

Verwijderd schreef op dinsdag 11 november 2008 @ 19:53:
[...]

Mjah in dat geval breekt je hele menu in alle browsers wanneer Javascript uitstaat, terwijl enkel door wat van die behaviour naar je CSS te verplaatsen je je site normaal kunt laten werken zonder Javascript.
Tuurlijk kan CSS óók uit staan maar in dat geval zal een standaard uitgevouwen menu niet zo'n probleem zijn, alles ziet er al lelijk uit.

Of en wat er 'breekt' is geheel afhankelijk van de opzet van je navigatie. Het grootste nadeel van CSS misbruiken voor menu's vind ik dat de transitie van open naar dicht en vice versa totaal ongereguleerd is. Met javascript kan je dat veel genuanceerder en dus gebruiksvriendelijker regelen en bijvoorbeeld ook makkelijker om te bouwen naar bijvoorbeeld 'click to activate' ipv onhover.

[ Voor 4% gewijzigd door crisp op 11-11-2008 20:20 ]

[Reveller]

crisp schreef op dinsdag 11 november 2008 @ 20:17:
[...] uiteraard is eea afhankelijk van OS/browser en instellingen [...]

Dat is dan ook mijn grootste probleem: als het er bij iedereen uit zou zien als in jouw plaatje, zou ik het met gewone tekst doen. Als cleartype echter uit staat, ziet het er meteen heel goedkoop uit - "my first frontpage site" of zoiets...

[...] Als dit gewoon standaard Times is zou ik niet met plaatjes gaan lopen klooien. [...]

Dat is dan geluk hebben. Maar beschouw het probleem dan algemener. Stel dat er binnenkort en geval is van een site die een niet-standaard lettertype gebruikt, wat doe je dan? (Ik heb bv. een tijdje terug een website gebouwd met font "Minima" voor headings, omdat de klant dat wilde (Minima werd ook in hun logo gebruikt))

[crisp]

Reveller schreef op dinsdag 11 november 2008 @ 20:42:
[...]

Dat is dan ook mijn grootste probleem: als het er bij iedereen uit zou zien als in jouw plaatje, zou ik het met gewone tekst doen. Als cleartype echter uit staat, ziet het er meteen heel goedkoop uit - "my first frontpage site" of zoiets...

Tsja, maar dat is dan de keus van de gebruiker toch?

[...]

Dat is dan geluk hebben. Maar beschouw het probleem dan algemener. Stel dat er binnenkort en geval is van een site die een niet-standaard lettertype gebruikt, wat doe je dan? (Ik heb bv. een tijdje terug een website gebouwd met font "Minima" voor headings, omdat de klant dat wilde (Minima werd ook in hun logo gebruikt))

Ik raad het gebruik van non-standaard fonts gewoonweg af. Web is geen print en totdat ondersteuning voor het embedden van andere fonts via CSS gemeengoed is stel ik functie boven vorm.