Archief - Voorbeeld menu mogelijk met puur CSS?

Yo,

Na de examens ga ik mij eens bezig houden met een nieuwe site.
Voorlopig ben ik al wat aan het rondkijken voor ideeën en kennis.

Ik kan al goed overweg met ASP.Net, en momenteel ga ik mij in php verdiepen.

Op de site van de International PHP Conference kwam ik een mooi navigatie menu tegen.
Nu vraag ik mij af of dat menu volledig in css te maken is?

Alvast bedankt.

Als je de menu bedoelt met het dropdown gedeelte dan heb je hier volgens mij toch ook javascript voor nodig. Css is eigenlijk een statische taal die zorgt voor opmaak. Naar mijn weten kan deze niet zorgen voor het dropdown effect. Correct me if i'm wrong.

Groetjes

Ah bedankt voor de reactie, zelf gebruik ik altijd javascript voor het dynamisch gedeelte. Wordt dit soort van menu's dan veel gebruikt ? Heb er eigenlijk nog nooit van gehoort.

Bij een site waar ik wat aan lig te prutsen ben heb ik toch iets gelijkaardig gedaan enkel met css maar dan met een verticaal menu. Voorlopig resultaat kan je zien op Stupidsite v0.1

Metropolice zei:

Ah bedankt voor de reactie, zelf gebruik ik altijd javascript voor het dynamisch gedeelte. Wordt dit soort van menu's dan veel gebruikt ? Heb er eigenlijk nog nooit van gehoort.

Klik om te vergroten...

Ik gebruik het zelf ook maar heel zelden. Het voorbeeld dat topicstarter aanhaalt is wel een heel proper menu!

Idd knap gemaakt moet ik zeggen. Maar op het eerste zicht ga ik toch bij javascript blijven denk ik. Mocht een klant hier echt op staan dan kan ik daar nog wel eens gaan kijken.

Metropolice zei:

Idd knap gemaakt moet ik zeggen. Maar op het eerste zicht ga ik toch bij javascript blijven denk ik. Mocht een klant hier echt op staan dan kan ik daar nog wel eens gaan kijken.

Klik om te vergroten...

En mensen die dan geen javascript ingeschakeld hebben krijgen geen sub-items te zien. Dit kan je perfect met CSS oplossen, op een vrij eenvoudige manier zelfs. Bovendien open je door de extra javascript (die je uiteraard niet inline plaatst, maar in een externe file) een extra http request, wat de performantie van je site niet bepaald ten goede komt.

De gouden regel is: zorg dat alles 100% werkt zonder javascript, voeg dan javascript toe voor extra eye-candy/behaviour...

Ik denk dat het menu dat jij aanhaalt vrij moeilijk na te maken is, puur met css. Ook zal meestal wel met wat browserhack moeten werken.

Rap iets in elkaar geflatst (met css en html): Menu voorbeeld

Xavez zei:

Rap iets in elkaar geflatst (met css en html): Menu voorbeeld

Klik om te vergroten...

Nice :applause:

Idd knap gemaakt, ik wist niet dat je dit allemaal met css kon doen. Ga hier eens een beetje meer over opzoeken.

Xavez zei:

De gouden regel is: zorg dat alles 100% werkt zonder javascript, voeg dan javascript toe voor extra eye-candy/behaviour...

Klik om te vergroten...

Das toch een regel die hier nooit, maar dan ook nooit toegepast wordt bij websites/webapplicaties. In jan 2008 had 95% javascript aanstaan. Ik schat dat dit nu rond 98% is. En dan nog. Die 2% kan 99% van websites niet bekijken en is dus niet bepaald een webdoelgroep te noemen.

JavaScript is denk ik inderdaad niet meer weg te denken in deze tijd (XML via DOM, JSON, JQuery, AJAX,...) zolang het niet gebruikt wordt voor dingen als statusbalk change enzo natuurlijk

Maar moest ik mogen kiezen tussen hetzelfde menu met JavaScript of CSS zou ik denk ik toch voor CSS kiezen, sneller?

Bigbuddha zei:

Das toch een regel die hier nooit, maar dan ook nooit toegepast wordt bij websites/webapplicaties. In jan 2008 had 95% javascript aanstaan. Ik schat dat dit nu rond 98% is. En dan nog. Die 2% kan 99% van websites niet bekijken en is dus niet bepaald een webdoelgroep te noemen.

Klik om te vergroten...

Dan is dat een kwestie van instelling denk ik. Als je het kan vermijden, waarom dan niet? Waarom extra processing power/bandwidth in beslag nemen met JavaScript? Okay, voor kleine sites doet dat weinig ter zake, maar het is meer de achterliggende idee die belangrijk is, denk ik.

Laag 1: structurele markup
Laag 2: esthetiek
Laag 3: extra behaviour

Laag 1 moet altijd en overal werken, laag 2 en laag 3 moeten eigenlijk perfect kunnen wegvallen. En dan is er imo nog een hiërarchie tussen laag 2 en laag 3, omdat laag 2 een blinde er niet van weerhoudt om een site te bezoeken/lezen, maar laag 3 in dit geval bijvoorbeeld wel--tenzij ze als "extra laag" voorzien wordt en alles functioneel is zonder deze laag.

Xavez zei:

Dan is dat een kwestie van instelling denk ik. Als je het kan vermijden, waarom dan niet? Waarom extra processing power/bandwidth in beslag nemen met JavaScript? Okay, voor kleine sites doet dat weinig ter zake, maar het is meer de achterliggende idee die belangrijk is, denk ik.

Laag 1: structurele markup
Laag 2: esthetiek
Laag 3: extra behaviour

Laag 1 moet altijd en overal werken, laag 2 en laag 3 moeten eigenlijk perfect kunnen wegvallen. En dan is er imo nog een hiërarchie tussen laag 2 en laag 3, omdat laag 2 een blinde er niet van weerhoudt om een site te bezoeken/lezen, maar laag 3 in dit geval bijvoorbeeld wel--tenzij ze als "extra laag" voorzien wordt en alles functioneel is zonder deze laag.

Klik om te vergroten...

't Ja, als dat het geval zou zijn waren we nu nog met tamtam's aan't communiceren. Als wij niet vooruit gaan(css3, as3, HTML 5) in techniek blijven de gebruikers ook ter plaatse staan natuurlijk. De keuze in hoever je de techniek al dan niet drijft hangt uiteraard van je doelgroep af.

Sorry. Ik denk dezer dagen wat minder in lagen tenzij het lasagne is.

ik gebruik bijna ALTIJD css menu's. kun je zoveel mee... en GEEN javascript . Ideaal toch?
dat menu van op die site , kun je zeker ook makkelijk gaan maken met css.

@Bigbuddha
Maar waarom zou je van de mogelijkheid geen gebruik maken, als ze er is? Dat heeft weinig met vooruitgang te maken. Dat je IE6 niet meer vlekkeloos pixel-perfect moet ondersteunen, akkoord, maar de basisfunctionaliteit van je site wil je toch onder alle omstandigheden behouden, of niet? De enige moeite die dat kost is een kleine switch in je hoofd om op een meer zinvolle manier met de verschillende talen om te gaan. Dat een menu geen fade-in heeft in bepaalde browsers, maakt niet zo veel uit. Maar dat je menu niet zichtbaar is als javascript is uitgeschakeld kan je perfect vermijden.

Ik vergelijk het met autorijden zonder gordel of airbag: 98% van de keren dat je gaat rijden maakt het geen verschil, vaak is het zelfs comfortabeler en zonder die opties zou je auto ongetwijfeld goedkoper zijn. Tot je in een ongeval terecht komt. Als je dingen kan vermijden is het meestal luiheid, domheid of onwetendheid die ervoor zorgen dat ze niet vermeden worden. En dat vind ik héél erg jammer.

Leuk analogieën

De werking van die gordels en airbags zijn de afgelopen 30 jaar ook geëvolueerd. Gelukkig maar. Als je met je oldtimer wil genieten van dezelfde huidige veiligheidsnorm stel ik voor dat je upgrade naar betere gordels/airbags of je koopt een nieuwe wagen waar deze geëvolueerde gordels/airbags wel behoren tot de basisfunctionaliteit. Wil je niet genieten van de ondertussen tot de basisfunctionaliteit horende gordels/airbag loopt zo'n ongeval in de meeste gevallen slechter af. Maar dat weet je op voorhand.

Als we niet innoveren gaan we niet evolueren.

Zo kunnen we blijven discussiëren natuurlijk, je draait mijn vergelijking om . Ik denk dat het probleem deels ligt in onze perceptie van de huidige situatie. Wat mij betreft is JavaScript (en flash en silverlight en...) een leuke toevoeging, maar zeker nog geen essentiële taal--en dat is al zo relatief natuurlijk. Tot nader order is HTML nog steeds in meer gevallen "leesbaar" dan CSS en CSS in meer gevallen dan JavaScript.

Twee andere vergelijkingen: 98% van de bussen rijdt zonder gehandicapten aan boord. Toch zijn er voorzieningen voor gehandicapten, gewoon omdat het mogelijk is. Ongeveer hetzelfde geldt voor ontwerpen van gebouwen: je kan als architect beslissen om plaats te besparen en alleen nog maar een lift te bouwen. Leuk, 98% van de tijd werkt die lift perfect. En dan valt de lift op een dag uit en wordt heel je gebouw onbruikbaar.

Ik vind het een niet meer dan normaal aspect van good design (gebouwen, producten, grafische ontwerpen, e.a.) dat je rekening houdt met zoveel mogelijk situaties. Als ik een folder ontwerp als grafisch ontwerper, hou ik ook rekening met het feit dat misschien mensen met bijvoorbeeld dichromatopsie die folder te zien krijgen--fyi, ongeveer 2% van de mensen hebben dit, even "verwaarloosbaar" als het aantal mensen zonder javascript dus.

Het is in mijn ogen belangrijk om met de geschiedenis van design rekening te houden--zonder innovatieve ideeën in de weg te staan, natuurlijk. Materialen in de bouwkunde, mogelijkheden met lettertypes, ... ze zijn vandaag de dag allemaal veel uitgebreider dan 50 jaar geleden, maar toch zijn er nog een aantal basisprincipes van enkele eeuwen geleden geldig. Geschiedenis is een belangrijk aspect van design, een aspect dat je volgens mij niet zomaar overboord mag gooien ten voordele van innovatie.

Laat me het anders stellen: ik vind dat ieder project individuele evaluatie verdient. En dat de mensen die dit meelezen minstens horen te weten dat het ook met CSS kan. Persoonlijk zal ik mijn functionaliteit altijd eerst testen zonder css en javascript en nadien een grafische schil en extra functionaliteit toevoegen. Maar hey, ieder zijn opvatting natuurlijk!