M E N U Topic is solved

[iStevo]

Goedenavond,

Ik heb al een aantal basiszaken onder de knie en nu is het tijd om te leren een menu te maken binnen CMSms. Ik heb een menu hieronder die ik via DW al aan het werk heb gekregen, maar die ik nu nog binnen mijn website moet toevoegen.

Wie kan me op weg helpen??

Code: Select all

<div id="menu">
<ul>
  <li><h2>Hoofdmenu 1</h2>
    <ul>
      <li><a href="#" title="Link 1a">Link 1a</a>
        <ul>
          <li><a href="#" title="Link 1a - 1">Link 1a - 1</a></li>
          <li><a href="#" title="Link 1a - 2">Link 1a - 2</a></li>
          <li><a href="#" title="Link 1a - 3">Link 1a - 3</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

<ul>
  <li><h2>Hoofdmenu 2</h2>
    <ul>
      <li><a href="#" title="Link 2a">Link 2a</a></li>
      <li><a href="#" title="Link 2b">Link 2b</a>
        <ul>
          <li><a href="#" title="Link2b - 1">Link 2b - 1</a></li>
          <li><a href="#" title="Link2b - 2">Link 2b - 2</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

<ul>
  <li><h2>Hoofdmenu 3</h2>
    <ul>
      <li><a href="#" title="Link 3a">Link 3a</a></li>
      <li><a href="#" title="Link 3b">Link 3b</a>
        <ul>
          <li><a href="index.html#">Link 3b - 1</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>							
</div>

Code: Select all

#menu {
	width: 100%;
	background: #000;
	float: left;
}

#menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
	width: 12em;
	float: left;
}

#menu a, #menu h2 {
	font: bold 11px/16px arial, helvetica, sans-serif;
	display: block;
	border-width: 1px;
	border-style: solid;
	border-color: #ccc #888 #555 #bbb;
	margin: 0;
	padding: 2px 3px;
}

#menu h2 {
	color: #fff;
	background: #000;
	text-transform: uppercase;
}

#menu a {
	color: #000;
	background: #efefef;
	text-decoration: none;
}

#menu a:hover {
	color: #a00;
	background: #fff;
}

#menu li {position: relative;}

#menu ul ul ul {
	position: absolute;
	top: 6px;
	left: 100%;
}

#menu ul ul {
	position: absolute;
	z-index: 500;
}

div#menu ul ul {
	display: none;
}

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

div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
	{display: none;}

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

[Rolf]

Ik heb al een aantal basiszaken onder de knie en nu is het tijd om te leren een menu te maken binnen CMSms. Ik heb een menu hieronder die ik via DW al aan het werk heb gekregen, maar die ik nu nog binnen mijn website moet toevoegen.

Wie kan me op weg helpen??

Binnen CMSMS werkt dit iets anders.
Een menu wordt gegenereerd door een menu sjabloon. Een stukje code die de Lijst maakt inclusief de benodigde classen voor de styling.

Kijk maar eens in de MenuManager. De zichtbare sjablonen zijn bestanden die op de server staan en zijn niet te wijzigen.
De sjablonen kun je wel in de database plaatsen en dan wijzigen.

In het sjabloon staan normaal gesproken zoiets als
{menu template='cssmenu.tpl'}

gebruik je een geimporteerd sjabloon, verwijder dan de .tpl
{menu template='cssmenu'}

Met de bestaande menu sjablonen kunt je verschillende soorten navigatie maken.
Maak een keer een testwebsite en ga eens spelen  :)

Je kunt ook zonder de MenuManager het menu wel hardcoded in een html-sjabloon opnemen, maar dan omzeil je het principe (het gemak) van een CMS.

grt. Rolf  :)

ps.
De bestaande menu sjablonen zijn meestal al voorzien van allerlei hacks voor de browser compatibiliteit. En werken daardoor in alle recente browser. Bij een zelf gemaakt menu heb je die garantie (nog) niet.

[iStevo]

Ik dacht dat het gemakkelijker was om vanuit dit menu te leren.
Ik vind soms mijn weg niet in al die code binnen menu.

Ik zal me er nog eens in smijten.

[Rolf]

Als je een TEST website maakt, installeer dan eens een oude versie CMSMS vóór 1.6 -> Versie 1.5.4 dus.
Deze is voorzien van eenvoudigere menu en html sjablonen. Om te leren zijn deze gemakkelijker te doorgronden.

Maar gebruik deze CMSMS versies vanzelfsprekend niet meer voor live websites!!

®

[Jos]

Ik dacht dat het gemakkelijker was om vanuit dit menu te leren.
Ik vind soms mijn weg niet in al die code binnen menu.

Ik denk dat we er misschien wel kunnen komen. Jouw html structuur lijkt al heel sterk op wat de minimal_menu.tpl genereert.
Je eerste stap zou dus zijn om bij die menu template op de knop "importeer sjabloon naar de database" te klikken. Geeft het een naam en sla het op. Van daar uit kunnen we dan verder werken. De hoeveelheid smarty-code die in de menutemplate zit is best omvangrijk en daardoor lijkt het ingewikkeld.

Stap 2 zou het aanpassen van de code kunnen zijn, zodat precies jouw html-structuur gegenereerd wordt. Maar ik zou je eerst willen vragen om te kijken of we jouw structuur iets meer in lijn met de menutemplate kunnen brengen. Zou je daarom eens willen testen of de volgende code ook werkt voor jou?

Code: Select all

<div id="menu">
<ul>
  <li><h2>Hoofdmenu 1</h2>
    <ul>
      <li><a href="#" title="Link 1a">Link 1a</a>
        <ul>
          <li><a href="#" title="Link 1a - 1">Link 1a - 1</a></li>
          <li><a href="#" title="Link 1a - 2">Link 1a - 2</a></li>
          <li><a href="#" title="Link 1a - 3">Link 1a - 3</a></li>
        </ul>
      </li>
    </ul>
  </li>

  <li><h2>Hoofdmenu 2</h2>
    <ul>
      <li><a href="#" title="Link 2a">Link 2a</a></li>
      <li><a href="#" title="Link 2b">Link 2b</a>
        <ul>
          <li><a href="#" title="Link2b - 1">Link 2b - 1</a></li>
          <li><a href="#" title="Link2b - 2">Link 2b - 2</a></li>
        </ul>
      </li>
    </ul>
  </li>

  <li><h2>Hoofdmenu 3</h2>
    <ul>
      <li><a href="#" title="Link 3a">Link 3a</a></li>
      <li><a href="#" title="Link 3b">Link 3b</a>
        <ul>
          <li><a href="index.html#">Link 3b - 1</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>							
</div>

[iStevo]

Ik denk dat we er misschien wel kunnen komen. Jouw html structuur lijkt al heel sterk op wat de minimal_menu.tpl genereert.
Je eerste stap zou dus zijn om bij die menu template op de knop "importeer sjabloon naar de database" te klikken. Geeft het een naam en sla het op. Van daar uit kunnen we dan verder werken. De hoeveelheid smarty-code die in de menutemplate zit is best omvangrijk en daardoor lijkt het ingewikkeld.

Done.
Ik heb die smarty-code uit het menubeheer gehaald en even naar een kladblok verhuisd omdat ik dan zo wat meer overzicht heb.

Stap 2 zou het aanpassen van de code kunnen zijn, zodat precies jouw html-structuur gegenereerd wordt. Maar ik zou je eerst willen vragen om te kijken of we jouw structuur iets meer in lijn met de menutemplate kunnen brengen. Zou je daarom eens willen testen of de volgende code ook werkt voor jou?

Ik heb er geen probleem mee om met volgende structuur te werken.
Ben benieuwd naar de volgende stap.

[Jos]

Ik heb er geen probleem mee om met volgende structuur te werken.

Maar werkt het nog steeds met jouw css? daar gaat het om. Als dat al misgaat moeten we niet naar de volgende stap.

Dat is het toevoegen van jouw menu-css aan je pagina-stylesheet. Je kunt het voor het overzicht ook in een nieuwe stylesheet zetten en die aan je pagina-sjabloon koppelen. Ik werk zelf doorgaans met maar één stylesheet.

[iStevo]

jos, ik weet niet hoe te beginnen
ik zie die smarty maar ik begrijp niet wat ik erin moet zien.

edit: ik heb css in mijn stylesheet geplaatst en ik zie het menu wel werken maar niet correct (hij plaatst de menu-items onder elkaar ipv naast elkaar). Eerste stap is dus achter de rug.

[Jos]

hij plaatst de menu-items onder elkaar ipv naast elkaar

Dat was dus de reden waarom ik je vroeg om eerst de wijziging op je testmenuutje toe te passen  ;)

Maar ik denk dat we er wel uit gaan komen.

Wil je in je css iets aanpassen:

Probeer eens dit:

Code: Select all

#menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
	width: 12em;
	float: left;
}

te vervangen door dit:

Code: Select all

#menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

#menu>ul>li {
	width: 12em;
	float: left;
}

aanvulling:
Heb je de rood gemarkeerde opmerking van Rolf nog ter harte genomen door te checken of jouw menu ook goed werkt in andere browsers? Als je een foutje tegenkomt, dan zou het eigenlijk een No Go moeten zijn en kun je beter op zoek naar een ander menu.

[iStevo]

ps.
De bestaande menu sjablonen zijn meestal al voorzien van allerlei hacks voor de browser compatibiliteit. En werken daardoor in alle recente browser. Bij een zelf gemaakt menu heb je die garantie (nog) niet.

Ik heb het voorlopig uitgetest op IE, Chrome en FF en het oogt allemaal hetzelfde.

Jos, wat is gemakkelijker? Verder werken hoe we nu bezig zijn met mijn menu of vanuit een CMSms te starten.

[Jos]

Volgens mij is het al zo goed als klaar 

Wat nog zou kunnen is het aanpassen van de menutemplate zodat je de Hoofdmenu 1 kunt nabootsen. Dat kan bijvoorbeeld door het content type "Section Header" voor die pagina's te gebruiken.

In je menutemplate vind je de regels:

Code: Select all

{elseif $node->type == 'sectionheader'}
<li class="sectionheader">{$node->menutext}

Dit kun je aanpassen naar:

Code: Select all

{elseif $node->type == 'sectionheader'}
<li class="sectionheader"><h2>{$node->menutext}</h2>

Logisch hè? en simpel 

[iStevo]

U hebt groot gelijk. Het is bijna hetzelfde.
Menu 1 toont hij goed

Menu 2 en Menu 3 toont hij nog niet correct.

[Jos]

ow... dan zijn we nu op zo'n punt waar ik niet meer weet wat jij wel en niet aangepast hebt.

Kun je je menutemplate hier plaatsen en ook het css-deel dat op het menu van toepassing is?

En wat is er precies niet goed aan?

[iStevo]

Ik heb enkel aangepast wat ik via jou heb verkregen (buiten de kleurtjes).

Wat moet nog veranderen.

menu 2 "n menu 3 moeten breder.
menu 3 mag misschien iets overlappen op menu 2

Code: Select all

#menu {
	width: 100%;
       	background: #efefef;
	float: left;
}

#menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

#menu>ul>li {
	width: 12em;
	float: left;
}

#menu a, #menu h2 {
	font: bold 11px/16px Verdana, Arial, Comic Sans MS, sans-serif;
        width: 100%;
	display: block;
	border-width: 1px;
	border-style: solid;
	border-color: #ccc #888 #555 #bbb;
	margin: 0;
	padding: 5px 0 5px 20px;
}

#menu h2 {
	color: #000;
	background: #efefef;
	text-transform: uppercase;
}

#menu a {
	color: #000;
	background: #efefef;
	text-decoration: none;
}

#menu a:hover {
	color: #a00;
	background: #FFF;
}

#menu li {position: relative;}

#menu ul ul ul {
	position: absolute;
	top: 6px;
	left: 100%;
}

#menu ul ul {
	position: absolute;
	z-index: 500;
}

div#menu ul ul {
	display: none;
}

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

div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
	{display: none;}

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

Code: Select all

{* CSS classes used in this template:
.currentpage - The active/current page
.bullet_sectionheader - To style section header
hr.separator - To style the ruler for the separator *} 
{if $count > 0}
<ul class="clearfix">
{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}
{repeat string="<ul>" times=$node->depth-$node->prevdepth}
{elseif $node->depth < $node->prevdepth}
{repeat string="</li></ul>" times=$node->prevdepth-$node->depth}
</li>
{elseif $node->index > 0}</li>
{/if}

{if $node->current == true}
<li><a href="{$node->url}" class="currentpage"{if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext} </a>

{elseif $node->parent == true && $node->depth == 1 and $node->type != 'sectionheader' and $node->type != 'separator'}
<li class="activeparent"> <a href="{$node->url}" class="activeparent"{if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext} </a>

{elseif $node->type == 'sectionheader'}
<li class="sectionheader"><h2>{$node->menutext}</h2>

{elseif $node->type == 'separator'}
<li style="list-style-type: none;"> <hr class="separator" />

{else}
<li><a href="{$node->url}"{if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext} </a>

{/if}

{/foreach}

{repeat string="</li></ul>" times=$node->depth-1}</li>
</ul>
{/if}

[Jos]

De breedte van de onderliggende submenu's kun je aanpassen door de regel:

Code: Select all

#menu li {position: relative;}

te veranderen in

Code: Select all

#menu li {
	position: relative;
	width: 12em;
}

Nu heb ik dezelfde breedte aangehouden als het hoofdmenu. Als je dat afwijkend wilt maken, dan moet je dit blokje code plaatsen vóór #menu>ul>li { , omdat je anders ook de breedte van het hoofdmenu mee aanpast.

En dat overlappende had je voorbeeldmenuutje ook niet toch?? Nu niet ineens de uitgangspunten gaan wijzigen