CSS vraagje

[Verwijderd]

Ik wil weer eens een website maken voor de lol/hobby/tijd verprutsing. Maar zoals altijd wil ik het als kansloze n00dle toch elke keer beter doen. Dus ik bekijk eerst eens wat website lay-outs, en probeer te bedenken wat ik nu eigenlijk wil maken. Nu kwam ik een mooie menubalk tegen, die waarschijnlijk in flash gemaakt was. (die hele site leek flash, al was het een printscreen die ik zag, de site zelf was nergens meer te vinden)

Flash, nou daar begin ik dus niet aan. Met in-frames, lompe tabellen, frontpage2003 en wat php kennis, kom ik al een heel eind, maar daar "leer" ik niets nieuws van. Eens op zoek naar voorbeeld code voor "vergelijkbare" menu's. En ik kwam dus uit op CSS, en dat leek me precies wat ik nodig had, qua grafische gedeelte. Maarrr...

Ik wil dus een 2 zijdig drop-down menu hebben, in flash. 1 drop-down menu dat mooi ontrolt aan de onderkant, en 3 boven de oorspronkelijke knop. Heb met de nodige kansloze inspanningen icm trail & error de benodigde kennis op gedaan, om het script toch redelijk te manipuleren. Maar nu zit ik dus behoorlijk vast. 1 button naar onderen laten zakken, werkt prima. Naar boven rollen werkt ook... ongeveer... De buttons rollen netjes van onder naar boven, maar wel onder/over de oorspronkelijke knop. En ik heb dus 2 oorspronkelijke knoppen. Ze op elkaar plaatsen, bleek ook al geen effect te hebben.

Wie o wie snapt de probleemstelling, en wil de tijd/energie erin stoppen, om "mijn" code goed te krijgen.

http://cssdeck.com/labs/liou7dwd

*PS: aan flamen enzo heb ik niet veel.

[TERW_DAN]

Je wilt een dropdownmenu hebben in Flash, maar je begint niet aan Flash? Die volg ik even niet.

Wat je precies probeert te bereiken snap ik niet echt (want ik zie in je voorbeeld niets bewegen of rollen oid). Maar verdiep je eens in JQuery, dat is een van de makkelijkste manieren om geavanceerde menuutjes te maken als je wilt.

[Verwijderd]

Ik wil een bepaald drop-down menu hebben. Ik zag een vergelijkbaar menu op een screenshot van een website, die in flash leek te zijn gemaakt. Of het uberhaupt in flash is gemaakt, weet ik niet. Wat ik wel weet, is dat ik de mijne JUIST niet in Flash wil hebben.



Zo moet het worden, wanneer je de muis op het gele vlak hebt gehouden. Momenteel zit er een groen vlak boven, wat het "bovenste deel" aanstuurd.

Bij mij werken de drop-down elementen wel degelijk. Ik gebruik firefox, en daar lijkt het tot op zekere hoogte wel te werken. In de bijgevoegde tekst staat ook een link naar het oorspronkelijke script. Werkt die uberhaupt wel bij jou?

*EDIT: in IE werkt het niet zie ik nu net.

*EDIT2: ik heb de standaard schrale IE versie van windows XP, bij iemand anders die IE10 gebruikt, schijnt het wel ongeveer te werken.

[ Voor 22% gewijzigd door Verwijderd op 23-08-2013 21:24 ]

[Verwijderd]

Een andere versie gemaakt, waarbij ik de "echte" knop buiten beeld heb gezet, zodat ik het allemaal als een drop-up menu kon maken. Het probleem is nu dus, dat die onderste knop naar boven toe open vouwt, terwijl dit natuurlijk naar onderen moet zijn. Rara wie kan dit probleem oplossen.

http://cssdeck.com/labs/djfajtyg

Oorspronkelijke menu:
http://cssdeck.com/labs/navigation-dropdown-with-flip-effect

[Devil]

Als je wilt dat je knop naar beneden uitvouwt dan moet de knop zelf simpelweg het eerste element in de ul zijn. Zo werkt die code die je gecopy paste hebt nou eenmaal.

Misschien moet je gewoon eens wat tutorials lezen, die van w3c zijn altijd wel goed voor beginners.

[R4gnax]

Devil schreef op zondag 25 augustus 2013 @ 23:38:
Misschien moet je gewoon eens wat tutorials lezen, die van w3c zijn altijd wel goed voor beginners.

Het w3 consortium heeft inderdaad een nette wiki met leerstof. Maar die bedoel jij waarschijnlijk niet, of wel?

Ik gok namelijk dat jij w3 schools bedoelt en daar zou ik dan even voor moeten waarschuwen.
Die site heeft namelijk absoluut niets met het w3 consortium te maken. Sterker nog; er zijn meerdere verzoeken geweest om dit ergens op hun website te vermelden, maar die worden keer op keer genegeerd; waarschijnlijk omdat er bewust misbruik van de naamsverwarring gemaakt wordt om extra bezoekers te trekken.

De mensen achter w3 schools stapelen fout op fout in zowel hun tutorials als hun naslagwerk en hebben in het algemeen zo vaak tegen het zere been van de web dev community geschopt dat er een speciale anti-campagne bestaat die ondertekend is door een flink aantal prominenten.

Vooral niet gebruiken en lekker dood laten bloeden.

[ Voor 6% gewijzigd door R4gnax op 26-08-2013 10:29 ]

[Verwijderd]

Devil schreef op zondag 25 augustus 2013 @ 23:38:
Als je wilt dat je knop naar beneden uitvouwt dan moet de knop zelf simpelweg het eerste element in de ul zijn. Zo werkt die code die je gecopy paste hebt nou eenmaal.

Misschien moet je gewoon eens wat tutorials lezen, die van w3c zijn altijd wel goed voor beginners.

De volgorde van uitklappen heb ik nu al wel door. Het gaat mij er nu om datie verkeerd om uitklapt. En volgens mij zijn individuele li's niet aan te sturen vanuit 1 ul.

[Devil]

R4gnax schreef op maandag 26 augustus 2013 @ 10:26:
[...]

Het w3 consortium heeft inderdaad een nette wiki met leerstof. Maar die bedoel jij waarschijnlijk niet, of wel?

Ik gok namelijk dat jij w3 schools bedoelt en daar zou ik dan even voor moeten waarschuwen.
Die site heeft namelijk absoluut niets met het w3 consortium te maken. Sterker nog; er zijn meerdere verzoeken geweest om dit ergens op hun website te vermelden, maar die worden keer op keer genegeerd; waarschijnlijk omdat er bewust misbruik van de naamsverwarring gemaakt wordt om extra bezoekers te trekken.

De mensen achter w3 schools stapelen fout op fout in zowel hun tutorials als hun naslagwerk en hebben in het algemeen zo vaak tegen het zere been van de web dev community geschopt dat er een speciale anti-campagne bestaat die ondertekend is door een flink aantal prominenten.

Vooral niet gebruiken en lekker dood laten bloeden.

Goed dat je het nog even aangeeft, ik bedoel inderdaad w3c en niet de bagger van w3 schools. De helft van wat daar staat klopt simpelweg niet. w3c heeft uitgebreide informatie over html en css van de absolute basis tot meer geavanceerde zaken.

Verwijderd schreef op maandag 26 augustus 2013 @ 10:49:
[...]


De volgorde van uitklappen heb ik nu al wel door. Het gaat mij er nu om datie verkeerd om uitklapt. En volgens mij zijn individuele li's niet aan te sturen vanuit 1 ul.

Dat 'verkeerd om uitklappen' ligt in de class die je hem geeft (n1,n2 etc.) en in de gebruikte transitions. Zoek maar eens een tutorial over transitions en dan gewoon wat dingen uitproberen.

[ Voor 15% gewijzigd door Devil op 26-08-2013 11:26 ]

[Verwijderd]

Probleem is opgelost. (helaas niet dankzij het geleverde advies) Om de posities beter in kaart te brengen, moest ik hier en daar een margin-top: ***px; invoeren, en het bleek dat ik onafhankelijke li's ook nog eens code kon geven. Hiermee is mijn probleempje opgelost. (en is mijn CSS kennis ook vergroot)

Volgende puntje zal zijn om een deze knop/menu, in een horizontale lijst met knoppen te krijgen. Ben benieuwd of dat iets wordt... ^^

*EDIT: Owja, tutorials lezen ben ik slecht in. Ik zoek meestal iets op, wat lijkt op wat ik +/- hebben wil, en dan kanibaliseer ik de code. Een tutorial heeft namelijk vrijwel nooit exact wat ik bedoel, dus na apen heeft weinig nut dan.

[ Voor 21% gewijzigd door Verwijderd op 26-08-2013 19:51 ]

[R4gnax]

Verwijderd schreef op maandag 26 augustus 2013 @ 19:48:
Owja, tutorials lezen ben ik slecht in. Ik zoek meestal iets op, wat lijkt op wat ik +/- hebben wil, en dan kanibaliseer ik de code. Een tutorial heeft namelijk vrijwel nooit exact wat ik bedoel, dus na apen heeft weinig nut dan.

Copy&paste programmeren is zo ongeveer de slechtste methode mogelijk om jezelf het vak eigen te maken. Je leert er bijna niets van omdat je veelal geen verstand hebt van wat de code die je kopieert inhoudt en zo dus ook nooit inzicht in de materie zult kweken. Op die manier zul je niet of nauwelijks groeien in echte kennis en vast blijven steken in het copy&paste trucje.

Het loont juist om de blogs van bekendere authoriteiten van web technologie bij te houden en vooral ook de discussies die daarop volgen door te nemen. Probleemschetsen en oplossingen die zij aandragen kun je ontleden en je kunt je de voors en tegens eigen maken. Op die manier leer je hoe en vooral ook waarom bepaalde dingen werken of gedaan worden zoals ze gedaan worden. Op den duur tilt dat je niveau omhoog en zul je dit soort inzichten steeds makkelijker zelf ontwikkelen en met je parate kennis uit eerdere ervaringen ook steeds makkelijker zelf tot oplossingen komen.

Kopieer dus niet klakkeloos, maar begrijp en leen de concepten.

Devil schreef op maandag 26 augustus 2013 @ 10:53:
Goed dat je het nog even aangeeft, ik bedoel inderdaad w3c en niet de bagger van w3 schools.

Gelukkig.