[OPGELOST] 2nd level menu laten zien bij hover in nieuwe div

[Rienko]

Ik weet niet hoe ik 't anders/beter kan omschrijven...
Maar ik ben een site aan het maken voor een lokale hobbyclub waar ik beheerder ben.

Nu doe ik het misschien met een giga omweg, maar ik heb dus mijn hoofdmenu en daaronder een submenu, in een nieuwe div.
Eigenlijk wil ik het submenu pas laten zien bij hover.
Onder elk item zitten natuurlijk weer andere sub-items.

Het stukje menu ombouwen ligt mij niet zo, ik heb me er een dag in verdiept, maar is niet aan mij weggelegd jammergenoeg, dus probeer ik het zo, wat naar mijn inzien zou moeten werken.

Code: Select all

	<div id="menu" class="container">
		{menu number_of_levels="1"}
	</div>
	<div id="menu2bg" class="container">
		<div id="menu2">
		{menu number_of_levels="1" start_level="2"}
		</div>
	</div>

Ik heb het al geprobeerd in de CSS met hover en "display:...."
Maar dat werkt natuurlijk niet, omdat het submenu er al keihard staat in een nieuwe div, is mijn benadering.

Is dit anders op te lossen?
Of zal ik toch echt het menu om moeten bouwen?

Alvast dank voor reacties.

Mvrgr Rienko

[velden]

Wat jij wilt moet gewoon mogelijk zijn, maar wat jij doet werkt niet.

start-level=2 betekent volgens mij dat hij het enkel het submenu van de huidige pagina toont.

Wat jij wilt maken is eigenlijk een menu met submenu's, waarbij die submenu's allemaal op de zelfde positie staan. Ik denk dat dat je uitgangspunt moet zijn;

Gewoon een menu opbouwen met

Code: Select all

<ul>
  <li><a>home</a>
    <ul>
      <li><a>home-sub-1</a></li>
      <li><a>home-sub-2</a></li>
     </ul>
   </li>
</ul>

En dan met css proberen de ul li ul absoluut te positioneren. Op de plek die jij wenst uiteraard.

[Rienko]

Duidelijk, dat idee had ik dus al.
Dus ik zal toch een menu moeten maken/aanpassen.
Maar zoals ik zei snap ik het stukje menu maken in cmsms niet, omdat er zoveel kreten tussen staan etc.
Ik wil nml niet een keihard menu hebben, maar wil 'm wel werkend via menu manager hebben, omdat ik simpel wil kunnen wisselen/toevoegen met pagina's.

Ik zal 's kijken of ik toch het minimal menu kan gebruiken en die via CSS kan gaan stylen.
Momenteel blijven de child-pagina's allemaal staan.

Net ff pauze gehad, gegeten etc, ff frisse blik er op werpen.

Als er nog pointers/tips/hints zijn over het stukje menu aanpassen hoor ik dat graag.

[timdebuurman]

De standaard menu template (minimal en simple soieso) genereert een redelijk standaard menu in een lijst.

Met alleen maar dit in je sjabloon:
{menu}

zal de output ongeveer zijn wat velden liet zien.

Je hoeft dus eigenlijk niets te veranderen aan de menutemplate.

Het stukje css wat je nodig hebt om het submenu te verbergen is ongeveer dit: (stel dat het menu in een div met id 'menu' staat)

Code: Select all

#menu ul li ul {
display: none;
}

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

[Rienko]

Hmmmm, dat lijkt wel erg makkelijk zo ja
Ik zal 't 's proberen.

Als je 't niet erg vindt heb ik je uitgenodigd voor msn (lordfiro).
Je lijkt me nml wel een erg handig iemand met dit soort dingen, kan ik misschien nog wat vraagjes tussendoor stellen, mocht 't niet lukken

[velden]

li:hover werkt niet in alle browsers goed.

Persoonlijk gebruik ik meestal superfish http://users.tpg.com.au/j_birch/plugins/superfish/ in combinatie met jQuery. Uiteraard werkt dat ook niet als bezoekers Javascript uitschakelen, maar daar houdt ik dan maar geen rekening mee.

[timdebuurman]

@velden

li:hover werkt al vanaf IE7

Als je nu nog IE6 wilt blijven ondersteunen, ben je meer tijd kwijt met maken van hacks dan met de website zelf.

[velden]

Kan kloppen inderdaad.

Ik bedoelde eigenlijk ook iets anders: sommige browsers (of misschien in sommige situaties) 'verliest de li zijn hover' wanneer je naar het submenu navigeert met de muis, waardoor het weer inklapt voordat je er 'bent'. Geweldig irritant natuurlijk en dat gebeurt ook met IE > 6.

Gezien het feit dat OP een submenu op een 'heel' andere plek gaat zetten dan het hoofdmenu, lijkt me de kans hierop best groot.

Vorige week nog vraag over gehad en zelf geconstateerd op een test-site. Met superfish werkt het goed (wel JS).

[timdebuurman]

Ikzelf pas ook vaak superfish toe aan de menu's
Werkt inderdaad prima..en tegenwoordig hebben de meesten toch wel javascript aan staan.

Het probleem met het 'open blijven' van de ul, heb ik nog niet meegemaakt.
Heeft dat niet te maken met een vaste hoogte van de 'li' zonder overflow?

De 'ul' (het submenu) bevind zich namelijk volledig in de 'li', dus bij het hoveren van de ul, hover je nog steeds de li (als je begrijpt wat ik bedoel)

[Rienko]

Mijn ervaring was, want het hoveren heb ik wel voorelkaar gekregen, dat ik bij hover alleen de subpagina's van de huidige pagina te zien kreeg.
Dan heb ik daar waarschijnlijk het verkeerde deel van de menu-list op hover gezet? om het zo maar te zeggen...

Ik heb iig wel menu2 in menu1 gezet, zegmaar, voordat de div van id"menu" wordt afgesloten roep ik een nieuwe div aan, met id="menu2".
Wat mijn naar mijn mening al de nodige problemen daar uit de weg zou moeten ruimen.

Ik zal morgen weer even verder met de site, zien dat ik dit goed krijg.
Post ik morgen, mocht ik er nog niet uit komen, wel weer ff wat code en vooral css, dat helpt wat makkelijker dacht ik.

Om misschien iets beter te zien wat ik heb en wat ik bedoel zal ik de link vd site ook even posten:
DHC Drachten

Let wel dat de knop home niet werkt, dan gaat 'ie naar de oude pagina (niet lachen a.u.b., niet mijn creatie )

Iniedergeval al heel erg bedankt tot dusver.

[Rienko]

@Tim,
Ik begrijp het iig niet
Zoals jij 't zegt lijkt 't ook of jij bedoelt dat ul het submenu is en li het mainmenu
Dat dacht ik nml ff, maar volgens mij weet jij wel beter dan dat.
Je bedoelt dat de ul van het submenu zich in de li bevindt?
Dat is dus bij mij niet het geval.

Ruwweg is mijn opbouw:
<div menu1>
<ul>
<li></li>
</ul>
<div menu2>
<ul>
<li></li>
</ul>
</div>
</div>
menu1 is 1st lvl
menu2 is 2nd lvl

Ik roep momenteel nml het menu 2x aan, 1x voor 1st lvl en 1x voor 2nd lvl.

Toch heb ik 't gevoel dat 't daar fout gaat en 't wordt gezien als 2 losse stukjes, waardoor ik via de 1st lvl css geen invloed kan hebben op de 2nd lvl.

Maar dat is nog steeds een stukje giswerk
Ik ga het morgen gewoon proberen met alle bovenstaande info.
Als het niet lukt post ik wel weer
Als het wel lukt ook trouwens, voor evt volgenden die hetzelfde ondervinden.

[velden]

Je zegt het helemaal juist:

Je moet het menu 1x aanroepen:

{menu number_of_levels='2'} (die number_of_levels) gebruik ik altijd om te voorkomen dat het menu sneuvelt als een gebruiker toch nog probeert een diepere structuur te maken dan voorzien.

Neem het meest eenvoudige menu template en zorg er dan dmv van css voor dat je tweede ul zich als een div gedraagt en een absolute position krijgt:

Code: Select all

ul ul {
  display : none; /* of left : -8000px;  */
  position : absolute;
  width : 100%;
  top : 100px;
  
}

ul li:hover ul {
  display : block;
  position : absolute;
  width : 100%;
  left : 0px;
}

Het is maar een voorbeeld weet niet of het allemaal zo werkt, ligt ook aan je eigen opzet natuurlijk.

[Rienko]

Nou...ik ben nu een heel eind gekomen.
2nd level heb ik nu gestyled zoals moet en doet 't bij hover.
Tis idd gewoon simpelweg de 2e ul aanroepen, zo had ik 't nog niet bekeken.
Nu moet ik alleen de 2e ul er nog weer onder krijgen.
De 2nd level popt nu op tussen de 1st level items.

Template:

Code: Select all

</__body>
<a name="main"></a>
<div id="wrapper">
	<div id="header" class="container">
		<div id="logo"><img src="{root_url}
/uploads/dhc/logo.jpg" width="205" height="183" />
		</div>
		<div id="banner">
		<a href="http://www.twitter.com/dhcdrachten" target="_blank"><img id="twitter_logo" src="/uploads/dhc/twitter.png" width="25" height="25" /></a>
		<img id="facebook_logo" src="/uploads/dhc/facebook.png" width="25" height="25" />
		</div>
	</div>
	<div id="menubg" class="container">
		<div id="menu" class="container">
		{menu number_of_levels="2"}
		</div>
	</div>

CSS:

Code: Select all

/* Menu */

#menu {
	height:32px;
	padding: 0 15px;
}
#menu ul {
	margin: 0 0 0 0;
}
#menu li {
	list-style:none;
	float:left;
	background: url(/uploads/dhc/menu_hover.jpg) no-repeat;
}
#menu a {
	float: left;
	height: 20px;
	padding: 6px 30px 6px 30px;
	color: #FFFFFF;
	font-size: 14px;
	font-weight: bold;
	text-decoration: none;
}

#menu a:hover {
	background: url(/uploads/dhc/menu_hover.jpg);
}

#menu ul ul {
	display : none;
	width : 100%;
  
}

#menu ul li:hover ul {
	display : block;
	width : 100%;
}

* Menu 2nd level */

#menu ul ul {
	height: 22px;
	margin: 0px 15px;
	padding: 0 0 0 0;
}

#menu ul ul li {
	list-style:none;
	float:left;
	background: url(/uploads/dhc/menu2_hover.jpg) no-repeat;
}
#menu ul ul li a {
	float: left;
	height: 19px;
	padding: 3px 15px 0px 15px;
	color: #5b5b5b;
	font-size: 12px;
	font-weight: normal;
	text-decoration: none;
}
#menu ul ul li a:hover {
	background: url(/uploads/dhc/menu2_hover.jpg);
}

[Rienko]

Ah, zelf al gevonden.
Was niet zo'n grote uitdaging, moest alleen de juiste zoekactie gebruiken op google

Code: Select all

#menu ul {
	position: relative;
	margin: 0 0 0 0;
}

#menu ul ul {
	position: absolute;
	top: 32px;
	display : none;
	width : 100%;
}

Bedankt allen voor jullie hulp en pointers!