Vervolg!
Ook dit kan kloppen.
Als je een uitrol-menu hebt zoals dit:
... dan zijn er twee Unordered Lists in omloop: één lijstje met de horizontale hoofditems, en één lijstje met de sub-items onder het hoofditem "Wat wij doen". Het tweede lijstje is geen apart menu'tje, maar zit "genest" (inwendig opgenomen) in de <li> van zijn hoofditem.
Het Spry menu geeft de hoofd<ul> de class "MenuBarHorizontal" mee. Daarmee worden de styles van alle list-items die er in zitten geregeld (volgens het waterval-principe van de Cascade Style Sheets).
Elke link in het hoofdmenu die een uitrol-menu moet veroorzaken krijgt van het Spry menu de class "MenuBarItemSubmenu". Daarmee kunnen, alweer via het stylesheet en het waterval-principe, alle bijbehorende submenu-items hun eigen stijl krijgen (onder elkaar komen te staan, andere randjes, enz.).
De html wordt daarmee zoiets als dit:
HTML:
<!-- menu-strook kan horizontaal of verticaal zijn -->
<ul id="MenuBar1" class="MenuBarHorizontal"><!-- hier horizontaal genomen -->
<li>
<!-- eerste menu-item -->
<a href="index.html">Home</a>
</li>
<li>
<!-- tweede menu-item -->
<a href="paginas/wie.htm">Wie wij zijn</a>
</li>
<li>
<!-- derde menu-item heeft submenu-uitroller naar beneden -->
<a class="MenuBarItemSubmenu" href="paginas/wat.htm">Wat wij doen</a>
<!-- submenu is als nestje binnen het item ingebouwd,
zodat het submenu verdwijnt als je van het list-item weghoevert -->
<ul>
<li>
<a href="paginas/producten.htm">Levering producten</a>
</li>
<li>
<a href="paginas/diensten.htm">Verlenen service</a>
</li>
<!-- nu komt het eind van het submenu van Wat wij doen-->
</ul>
<!-- nu komt het eind van het list-item Wat wij doen zelf-->
</li>
<li>
<!-- vierde en laatste menu-item is weer een losse -->
<a href="paginas/contact.htm">Contact</a>
</li>
<!-- nu komt het eind van de hoofdlijst van menu-items -->
</ul>
<!-- menu is klaar -->
Dat lijkt me in principe correct, maar dan ben je in feite het Spry menu aan het nabouwen, - terwijl dit er eigenlijk al is maar alleen niet goed werkt.
Ik denk nog steeds dat de online versie het stylesheet niet goed kan vinden o.i.d., dus ... kom maar op met je link!
Met vriendelijke groet,
CSShunter
[edit]Als je leesvoer zoekt over het maken van lijstjes, is dit iets voor je: de
Listamatic en Listutorial pagina's van maxdesign.com.
De
List-o-Matic van accessify.com is een heel handig tooltje om snel een toegankelijk menu in elkaar te timmeren.[/edit]
