[Opgelost] Submenus

[Cyroq]

Hallo,

Ik ben een beginner in CMS en weet dus ook niet heel veel van css af. Ik heb een bestaande website die gemaakt is met CMSMS maar deze moet aangepast worden: onder de hoofdknoppen (horizontaal) moeten subknoppen komen.
Mijn vraag dus: hoe pak ik dit aan? Ik heb denk ik even een zetje nodig voordat ik serieus met CMS aan de slag kan 
Alvast bedankt!

[Dee]

Het ligt er helemaal aan hoe die "horizontale hoofdknoppen" zijn opgebouwd en op welke manier je er subknoppen onder wilt hebben (... en wat er op die subknoppen moet komen).

Op welke manier wordt de menumanager in je template/sjabloon aangeroepen?
code zoals {menu template='simple_navigation.tpl' collapse='1'}

Wat is de code van het menutemplate dat gebruikt wordt?

Wat is de CSS die voor het menu/de navigatie wordt gebruikt?

Grtz,
D

[Cyroq]

De menu manager wordt zo opgeroepen:
{menu template=menuNaam'}

Dit is de code van de menu template:

Code: Select all

{* CSS classes used in this template:
#menuwrapper - The id for the <div> that the menu is wrapped in. Sets the width, background etc. for the menu.
#primary-nav - The id for the <ul>
.menuparent - The class for each <li> that has children.
.menuactive - The class for each <li> that is active or is a parent (on any level) of a child that is active. *}
<table cellspacing="0" cellpadding="0">
<tr>
{foreach from=$nodelist item=node}
{if $node->depth == '1'}
<td><a href="{$node->url}"><img src="uploads/images/layout/menu/{$node->menutext}.jpg" onmouseover="src='uploads/images/layout/menu/{$node->menutext}-mouseover.jpg'" onmouseout="src='uploads/images/layout/menu/{$node->menutext}.jpg'" border="0" style="display: inline;"></a></td>
{/if}
{/foreach}
</tr>
</table>

Welke CSS wordt gebruikt weet ik zo niet. Waar kan ik deze vinden? Ik hoop dat ik de goede stukjes code heb gegeven...

Tja ik weet er echt nog weinig van maar ben bereid veel te leren 

[Jos]

Heb je een voorbeeld van een website waar het menu is zoals jij het graag ook wilt hebben?

[Cyroq]

Het bedraagt de website www.actionkids.nl. Het liefst zou ik een submenu krijgen met een rollover. Dus gewoon een verticaal lijstje met subknoppen (allemaal in kaders ofzo).
- Even googlen op 'bla': http://boston.k12.ma.us/bla/ zoiets dus.

[Jos]

Heb je al naar de standaard template "CSSMenu top + 2 columns" gekeken?

De website in je voorbeeld heeft een DHTML-menu, daar zit javascript in om dat vertraagde effect te krijgen. De genoemde standaard template maakt gebruik van css om het submenu te tonen.

Het nadeel van javascript in je menu is dat dit bij gebruikers uit kan staan, waardoor ze je site niet meer kunnen bekijken.

[Cyroq]

Ik hoef niet per se die vertraging erin. Ik heb die template gevonden, maar ik weet niet hoe ik er mee om moet gaan. Hoe koppel ik dit nu aan het maken van een sub menu bij het bestaande design van de website?
Nogmaals bedankt voor de hulp tot nu toe

[Jos]

Door de kleurtjes in de stylesheet aan te passen aan je wensen.

De stylesheet die je aan moet passen is "Navigation: CSSMenu - Horizontal"

[Cyroq]

Maar hoe koppel ik die stylesheet dan aan het menu/pagina in plaats van de stylesheet die er nu aan gekoppeld zit?
Of denk ik nu helemaal verkeerd?

[Jos]

Klopt. Iin feite koppel je stylesheets aan een sjabloon. Dat kun je doen via menu Opmaak > Sjablonen.
Dan krijg je een lijst met alle sjablonen en zie je ergens rechts een icoontje met "CSS" erin.
Via die weg koppel je dus één of meerdere stylesheets aan het betreffende sjabloon, dus ook een menu-stylesheet.

Let erop dat de volgorde van de stylesheets er ook toe doet.
De stijl die in de eerste stylesheet aan een element is toegewezen, kan in een volgende stylesheet weer overschreven worden.

[Cyroq]

Ik heb het kunnen koppelen, maar nu verandert de hele layout (dat kan ik wel aanpassen) behalve het menu. Ik kan ook (in de originele css) nergens iets vinden wat het menu zou moeten 'stylen'.
Het klinkt allemaal een beetje vaag maar dat is het ook Even een samenvatting:

- Ik heb een sjabloon met onder andere deze code: {menu template=menuNaam'} (menuNaam heb ik er zelf even neergezet om geen namen te noemen)
- In de originele css die hier naar verwijst staan alleen codes over het styleren van de hele pagina maar niets over het menu
- In de "Navigation: CSSMenu - Horizontal" css staan wél codes die het menu styleren.

Kortom: waar vind ik de css-codes die op dit moment het menu in elkaar zetten, om deze vervolgens toe te passen op "Navigation: CSSMenu - Horizontal"

Ik hoop dat het duidelijk is.

[Jos]

Ik begrijp dat je zelf een menutemplate hebt gemaakt? Waarom probeer je het niet eerst met een bestaande menutemplate.

Menutemplate en stylesheet horen bij elkaar, ze kunnen naar elkaar verwijzen door middel van class en id.

Een uitklap-menu op basis van CSS is best ingewikkeld, zeker om deze crossbrowser te krijgen (IE6 geeft vaak problemen)

Kies dus liever een menutemplate die al bestaat. Die hoef je i.h.a. niet aan te passen.
Maak vervolgens een kopie van de bijbehorende stylesheet en ga daarin de kleuren e.d. aanpassen. Met afmetingen moet je al heel erg oppassen en weten waar je mee bezig bent.
Koppel die nieuwe stylesheet aan je paginasjabloon (en verwijder evt de oorspronkelijke versie)

[Cyroq]

Ik heb zelf geen template gemaakt, deze bestond al. Iemand anders heeft deze website in elkaar gezet en ik wil nu submenu's toevoegen. Waarschijnlijk is die template van de vorige 'eigenaar' inderdaad zelf gemaakt.

Ik denk eerlijk gezegd dat ik het maar opgeef, om zo maar even een bestaand cms systeem aan te passen is toch te hoog gegrepen als je (nog) geen verstand van van cms en enkel een basis van css. Ik zou ook niet weten hoe classes, tags en id's werken (al begin ik al enig idee te krijgen wat het inhoudt).

[Jos]

Jammer dat je opgeeft. Terwijl je met de standaard menutemplate en -stylesheet eenvoudig je wens kunt realiseren.

Kijk gewoon eens wat je site doet als je de volgende stapjes uitvoert:

1) vervang in je paginasjabloon jouw {menu template='menuNaam'} door {menu template='cssmenu.tpl'}

2) voeg toe in je paginasjabloon ergens tussen en :



{* The above JavaScript is required for CSSMenu to work in IE *}

3) koppel de stylesheet "Navigation: CSSMenu - Horizontal" aan je paginasjabloon en zorg dat deze onderaan in de lijst staat.

Klaar? op het aanpassen van de kleurtjes na.

[Cyroq]

Bedankt! Het lukt nu inderdaad Ik begin steeds meer te begrijpen hoe CMS in elkaar zit.
Ik heb de kleuren een heel eind kunnen aanpassen, maar zit nog met 2 problemen.
1: omdat ik de css die het oude menu stijlt niet kan vinden weet ik niet welk lettertype in het menu werd gebruikt. Waar zou ik die css kunnen vinden? (zie vorige post: de enige css die ik vind heeft het alleen maar over de body en niet het menu)
2: elke knop gaat nu vooraf door een nummer (1:, 2:, 3:, etc). Hoe kan ik dat weghalen?

Nogmaals bedankt