CMS Made Simple Forums

Code: Select all

{* CSS classes used in this template:
.activeparent - The top level parent when a child is the active/current page. Used both for the horizontal main menu and the top level in the vertical submenu.
li.active0n h3 - n is the depth/level of the node. To style the active page for each level separately. The active page is not clickable. 
.clearfix - Used for the unclickable h3 to use the entire width of the li, just like the anchors. Also used for the horizontal <ul> to use the entire width of the block element that it is wrapped in. See the Tools stylesheet in the default CMSMS installation.
li.sectionheader h3 - To style section header
hr.separator - To style the ruler for the separator *} 
{if $count > 0}
<ul class="clearfix" id="nav">
{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 && $node->depth == 1}
<li class="active0{$node->depth}"><dfn>{$node->hierarchy}: </dfn><h3>{$node->menutext}</h3>
{elseif $node->current == true && $node->depth > 1}
<li class="active0{$node->depth-1}"><dfn>{$node->hierarchy}: </dfn><h3 class="clearfix">{$node->menutext}</h3>
{elseif $node->parent == true && (($node->depth == 1) or ($node->depth == 2))}
<li class="activeparent"><a href="{$node->url}" {if $node->accesskey != ''}accesskey="{$node->accesskey}" {/if}{if $node->tabindex != ''}tabindex="{$node->tabindex}" {/if}{if $node->titleattribute != ''}title="{$node->titleattribute}"{/if}{if $node->target ne ""} target="{$node->target}"{/if}><dfn>{$node->hierarchy}: </dfn>{$node->menutext}</a>{elseif $node->type == 'sectionheader'}
<li class="sectionheader"><h3 class="clearfix">{$node->menutext}</h3>{elseif $node->type == 'separator'}
<li class="separator" style="list-style-type: none;"><hr class="clearfix" />
{else}
<li><a href="{$node->url}" {if $node->accesskey != ''}accesskey="{$node->accesskey}" {/if}{if $node->tabindex != ''}tabindex="{$node->tabindex}" {/if}{if $node->titleattribute != ''}title="{$node->titleattribute}"{/if}{if $node->target ne ""} target="{$node->target}"{/if}><dfn>{$node->hierarchy}: </dfn>{$node->menutext}</a>{/if}
{/foreach}

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

Code: Select all

/* NAV */

    * html div#menu_horiz {
        /* hide ie/mac \*/
        height: 1%;
        /* end hide */
    }
    div#menu_horiz {
      width: 980px;
      margin: 0;
      text-align: center;
      border-right: solid 1px #cccccc;
    }
    div#menu_horiz ul {    
        margin: 0;
        padding: 0;
        list-style: block;
        border-left:  1px solid #C0C0C0;
        
div#menu_horiz ul li {
      background-color: #000;
       
    }
    div#menu_horiz li {
        float: left;
        display: block;
        list-style: none;
        margin: 0 ;
        border-right: 1px solid #C0C0C0;

}


    }
    div#menu_horiz li a {
        border-right: none;
    }
    div#menu_horiz a,
    div#menu_horiz a:link,
    div#menu_horiz a:active,
    div#menu_horiz a:visited {
        display: block;
        padding: 5px 10px; 

        /* hide from ie/mac \*/
        display: block;
        /* end hide */
        background:  url(uploads/Horizontal_dropdown/nav_bg.jpg) repeat 0 0px; 
        text-decoration: none;
        margin: 0;
        color: #fff;
        /*background: #006AB3;*/
         font-weight: bold;
    }
div#menu_horiz li a:hover {
        background:  url(uploads/Horizontal_dropdown/nav_hover_bg.jpg) no-repeat 0 0px;
	background-color: #87A6BA;
        color: #FFF;
        line-height: 1em;
        font-weight: bold;
}
    div#menu_horiz .activeparent {
        display: block;

        /* hide from ie/mac \*/
        display: block;
        /* end hide */
        
	background-color: #87A6BA;
    }

    div#menu_horiz .current a,
    div#menu_horiz .current a:link,
    div#menu_horiz .current a:active,
    div#menu_horiz .current a:visited,
    div#menu_horiz .current a:hover,
    div#menu_horiz .activeparent a,
    div#menu_horiz .activeparent a:link,
    div#menu_horiz .activeparent a:active,
    div#menu_horiz .activeparent a:visited,
    div#menu_horiz .activeparent a:hover 
{
	background-color: #87A6BA;
    }
/* END NAV */

div#menu_horiz li.active01 h3 {
        display: block;
        padding: 5px 10px; 
        background:  url(uploads/Horizontal_dropdown/nav_hover_bg.jpg) repeat 0 0px;
        /* hide from ie/mac \*/
        display: block;
        /* end hide */
        font-size: 1em;
        line-height: 1em;
        text-decoration: none;
        margin: 0;
        color: #ffffff;
        background-color: #87A6BA;
    }

#menu_horiz li.active02 h3 {
  display: block;
  text-decoration: none;
  padding: 5px 5px 5px 10px;
  font-weight: normal;
  color: #18507C;
  margin: 0;
  font-size: 1em;
  background-color: #87A6BA;
  }

#menu_horiz li.active03 h3
{
  display: block;
  padding: 3px 5px 3px 25px;
  border-bottom: none;
  font-size: 90%;
  font-weight: bold;
  color: #87A6BA;
  margin: 0;
}

Code: Select all

/* Unless you know what you do, do not touch this */ 
#primary-nav, #primary-nav ul { 
   list-style: none; 
   margin: 0px; 
   padding:  0px; 
   background: #CDD5E2;
   -moz-opacity:0.9;
   filter:alpha(opacity=90);
}

#primary-nav ul { 
   position: absolute; 
   top: auto; 
   display: none; 
}

#primary-nav ul ul { 
   margin-top: 1px;
   margin-left: -1px;
   left: 100%; 
   top: 0px;
}
	
#primary-nav li { 
   margin-left: -1px;
   float: left; 
}

#primary-nav li li { 
   margin-left: 0px;
   margin-top: -1px;
   float: none; 
   position: relative; 
}