Submenu in CMSMS

[Jordyb]

Goedenavond!

Sinds een weekje gebruik ik CMSMS. Geweldig hoe simpel het is om je lay-out erin te hangen, zeker als je wat kennis van HTML en CSS hebt.

Ik heb een vraagje omtrent een sub-menu die netjes in mijn HTML en CSS verwerkt zit. Hoe krijg ik de sub-pagina's getoond zoals in het onderstaande voorbeeld? De HTML en CSS versie doet 'ie het prima.

Zie hier hoe het zou moeten zijn: http://www.jordyboutier.nl/schuchhard/

Als ik nu een sub-pagina toevoeg krijg ik het volgende resultaat (schermafdruk):



Hoe kan ik dit oplossen?

Hoor graag, alvast vriendelijk bedankt!

[Evert B.]

Ik begrijp je vraag niet precies, maar heb je de module hulp gelezen van het menubeheer?
Opmaak -> Menumanager -> Modulehulp (rechts in scherm).
Of bedoel je niet zo zeer de menu aanroep maar de opmaak (css)?

[Jordyb]

Hoi Evert,

Fijn dat je reageert. Het menu doet het, evenals het sub-menu. Het is alleen de bedoeling als ik de knop "Diensten" hover, dat dan pas de menu-items zichtbaar worden. Net zoals op http://www.jordyboutier.nl/schuchhard.

Of dat een CSS probleem of iets anders is weet ik echt niet.. ben ik zo duidelijker?

Hoor graag weer van je!

[compufairy]

Hoi

Heel ander onderwerp, maar ik kan het niet laten... Wat een mooi ontwerp joh!!

Groet,

Anne-Mieke

[Rolf]

Het menu doet het, evenals het sub-menu. Het is alleen de bedoeling als ik de knop "Diensten" hover, dat dan pas de menu-items zichtbaar worden.

Uhm, dat gebeurt nu toch ook... Zelfs in IE

grt. Rolf

[Evert B.]

Bij mij werkt t ook netjes hoor?

[Jordyb]

Sorry, ik ben onduidelijk geweest denk ik! De versie die op de link staat: http://www.jordyboutier.nl/schuchhard is de statische HTML/CSS versie. Van de CMSMS template/installatie heb ik in de startpost een kleine screenshot toegevoegd, omdat ik hem lokaal via XAMPP heb draaien.

Bijgaande een wat grotere screenshot. In de statische HTML/CSS werkt het inderdaad perfect, maar in mijn CMSMS template dus niet.

Hier de printscreen: http://www.imgdumper.nl/uploads5/4f08655569d63/4f08655553ddc-Schermafbeelding_2012-01-07_om_16.31.14.png

Hartelijk bedankt Anne-Mieke, dat hoor ik graag!

[Rolf]

Ongetwijfeld op te lossen met wat z-index instellingen...
Heb je Firebug voor Firefox?
Staat de site online ergens, zodat we mee kunnen kijken?

grt. Rolf

[Jordyb]

Beste Evert,

Nee, helaas staat er nog niets online. Alles draait nu lokaal via XAMPP. Heb afgelopen weekend geprobeerd het te migreren naar een online omgeving maar dat lukt me nog niet.

Ik zal vanavond als ik thuis ben wat laten zien. CMSMS maakt namelijk onder de LI automatisch een UL aan voor mijn sub-menu. In de XHTML/CSS versie is er binnen die LI geen UL gebruikt, noch gestyled. Denk dat dit de oorzaak is. Zal vanavond een schermafdruk sturen van wat ik bedoel!

Alvast bedankt voor het meedenken.

[Jordyb]

Zoals beloofd hierbij de screenshot. Denk dat dit het e.e.a. verduidelijkt, anders hoor ik het graag. Overigens heb ik het verkeerde gedeelte gehighlight in Firebug, maar de uitleg in de screenshot is hopelijk duidelijk.

Zie hier: http://www.imgdumper.nl/uploads5/4f0b4e00b4b45/4f0b4e009535c-Schermafbeelding_2012-01-09_om_21.19.50.jpg

[timdebuurman]

Hoi Jordyb,

Inderdaad word in menutemplate (simple) van CMSMS het submenu als volgt gemaakt:

<ul>
<li><a href="#"><span>menu 1</span></a></li>
<li><a href="#"><span>menu 2</span></a>
<ul>
<li><a href="#"><span>submenu 1</span></li>
<li><a href="#"><span>submenu 2</span></li>
</ul></li>
<li><a href="#"><span>menu 3</span></a></li>
</ul>

In dit voorbeeld heeft dus menuknop 2 een submenu, waarbij de volledige "ul" van het submenu binnen de "li" van menu 2 valt.

De oplossing is inderdaad het aanpassen van de CSS (stylesheet)

Makkelijkst is dan om het menu ook in je statische html/css zo te maken als dit voorbeeld, in plaats van met div = dropdown.

Vervolgens zal in je css dan de ul van het submenu verborgen moeten worden, bijv. zo:

#menubox ul li ul {
display: none;
position: absolute;
width: ...
enz
}

Om deze dan tevoorschijn te krijgen bij hover, kun je dit doen:

#menubox ul li:hover ul {
display: block;
}

Hopelijk leg ik zo duidelijk genoeg uit, er van uitgaande dat je al redelijk wart kennis hebt van html en css.

groet Tim