CMS Made Simple Forums

Code: Select all

/* Vertical menu for the CMS CSS Menu Module */
/* by Alexander Endresen */


/* The wrapper determines the width of the menu elements */
#menuwrapper { 
   width: 100%; 
}


/* Unless you know what you do, do not touch this */ 
#primary-nav, #primary-nav ul { 
   list-style: none; 
   margin: 0px; 
   padding: 0px; 
   width: 100%; 
   margin-left: -1px;
}
#primary-nav ul { 
   position: absolute; 
   top: 0; 
   left: 100%; 
   display: none; 
}
#primary-nav li { 
   margin-bottom: -1px; 
   position: relative; 
}


/* Styling the basic apperance of the menu elements */
#primary-nav a { 
/*border: 1px solid #FFFFFF;*/
   display: block; 
   margin: 0px; 
   padding: 10px 10px; 
   color: #FFFFFF;
   text-decoration: none; 
   background: transparent; 
   min-height:1em; /* Fixes IE7 whitespace bug*/ 
font-family: Bremen Bd BT;
}

#primary-nav li, #primary-nav li.menuparent { 
   background-color: #000000; 
background-image: url(images/knopleeg.jpg); 
   min-height:1em; /* Fixes IE7 bug*/
}


/* Styling the basic apperance of the active page elements (shows what page in the menu is being displayed) */
#primary-nav li.menuactive a{color:#ff0000;}
#primary-nav li.menuactive { 
   background-color: #000000; 
}

/* Styling the basic apperance of the menuparents - here styled the same on hover (fixes IE bug) */
#primary-nav li.menuparent, 
#primary-nav li.menuparent:hover
#primary-nav li.menuparenth { 
   background-image: url(images/knopleeg.jpg); 
}


/* Styling the apperance of menu items on hover */
#primary-nav li:hover, 
#primary-nav li.menuh, 
#primary-nav li.menuparenth, 
#primary-nav li.menuactiveh { 
    background-image: url(images/knopover.jpg);
}


/* The magic - set to work for up to a 3 level menu, but can be increased unlimited */
#primary-nav ul, 
#primary-nav li:hover ul, 
#primary-nav li:hover ul ul, 
#primary-nav li.menuparenth ul, 
#primary-nav li.menuparenth ul ul { 
   display: none; 
}
#primary-nav li:hover ul, 
#primary-nav ul li:hover ul, 
#primary-nav ul ul li:hover ul, 
#primary-nav li.menuparenth ul, 
#primary-nav ul li.menuparenth ul, 
#primary-nav ul ul li.menuparenth ul { 
   display: block; 
}


/* IE Hack, will cause the css to not validate */

#primary-nav li, #primary-nav li.menuparenth { _float: left; _height: 1%; }
#primary-nav li a { _height: 1%; }


/* section header */
#primary-nav li.sectionheader {
   border-left: 1px solid #006699;
   border-top: 1px solid #006699; 
   font-size: 130%;
   font-weight: bold;
   padding: 0.5em 0 0.5em 0.5em;
   background-color: #0000FF;
   margin: 0;
   width: 100%;

   background-image: url(images/sectionheader.jpg);
}


/* separator */
#primary-nav li hr.separator {
   display:block;
   height: 2.0em;
   color: #0000FF;
   background-color: #0000FF;
   width: 100%;
   border:0px;
   margin-top: -7px;
   margin-bottom: -6px;
   padding:0px;
   background-image: url(images/separator.jpg);
}

Code: Select all

{* CSS classes used in this template:
.active - The active page in the horizontal menu (first level).
.bullet_sectionheader - To style section header
hr.separator - To style the ruler for the separator *}
{if $count > 0}
<ul>
{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 or $node->parent == true}
<li id="special"><a href="{$node->url}"{if $node->target ne ""} target="{$node->target}"{/if}><span>{$node->menutext}</span></a>
{elseif $node->type == 'sectionheader'}
<li><a href="{$node->url}"><span>{$node->menutext}</span></a>
{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}><span>{$node->menutext}</span></a>{/if}
{/foreach}

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

Code: Select all

<li class="sectionheader">
<span> kerntaken </span>
>
<dfn>2: </dfn>
kerntaken
</li> 

Code: Select all

<li>
<a href="yourLinkAdress"<span> kerntaken </span></a>
</li> 

Code: Select all

{* CSS classes used in this template:
.active - The active page in the horizontal menu (first level).
.bullet_sectionheader - To style section header
hr.separator - To style the ruler for the separator *}
{if $count > 0}
<ul>
{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 or $node->parent == true}
<li id="special"><a href="{$node->url}"{if $node->target ne ""} target="{$node->target}"{/if}><span>{$node->menutext}</span></a>
{elseif $node->type == 'sectionheader'}
<li><a href="{$node->url}"><span>{$node->menutext}</span></a>
{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}><span>{$node->menutext}</span></a>{/if}
{/foreach}

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

Code: Select all

<li class="sectionheader">
<span> kerntaken </span>
>
<dfn>2: </dfn>
kerntaken
</li> 

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" xml:lang="en" lang="en">
{* Change lang="en" to the language of your site *}

<head>

<title>{sitename} - {title}</title>
{* The sitename is changed in Site Admin/Global settings. {title} is the name of each page *}

{metadata}
{* Don't remove this! Metadata is entered in Site Admin/Global settings. *}

{stylesheet}
{* This is how all the stylesheets attached to this template are linked to *}

{cms_selflink dir="start" rellink=1}
{cms_selflink dir="prev" rellink=1}
{cms_selflink dir="next" rellink=1}
{* Relational links for interconnections between pages, good for accessibility and Search Engine Optmization *}


{literal}
<__script__ type="text/JavaScript">
<!--
//pass min and max -measured against window width
function P7_MinMaxW(a,b){
	var nw="auto",w=document.documentElement.clientWidth;
	if(w>=b){nw=b+"px";}if(w<=a){nw=a+"px";}return nw;
}
//-->
</__script>
<!--[if lte IE 6]>
<style type="text/css">
#pagewrapper {width:expression(P7_MinMaxW(720,950));}
#container {height: 1%;}
</style>
<![endif]-->
{/literal}
{* The min and max page width for Internet Explorer is set here. For other browsers it's in the stylesheet "Layout: Left sidebar + 1 column" *}


<!--[if IE]>
<__script__ type="text/javascript" src="modules/MenuManager/CSSMenu.js"></__script>
<![endif]-->
{* The above JavaScript is required for CSSMenu to work in IE *}

<__script__ type="text/javascript" src="images/flashobject.js"></__script>



</head>

</__body>

<div id="pagewrapper">




   {* Start Header, with logo image that links to the default start page. Logo image is changed in the stylesheet  "For template: Left menu + 1 column" *}

<div id="header" style="width: 950px; height: 145px"></div>
      <__script__ type="text/javascript">
var fo = new FlashObject("images/header.swf", "animationName", "950", "145", "8", "#FFFFFF");
fo.addParam("allowScriptAccess", "sameDomain");
fo.addParam("quality", "high");
fo.addParam("scale", "noscale");
fo.addParam("loop", "false");
fo.write("header");
</__script>

   {* End Header *}


   {* Start Search *}
   <div id="search">
          {search}
   </div>
   {* End Search *}


   {* Start Breadcrumbs *}
   <div class="breadcrumbs">
        {breadcrumbs starttext='Je bent hier' root='Home' delimiter='»'}
   

   </div>
   {* End Breadcrumbs *}


   {* Start Content (Navigation and Content columns) *}
   <div id="content">

      {* Start Navigation *}
      <div id="sidebar">
         
         {menu template='cssmenu.tpl'}
      
      </div>
      {* End Navigation *}


      {* Start Content Area *}
      <div id="main">
         <div style="float: right;">{print showbutton=true script=true}</div>
         <h2>{title}</h2>
         {content} <br />


         {* Start relational links *}
	 <div class="hr"></div>
	 <div class="right49">
	 	<p>{anchor anchor='main' text='^ Top'}</p>
	 </div>
         <div class="left49">
            <p>{cms_selflink dir="previous" label="vorige pagina: "} <br />
            {cms_selflink dir="next" label="volgende pagina: "}</p>
         </div>
         {* The label parameter doesn't need to be there if you're using English, but is here to show how it's used if you don't want the English text "Previous page" *}
	 {* End relational links *}

      
      </div>
	  {* End Content Area *}


   </div>
   {* End Content *}


   {* Start Footer. Edit the footer in the Global Content Block called "footer" *}
   <div id="footer">
      {global_content name='footer'}
   </div>   
   {* End Footer  *}


</div>{* end pagewrapper *}
<__body>
</__html>

Code: Select all

>{elseif $node->type == 'sectionheader'}
><dfn>{$node->hierarchy}: </dfn>{$node->menutext}</a>
{/if}

Code: Select all

{elseif $node->type == 'sectionheader'}{/if}

Code: Select all

   {menu template='XXX'}