Javascript / Css dropdown menu met plaatjes

[Ruubje]

Goeiedag; ik zit met een probleem.
Ik heb een menubalk op een website opgebouwd uit divs:
klik (http://home.aim.avans.nl/rwjduive/ph)
en nu wil ik dat op deze menubalk het knopje 'projecten' een dropdowntje geeft met vier opties (welke dat zijn doet er nu even niet toe). Ik heb al een aantal javascript / css codes via google geprobeerd maar die verbouwen de rest van m'n content die onder de div van het menu staan.
Ik dacht dat het met iets van unordered lists items te regelen moest zijn; maar dan doet 'ie heel gek als je er plaatjes in zet en verbouwt 'ie ook het menu nog!

kortom: kan iemand me een java / css code geven om mijn menubalk een dropdown optie te geven? het zijn nu nog gewoon plaatjes; img tags rechts uitgelijnd..

thanks in advance :);
Ruben

[renegeuze]

Het kan misschien heel simpel maar ik zelf denk dat je nog heel wat toe zal moeten voegen om het een mooi werkend geheel te laten zijn.

Het eerste wat ik aan zal raden is om dergelijke menu's te maken is het gebruik van lists. dus:

<ul id="myMenu">
<li>Menu item 1</li>
<li>Menu item 2(etc)</li>
</ul>

Met als belangrijkste CSS

#myMenu{
list-style:none;
}
#myMenu li{
display:inline;
}

De display inline zorgt ervoor dat de lijst horizontaal op het scherm komt en list-style none zorgt ervoor dat er geen bolletjes of wat dan ook voor komen te staan.
Daarna kan je er aan werken om de rest via javascript of css te krijgen zoals jij het wilt. Ik zelf werk vooral met css en gebruik alleen met javascript als er speciale effecten nodig zijn.
http://css.maxdesign.com.au/listamatic2/horizontal04.htm(erg goede site over lists)
Bovenstaande URL is erg goed maar houdt niet veel rekening met gebruikers van IE6(ik zelf liever ook niet :P )
Je kan problemen met IE6 oplossen met een stuk script maar dat kan ik zo snel niet vinden.
En nog een website met een heel uitgebreid voorbeeld van een menu zonder gebruik van script of andere gekke dingen.(wat dus wel werkt in IE6)
http://www.cssplay.co.uk/menus/dd_valid.html

Ik hoop dat ik je hiermee op weg heb geholpen. Misschien dat anderen nog andere ideen hebben die in jouw geval nog nuttiger zijn.

[RA8IT]

Kan heel die site van jou niet bekijken, maar bij deze een submenu:



<ul class="ie_does_hover" id="nav">
<li><a href="javascript:void(0);">Knop zelf</a>
<ul>
<li><a href="javascript:void(0);">subknop</a></li>

<li><a href="javascript:void(0);">subknop</a></li>
</ul>
</li>
</ul>



CSS met uitleg (klopt niet helemaal volledig volgens mij)

#nav, #nav ul {

padding: 0px; /* AFSTAND SUBKNOPPEN VAN KNOPPEN \*/

margin: 0px; /* MARGES RONDOM KNOPPEN \*/

list-style: none; /* LIJST STIJL, WEG MET DIE BULLETS! \*/

text-align: center; /* TEKST UITLIJNEN OP KNOPPEN \*/

}

#nav li {

float: left; /* UITLIJNING KNOPPEN \*/

width: 143px; /* BREEDTE VAN KNOPPEN \*/

}

#nav ul {

position: relative; /* SUBKNOPPEN POSITIE \*/

width: 143px; /* BREEDTE DIE DE SUBKNOPPEN MAX MOGEN HEBBEN \*/

left: -2000px; /* SUBKNOPPEN VERSTOPPEN WANNEER NIET GESELECTEERD \*/

margin-top: -2px;

}

#nav li:hover ul, #nav li.ie_does_hover ul {

left: auto; /* UITLIJNING SUBKNOPPEN\*/

padding-top: 6px; /* UITLIJNING SUBKNOPPEN\*/

background-position: 0px; /* UILIJNING AFBEELDING\*/

}

#nav a {

display: block; /* STYL VAN KNOPPEN\*/

margin: 2px 5px 4px 5px;

text-decoration: none; /* TEKST DECORATIE (UNDERLINE ETC) \*/

font-family: Helvetica, Verdana, Arial; /* FONT, OP VOLGORDE WELKE DEGENE HEEFT\*/

font-size: 10pt; /* FONT GROTE ALGEMEEN\*/

}

ul a {

padding-top: 6px; /* UITLIJNING TEKST OP KNOP\*/

margin: 0px;

font-weight: normal; /* DIKTE TEKST \*/

color: #FFFFFF; /* TEKST KLEUR KNOP\*/

}

ul ul a:link, ul ul a:visited {

font-weight: normal; /* DIKTE TEKST \*/

padding-top: 0px; /* UITLIJNING TEKST VAN SUBKNOP \*/

color: #FFFFFF; /* TEKST KLEUR SUBKNOP\*/

cursor: pointer; /* DE MUIS VERANDERD ALS JE OP DE KNOP GAAT STAAN \*/

}

ul ul a:hover, ul ul a:active {

font-weight: normal; /* DIKTE TEKST \*/

color: #CCCCCC; /* TEKST KLEUR SUBKNOP OVER\*/

cursor: pointer; /* DE MUIS VERANDERD ALS JE OP DE KNOP GAAT STAAN \*/

}

ul li {

background: url(../Afbeeldingen/Knop.jpg) no-repeat; /* AFBEELDING KNOP ZELF\*/

margin: 0px;

height: 31px; /* HOOGTE KNOP\*/

width: 143px; /* BREEDTE KNOP\*/

border-left: 1px solid #000; /* LIJN EN KLEUR VAN KNOP\*/

}

ul ul li {

background-image: #666666; /* KLEUR OF AFBEELDING SUPKNOP ZELF\*/

width: 143px; /* BREEDTE KNOP\*/

height: 17px; /* HOOGTE KNOP\*/

border-top: solid 1px;

margin-left: -1px;

}

/* INTERNETEXPLORER \*/

* html ul li, * html ul ul li {

border-bottom: 0px;

}

* html ul ul li {

border-top: 0;

}





Kopiëren plakken nu dus, of volg een tutorial.. Staan er meeeer dan genoeg!



Edit:
En dit is het javascriptje, voor IE <6

sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" ie_does_hover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" ie_does_hover"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

van een soortgelijke vraag...

[Ruubje]

renegeuze, ra8it; bedankt! Ik ga hier morgen mee aan de slag; het is nu alweer te laat! Eens kijken of dit doet wat ik wil en of ik t een beetje naar mijn wil kan buigen ;)
grtz!

[mcDavid]

Watvoor spannend lettertype wil je gebruiken dan dat het niet als tekst kan?