Different menu style
Posted: Sun Aug 29, 2010 11:07 am
For a non-paying job (website creation of a school) i'm trying to make an different kind of menu. An example is found at http://tinyurl.com/345n7ln (this one is static, not controlled by CMSMS for example purposes)
I'm using the following html code, so the CMSMS menu template should output this:
In this example the is the name of the 1st-layer of the menu (like a dropdown menu, and outputted like the grey-backgrounded text above the menu items in the image). All items below it (between tags) are 2nd-layer menu items.
There is no need to differentiate between already visited links, dividers,... The menu should just look like in the example, plain and simple.
I've been trying to achieve this for hours now, but always there is something that isn't quite right. Can someone help me please?
Thanks by advance!
I'm using the following html code, so the CMSMS menu template should output this:
Code: Select all
<div class="cat"><div class="cathead">Algemeen</div>
<div class="catitems">
<ul>
<li><a href="index.php?page=Algemeen">Kennismaking</a></li>
<li><a href="index.php?page=Algemeen">Opvoedingsproject</a></li>
<li><a href="index.php?page=Algemeen">Geschiedenis</a></li>
<li><a href="index.php?page=Algemeen">Contactinfo</a></li>
<li><a href="index.php?page=Algemeen">BSA</a></li>
<li><a href="index.php?page=Algemeen">BSD</a></li>
<li><a href="index.php?page=Algemeen">KSB</a></li>
<li><a href="index.php?page=Algemeen">Zwitserlandkampen</a></li>
<li><a href="index.php?page=Algemeen">Oud-leerlingenbond</a></li>
</ul>
</div></div>
<div class="cat"><div class="cathead">Humaniora</div>
<div class="catitems">
<ul>
<li><a href="index.php?page=Algemeen">Studieaanbod</a></li>
<li><a href="index.php?page=Algemeen">Jaarkalender</a></li>
<li><a href="index.php?page=Algemeen">Dagindeling</a></li>
<li><a href="index.php?page=Algemeen">Dagelijkse werking</a></li>
<li><a href="index.php?page=Algemeen">Schoolraden</a></li>
<li><a href="index.php?page=Algemeen">Engagement</a></li>
<li><a href="index.php?page=Algemeen">Cultuurmozaïk</a></li>
<li><a href="index.php?page=Algemeen">Schoolreglement</a></li>
<li><a href="index.php?page=Algemeen">Inschrijving</a></li>
</ul>
</div></div>
<div class="cat"><div class="cathead">Internaat</div>
<div class="catitems">
<ul>
<li><a href="index.php?page=Algemeen">Kennismaking</a></li>
<li><a href="index.php?page=Algemeen">Praktisch</a></li>
<li><a href="index.php?page=Algemeen">Dagindeling</a></li>
<li><a href="index.php?page=Algemeen">Personalia</a></li>
<li><a href="index.php?page=Algemeen">Internaatsactiviteiten</a></li>
<li><a href="index.php?page=Algemeen">Inschrijving</a></li>
</ul>
</div></div>
There is no need to differentiate between already visited links, dividers,... The menu should just look like in the example, plain and simple.
I've been trying to achieve this for hours now, but always there is something that isn't quite right. Can someone help me please?
Thanks by advance!