Submenu maken

HardBase · Post by **HardBase** » Thu Feb 10, 2011 9:31 pm

Ik ben al enige tijd bezig om een submenu te maken, maar ik kom er niet uit.

De website zit in een testomgeving zodat de bezoeker de wijzigingen niet live ziet.

http://www.aeroit.nl/cms

Aan de linkerkant en aan de bovenkant zit het menu. In beide gevallen moet er een submenu verschijnen na het aanklikken van een link. Bijvoorbeeld workshops, deze moet onderverdeeld kunnen worden.

Sjabloon:

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<__html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>{title}</title>
{stylesheet}
{metadata}
</head>


</__body>
<div id="center">
<div id="banner"></div>
<center>
<div id="menu">{menu}</div>





</center>
<div id="hoi"></div>
<div id="content">
<div id="textbox">
{content}
</div>
</div>

<div id="leftmenu"> <div id="linksmenu"> 
 
  <p><a href="index.php?page=home">Home</a> </p>
  <p><a href="index.php?page=entreeticket">Entreeticket</a></p>
  <p><a href="index.php?page=workshops">Workshops</a></p>
  <p><a href="index.php?page=lookshops">Lookshops</a></p>
  <p><a href="index.php?page=standhouders">Standhouders</a></p>
  <p><a href="index.php?page=deelnemers">Deelnemers</a></p>
  <p><a href="index.php?page=wedstrijden">Wedstrijden</a></p>
  <p><a href="index.php?page=nieuws">Nieuws</a></p>
  <p><a href="index.php?page=contact">Contact</a></p>
</div>    
</div>


<div id="bottum"></div>


</div>

<__body> 
</__html>

Menu

Code: Select all

{if $count > 0}
{foreach from=$nodelist item=node}<a href="{$node->url}" 
{if $node->target ne ""} target="{$node->target}"{/if}
>{$node->menutext}</a>
{if $count > ($node->index+1)} | 
{/if}
{/foreach}
{/if}

CSS

Code: Select all

@charset "utf-8";
/* CSS Document */
<!--
a:link {
	color: #FFF;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #FFF;
}
a:hover {
	text-decoration: none;
	color: #FFF;
}
a:active {
	text-decoration: none;
	color: #FFF;
}

-->



body { background-color:#fff;
}
#center {width:1022px;
margin-left:auto;
margin-right:auto;}

#banner {background-image:url(http://www.aeroit.nl/cms/uploads/images/Website_01.png);
background-repeat:no-repeat;
height:121px;
width:1022px;
}

#menu {background-image:url(http://www.aeroit.nl/cms/uploads/images/Website_02.png);
background-repeat:x;
height:28px;
width:1022px;
font-family:Verdana, Geneva, sans-serif;
font-size:13px;
color:#fff;

}



#hoi {background-image:url(http://www.aeroit.nl/cms/uploads/images/Website_03.png);
background-repeat:no-repeat;
height:62px;
width:1022px;
margin-top:-10px;

}

#content {background-image:url(http://www.aeroit.nl/cms/uploads/images/Website_05.gif);
background-repeat:no-repeat;
height:544px;
width:835;
margin-left:189px;
}

#textbox{
	width:815px;
	height:500px;
	height:auto;
	padding-top:42px;
	margin-left:10px;
	font-family:Verdana, Geneva, sans-serif;
	font-size:12px;
}
	

#leftmenu {background-image:url(http://www.aeroit.nl/cms/uploads/images/Website_04.png);
background-repeat:no-repeat;
height:547px;
width:190px;
margin-top:-545px;
}

#bottum {background-image: url(http://www.aeroit.nl/cms/uploads/images/Website_07.gif);
background-repeat:no-repeat;
height:23px;
width:1022px;
}

#linksmenu {
	height:400px;
	width:100px;
	margin-left:25px;
	padding:30px;
	font-weight:bold;
	font-family:Verdana, Geneva, sans-serif;
	font-size:12px;
	
}

De bedoeling is dat het menu aan de linkerkant zichtbaar blijft en aan de bovenkant een dropdown menu wordt gegenereerd. Ik heb via de zoekfunctie niet iets kunnen vinden wat mij verder op weg heeft kunnen helpen, daarnaast heb ik de helpfunctie geraadpleegd van CMSMS zelf.

Welke code moet toegevoegd worden en welke andere aanpassingen zijn nodig?

In afwachting van jullie hulp/reacties.

pedes · Post by **pedes** » Fri Feb 11, 2011 1:45 pm

u zal eerst en vooral subpaginas moeten hebben, anders zal u uiteraard geen submenu kunnen zien

uw bovenste horizontale menu zal je dan aanroepen met iets zoals dit:

Code: Select all

{menu template='naam_van_uw_menutemplate' start_level='1' number_of_levels='1'}

uw verticale menu kan u, nadat u subpagina's hebt aangemaakt, aanroepen met voorbeeld:

Code: Select all

{menu template='naam_van_uw_menutemplate' start_level='2' collapse='1'}

Mvg,
Peter

HardBase · Post by **HardBase** » Fri Feb 11, 2011 6:55 pm

Beste Peter,

Bedankt voor je uitleg. Onder workshops heb ik een aantal workshops gezet en ziet er als volgt uit:

3 - Workshops
3.1 - Haar workshop
3.2 - Nagel workshop
3.3 - Oog workshop

De namen staan echter niet correct onder elkaar vermeld aan de linkerkant van de website.

http://www.aeroit.nl/cms

Daarnaast is nu het gehele linkermenu niet meer zichtbaar.

pedes · Post by **pedes** » Fri Feb 11, 2011 8:07 pm

ik zie u linker menu wel hoor ... maar de layout is wat pover ...
daar kan je met wat css wel wat aan doen ...

dat je het volledige menu niet meer ziet in de linkerkant is normaal ... aangezien je in je menu aanroep kies voor { ... start_level='2'...}
dan start uw menu maar op level 2
ik begrijp trouwens niet waarom u het menu helemaal op de linker kant zou willen tonen ?? de gebruiker selecteerde al de eerste stap met het horizontale menu ...
waarom zou je hem nog eens dit menu voorschotelen ...

Mvg,
Peter

HardBase · Post by **HardBase** » Fri Feb 11, 2011 8:17 pm

De klant heeft hierom gevraagd. normaliter kies ik zelf altijd voor een menu.

Maar als we het zo laten, denk dat het geen probleem is. Het uiterlijk van het menu aan de linkerkant wordt, neem ik aan, ook deels bepaald door het sjabloon?

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. *}

{assign var='number_of_levels' value=10000}
{if isset($menuparams.number_of_levels)}
  {assign var='number_of_levels' value=$menuparams.number_of_levels}
{/if}

{if $count > 0}
<div id="menuwrapper">
<ul id="primary-nav">
{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}
{repeat string='<ul class="unli">' 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->parent == true or $node->current == true}
  {assign var='classes' value='menuactive'}
  {if $node->parent == true}
    {assign var='classes' value='menuactive menuparent'}
  {/if}
  {if $node->children_exist == true and $node->depth < $number_of_levels}
    {assign var='classes' value=$classes|cat:' parent'}
  {/if}
  <li class="{$classes}"><a class="{$classes}" 
{elseif $node->type == 'sectionheader' and $node->haschildren == true}
  <li class="menuparent"><a class="menuparent"><span class="sectionheader">{$node->menutext}</span></a>
{elseif $node->type == 'sectionheader'}
  <li><a ><span class="sectionheader">{$node->menutext}</span></a>
{elseif $node->type == 'separator'}
  <li style="list-style-type: none;"> <hr class="menu_separator" />
{elseif $node->children_exist == true and $node->depth < $number_of_levels and $node->type != 'sectionheader' and $node->type != 'separator'}
  <li class="menuparent"><a class="menuparent" 
{else}
  <li>
  <a 
{/if}

{if ($node->type != 'sectionheader' and $node->type != 'separator') or $node->parent == true or $node->current == true }
 {if $node->target}target="{$node->target}" {/if}
href="{$node->url}"><span>{$node->menutext}</span></a>
{/if}
{/foreach}
{repeat string='</li></ul>' times=$node->depth-1}
</li>
</ul>
<div class="clearb"></div>
</div>
{/if}

Ik heb namelijk een keuzerondje links van de link, ik kan uit de tekst niet opmaken waar ik deze kan aanpassen.

HardBase · Post by **HardBase** » Fri Feb 11, 2011 8:21 pm

Ik heb nu iets kalere versie gepakt:

Code: Select all

{if $count > 0}
{foreach from=$nodelist item=node}<a href="{$node->url}" 
{if $node->target ne ""} target="{$node->target}"{/if}
>{$node->menutext}</a>
{/foreach}
{/if}

Hoe krijg ik hierin aangegeven dat de links correct onder elkaar moeten komen te staan? Dit wordt nu namelijk niet correct weergegeven.

http://www.aeroit.nl/cms/index.php?page=workshops

Mvg,

Guido

pedes · Post by **pedes** » Sat Feb 12, 2011 6:56 pm

indien je ook op de linkerkant het volledige menu wenst weer te geven is dit geen probleem

Code: Select all

{menu template='naam_van_uw_menutemplate' start_level='1' collapse='2'}

het stylen van uw menu doe je met css, het menutemplate zit daar weinig voor tussen
om uw links meer in volledige zin onder elkaar te krijgen, zal je wellicht uw div iets breder moeten maken of uw tekst grote kleiner maken.

#linksmenu {
height:400px;
width:120px;
margin-left:25px;
padding:30px;
font-weight:bold;
font-family:Verdana, Geneva, sans-serif;
font-size:12px;

HardBase · Post by **HardBase** » Sun Feb 13, 2011 8:38 pm

Bedankt, ik heb het menu nu aangepast. Hoe verander ik de kleur in het linkermenu? In de CSS is namelijk opgenomen dat de links wit van kleur zijn. Echter moeten de links in het bovenmenu wit blijven.

Bvd,

Mvg, Guido

pedes · Post by **pedes** » Mon Feb 14, 2011 7:42 am

u bedoeld wellicht de kleur van de background ...
dit is bij u een vaste image nl.

#leftmenu {background-image:url(images/Website_04a.png);
background-repeat:no-repeat;
height:547px;
width:190px;
margin-top:-545px;
}

dus als je hiervan de kleur wenst aan te passen zal je een aangepaste bg image moeten maken

Maar ik denk dat u er goed aan doet om jezelf even te verdiepen in de css
http://www.handleidinghtml.nl/css/css-i ... tie01.html

mvg,
Peter

HardBase · Post by **HardBase** » Mon Feb 14, 2011 11:20 am

Ik bedoelde de links in het menu, de achtergrond hoeft niet veranderd te worden.

Bedankt voor de link, ik zal er eens naar kijken.

pedes · Post by **pedes** » Mon Feb 14, 2011 6:08 pm

uw links zijn wit (#fff) omdat deze kleur is in gesteld op de a

a:link {
color: #FFF;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #FFF;
}
a:hover {
text-decoration: none;
color: #FFF;
}
a:active {
text-decoration: none;
color: #FFF;

}

hier deze kleur aanpassen zal uw linkkleur doen veranderen.

Mvg,
Peter

HardBase · Post by **HardBase** » Wed Feb 16, 2011 8:00 pm

Ik wil alleen de kleur van de tekst in het linkermenu aanpassen, boven menu moet wit blijven. Als ik dit aanpas dan doet ie dit uiteraard voor het gehele gedeelte, kan dit gespecificeerd worden?

Alvast bedankt voor je antwoord.

Mvg,

Guido

pedes · Post by **pedes** » Thu Feb 17, 2011 4:44 pm

je moet in uw css uw a-tag door de div laten voorgaan en daar waar nodig de kleur aanpassen

Code: Select all

#linksmenu a:link {
	color: red;
	text-decoration: none;
}
#linksmenu a:visited {
	text-decoration: none;
	color: green;
}
#linksmenu a:hover {
	text-decoration: none;
	color: blue;
}
#linksmenu a:active {
	text-decoration: none;
	color: black;

}

mvg,
Peter

HardBase · Post by **HardBase** » Fri Mar 18, 2011 11:16 am

Code: Select all

@charset "utf-8";
/* CSS Document */
<!--

a:link {
	color: #FFF;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #FFF;
}
a:hover {
	text-decoration: none;
	color: #FFF;
}
a:active {
	text-decoration: none;
	color: #FFF;
}

#linksmenu a:link {
   color: red;
   text-decoration: none;
}
#linksmenu a:visited {
   text-decoration: none;
   color: green;
}
#linksmenu a:hover {
   text-decoration: none;
   color: blue;
}
#linksmenu a:active {
   text-decoration: none;
   color: black;

}

-->



body { background-color:#fff;
}
#center {width:1022px;
margin-left:auto;
margin-right:auto;}

#banner {background-image:url(http://www.aeroit.nl/cms/uploads/images/Website_01.png);
background-repeat:no-repeat;
height:121px;
width:1022px;
}

#menu {background-image:url(http://www.aeroit.nl/cms/uploads/images/Website_02.png);
background-repeat:x;
height:28px;
width:1022px;
font-family:Verdana, Geneva, sans-serif;
font-size:13px;
color:#fff;

}



#hoi {background-image:url(http://www.aeroit.nl/cms/uploads/images/Website_03.png);
background-repeat:no-repeat;
height:62px;
width:1022px;
margin-top:-10px;

}

#content {background-image:url(http://www.aeroit.nl/cms/uploads/images/Website_05.gif);
background-repeat:no-repeat;
height:544px;
width:835;
margin-left:189px;
}

#textbox{
	width:815px;
	height:500px;
	height:auto;
	padding-top:42px;
	margin-left:10px;
	font-family:Verdana, Geneva, sans-serif;
	font-size:12px;
}
	

#leftmenu {background-image:url(http://www.aeroit.nl/cms/uploads/images/Website_04a.png);
background-repeat:no-repeat;
height:547px;
width:250px;
margin-top:-545px;
}

#bottum {background-image: url(http://www.aeroit.nl/cms/uploads/images/Website_07.gif);
background-repeat:no-repeat;
height:23px;
width:1022px;
}

#linksmenu {
	height:400px;
	width:120px;
	margin-left:25px;
	padding:30px;
	font-weight:bold;
	font-family:Verdana, Geneva, sans-serif;
	font-size:10px;
font-color:pink;
	
}

Excuus door mijn afwezigheid. Bovenstaande heb ik ingevoerd, echter werkt het niet op deze manier? Wat zie ik over het hoofd? Ik heb het ook al op andere manieren geprobeerd.

Alvast bedankt voor uw reactie.

Guido

HardBase · Post by **HardBase** » Fri Mar 18, 2011 11:41 am

Ik was te snel, hij is inmiddels aangepast en het werkt!

Bedankt,

Guido

CMS Made Simple Forums

Submenu maken

Submenu maken

Re: Submenu maken

Re: Submenu maken

Re: Submenu maken

Re: Submenu maken

Re: Submenu maken

Re: Submenu maken

Re: Submenu maken

Re: Submenu maken

Re: Submenu maken

Re: Submenu maken

Re: Submenu maken

Re: Submenu maken

Re: Submenu maken

Re: Submenu maken