section header

[gletofire]

How do you remove the arrow and the doubled name behind it in the section header?
How do you keep the same section header when the mouse is on hover?

http://www.ajbmusic.nl/adb/

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);
}

[lollipop27]

can you post your  code fom the menuManager template you are using?? please...

[gletofire]

sure

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}

[lollipop27]

well, are you sure sure sure, that you are using this menuManager template?

because your generated code looks like that:

Code: Select all

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

and the menuManger would do that

Code: Select all

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

due to that:

sure

Code: Select all

{elseif $node->type == 'sectionheader'}
<li><a href="{$node->url}"><span>{$node->menutext}</span></a>

[gletofire]

I don't know...
I see only one template in the menuManager, and that is this one:

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}

firebug report me the same output:

Code: Select all

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

Does this mean it has to come from another template?

[lollipop27]

can you give me the line where you call the menu in your template, please?

[gletofire]

my template:

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>

[lollipop27]

Hi...


so you're using the standard cssmenu.tpl file...


import it via: Menumanager > The sacnt tab > the arror at the right next to cssmenu.tpl

give it a name XXX

change the following part

Code: Select all

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

to

Code: Select all

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

now call in your template the following menu

Code: Select all

   {menu template='XXX'}

XXX is the name of your menu template and don't use the ending .tpl

[gletofire]

It works, thx!!

but how do I change the hover section header?

[lollipop27]

what hover section header??

[lollipop27]

To everyone of the development team:

Is this a known bug in the menuManager template cssmenu.tpl?

Or has just never anyone used sectionheaders with css menu??? that's kinda impossible no?

[gletofire]

In windows internet explorer 7:
When I hover over the section header with the mouse, it changes in a buttonlike with small text.

[lollipop27]

don't have IE... sorry.