Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

Goed werkend CSS dropdownmenu?

13 antwoorden
  • Hallo, Ik ben een beginnend CSS noob, en heb op 't net eens gezocht naar CSS/HTML codes voor een dropdownmenu (horizontaal). Nu heb ik dat dus gevonden, maar overal wordt aangegeven dat een dergelijk menu niet goed werkt onder IE-6, omdat IE de term [b:8955b07d11]:hover[/b:8955b07d11] niet kent. Er wordt daarbij gezegd dat je een CSS-hack of stukje Javascript moet gebruiken, om het bij IE-6 werkend te krijgen. Nu wil ik graag zo'n horizontaal dropdown menuutje maken, maar dat zal me al behoorlijk wat moeite kosten :) en ik weet totaal niet hoe dat zit met IE-6. Ik maak de site op een Mac, dus ik heb ook geen mogelijkheid tot testen op IE-6 op het moment dat ik aan het knutselen ben met 't menuutje. Kan iemand me misschien uitleggen hoe dat zit? Zo'n CSS-dropdown menu schijnt wel gewoon te werken op Firefox en Safari namelijk. Mvg, Joram
  • Daar is maar 1 antwoord op: [url=http://www.htmldog.com/articles/suckerfish/dropdowns/]Suckerfish[/url] Op die site wordt goed uitgelegd wat er precies gedaan wordt. Om te kunnen testen zul je toch ergens een IE versie moeten kunnen gebruiken. Misschien bij een vriend of zo?
  • Wow... hebben ze dat ook in het Nederlands??? Zo'n List maken snap ik net, en het CSS deel invoegen weet ik ook nog. Maar direct daaronder komen ze met dingen die ik moet toevoegen, waarbij ze niet/nauwelijks aangeven bij welk deel CSS ik dat moet toevoegen. En dat dat Javascript... :o :o Is dat echt de enige manier om een menu te maken met CSS?? Want Javascript snap ik voor geen ene meter, lol! En buiten de geschreven codes om zie ik ook soms nog dingen zoals "'sfhover" :-?
  • Je kunt [url=http://www.htmldog.com/articles/suckerfish/dropdowns/example/bones1.html]hier[/url] in de source toch kijken waar wat moet komen te staan? Je hoeft die Javascript niet te begrijpen, je moet het gewoon in de source van je HTML file zetten. Het is natuurlijk wel handig om te begrijpen wat er precies gedaan wordt: Voor zoverl ik weet moet het wel met javascript gedaan worden omdat, zoals je al zei, IE geen :hover wil doen op andere dan a elementen. Maar het kan zijn dat er nog wel andere workarounds zijn.
  • Dat had ik ook gelezen; er was iemand die een CSS-dropdown menu had gemaakt met alleen CSS (geen javascript). Op zich kan ik het inderdaad ook gewoon plaatsen, maar wat je zegt; 't is ook wel handig om te weten wat er gebeurd met de code die je plaatst. Maar van wat ik begreep moest ik nog een "clear:all" plaatsen, maar waar ik die kwijt moet weet ik niet echt ;) Ach, op zich kan het ook geen kwaad om een standaard menuutje te maken in Dreamweaver. Als je in DW één button maakt, zet DW er zelf al een stuk Javascript bij, dan kan ik die buttons 1 voor 1 in een list zetten, en dan ben ik ook klaar. Maarja... da's ook maar gewoon een kwestie van doen, i.p.v. begrijpen :)
  • Volgens mij is dat onmogelijk, aangezien nog te veel mensen Internet Explorer gebruiken. Ik meen dat het ook alleen met CSS en HTML mogelijk is, maar je zult merken dat IE er niet aan wil. Je hebt Javascript nodig om de lijst afwisselend te verbergen en te tonen in IE 5 - 6, aangezien deze browser :hover niet of nauwelijk kan ondersteunen. Verder is het Suckerfish dropdown menu dermate simpel dat je het eigenlijk gewoon kan kopiëren. Kopieer het [url=http://www.htmldog.com/articles/suckerfish/bones]bare-bones example[/url] eens in een leeg HTML document & probeer zelf het menu in CSS te stylen. Als dat lukt moet je het ook in je originele pagina's kunnen voegen.
  • Hoi, Ik was er ondertussen al achtergekomen dat ik me vergiste :D Iemand had zonder Javascript een menu gemaakt, maar geen dropdownmenu, hehe. Ik heb ondertussen ook een Javascriptvrij menu gemaakt wat het ook goed doet in IE/win. Over die dropdowns had je inderdaad gelijk :) Kan iemand me misschien trouwens uitleggen wat "z-index" is? Ik weet dat het te maken heeft met het naar voren en achteren halen van div's, maar ik weet niet precies hoe ik het moet gebruiken. Mvg, Joram
  • www.handleidinghtml.nl/css/css-elementen/css-elementen10.html Gebruik van z-index is eigenlijk bijna nooit nodig. In de Netscape 4.x tijd maakte men gebruik van 'layers', maar dat doet nagenoeg niemand meer. Bij een dropdown kan het soms wel zijn dat het uitklapgedeelte van het menu achter iets anders valt, in dat geval kan een z-index wel handig zijn. Een z-index instellen om over combobox/selectbox te kunnen vallen, is niet mogelijk zonder [url=http://www.loadedguntheory.com/devblog/director/listpost/b5349120-f9ca-1027-b38e-00508df3c0f7/ZDK3YTMXZGQTY2I2MY1LNJQYLTG2M2UTNJNMY2U3YZHJMGUZ.html]trucje[/url].
  • [url=http://home.wanadoo.nl/joramoudenaarde/website.jpg]Hier kun je zien waarom ik om de Z-index vraag[/url] :) Even een kleine uitleg voor de duidelijkheid: - De wolken komen op de achtergrond, en staan op repeat-x - De graspollen zitten vast aan 't groene deel - Het groene deel moet verticaal strekbaar zijn, maar álleen op het punt tussen de rode pijl die in maincontent staat. Probleem is, dat de graspollen aan de rechterbovenzijde een stukje over 't deel van de maincontent lopen, en dus een "probleem" vormt. En [b:58a471fc2f]eigenlijk[/b:58a471fc2f] wil ik ook nog een stuk gras aan de linkeronderzijde hebben. Dat zou betekenen dat de 2 div's (linkercontent en maincontent) gedeeltelijk óver de header-div en de 2 graspollen lopen. En aangezien ik een beginner met CSS ben, heb ik geen flauw idee hoe ik dat kan oplossen :D
  • Volgens mij is jouw probleempje op te lossen m.b.v. de volgende artikelen: www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/ http://maxdesign.com.au/presentation/center/ Je bouwt een pagina met header, menu, twee kolommen en een footer. Deze omhul je d.m.v. een 'wrap' of 'container' (verschillende namen voor hetzelfde beestje), enerzijds om de pagina te centreren, anderzijds om afbeeldingen aan te hangen: - de wolken maak je de background van de body; - de wrap krijgt de bovenste pollen mee en die aan de zijkant; - aan de footer plak je die onderste pollen. Volgens mij kan het zo werken. En anders moet je misschien ff afkijken bij [url=http://joshuaink.com]joshuaink.com[/url] ofzo (jouw design deed me daaraan denken).
  • Ik had de links die je gaf al eens bekeken, maar da's nog net niet de oplossing die ik zoek. De oplossing van "456berea" is een site zoals bijvoorbeeld www.jaggle.nl . Op zich kan ik zo wel een site maken, maar dan mis ik de graspollen. Die moeten namelijk niet meestretchen, maar gewoon vastzitten aan de zijkanten. Ik zou als het ware de 2 zij-graspollen in een aparte div moeten zetten, en dan 't middendeel in een 3-tal div's (header, 1px stretch-deel, en een footer). Maar da's een beetje tricky, omdat ik eerst 1 grote div moet hebben (centered), waar alles in komt te staan. Dan 3 kolommen, waarbij de 2 zijkanten de zij-pollen krijgen (vast formaat), en een middendeel (verticaal stretched) waar de header, main en footer in komen te staan.... en da's nogal wat geloof ik :D
  • Huh, ik bedoel dus dat je geen enkele afbeelding moet verbinden aan de kolommen, alleen aan de container en de footer. De pollen aan de bovenkant en zijkant zet je in één plaatje. Dat plaatje wordt de achtergrond van de container, met no-repeat. In die container zet je de layout zoals op 456 Berea St. (of een willekeurige andere layout) en daar verbind je géén afbeeldingen aan, behalve aan de footer. In de footer zet je de onderste pollen. Wat er nu gebeurt, is dat de kolommen binnen de container gewoon kunnen meestretchen met de tekst, zonder dat het invloed heeft op de pollen aan de boven- en zijkant; die zijn namelijk verbonden aan de container, niet aan de kolommen. Vergelijk het met bijv. [url=http://csszengarden.com/?cssfile=/172/172.css&page=0]Blackcomb*75[/url] op [url=http://csszengarden.com]CSS Zen Garden[/url]. Wat in dat design de zwarte background is, zijn bij jou wolken. Wat daar de bergen zijn en die witte maple leaf zijn, zijn bij jou de pollen aan de boven- en zijkant. Die bergen en de maple leaf staan op één plaatje, die de background van de container vormt (zie http://csszengarden.com/172/172.css ). Of zie ik het verkeerd..?
  • Ah :D maar die snap ik :) Maar dan zou ik dus het volgende doen (als ik je goed begrijp); - in de body zet ik de wolken - in 1 grote div zet ik de header met aan beide zijkanten (en bovenkant) de pollen. (geen repeat, vaste breedte e.d.) - daarna komt daar weer een div in met 't contentdeel wat stretcht, en daaronder de div met de footer (vaste breedte e.d.). Zou dat ook kunnen als ik ook nog pollen plaats aan de linkerzijde, maar dan onderin?

Beantwoord deze vraag

Weet jij het antwoord op deze vraag? Registreer of meld je aan met je account

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.