[Solved] How to combine CCS Horizontal Menu & Keep Left Subnavigation

[elkman]

Hi Folks,

Has anyone ever used the CSS Menu Top navigation along with the left subnavigation found on the basic templates?  I am hoping to be able to combine the CSS Top navigation with it's drop down feature along with the left subnavigation. 

This is a website for our school and you can view what I've done so far here www.smhscs.org/newweb

I've created new templates and appropriate stylesheets for each menu item and underlying menu items.  I'm hoping the CSS Menu will allow me to evenly space the top menu for better appearance and remove the right side ragged edge.

Thanks for any insight or help that you may be able to offer.

Elkman

[tophers]

I have, and it works great! All you need to do is call the top nav and sidenav like the example below:

Code: Select all

<div id="mainnav">
    <div id="menu_horiz">
      <h2 class="accessibility">Navigation</h2>
      {menu template='cssmenu.tpl'}
      <hr class="accessibility" />
    </div>
  </div>
  <div id="sidenav">
    <div id="menu_vert">
      <h2 class="accessibility">Sub Navigation</h2>
      {menu template='simple_navigation.tpl' start_level='2' collapse='1'}
      <hr class="accessibility" />
    </div>
  </div>

'cssmenu.tpl' will call a horizontal, css-based drop-down menu, and 'simple_navigation.tpl will handle the sidenav as you have it now.

As for the spacing, it can be a challenge with just CSS, since the MenuManager uses lists to produce the menu. You can modify the .tpl that runs the menu to assign unique ids to each list item, then write stylesheets to specify widths, but it then forces any changes in the main navigation structure to be done by someone with web development skills - most Editors won't know how to do it, and you probably don't want them mucking around in those files anyway!

If you want to try it, here's the code I've used. First of, the .tpl file needs to be modified (modules > MenuManager > templates > cssmenu.tpl). And this probably relies on a few of CalGuy's extensions, so install them to make sure it works (Modules > CGExtensions and CGSimplySmarty):

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. *}
{if $count > 0}
<div id="menuwrapper">
<ul id="primary-nav">
{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}

	{repeat string='<ul class="subnav">' 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 and $node->haschildren == true)}
	<li id="{$node->alias}" class="menuactive menuparent"><a class="menuactive menuparent" 
{elseif $node->current == true}
	<li id="{$node->alias}" class="menuactive"><a class="menuactive" 
{elseif $node->haschildren == true}
	<li id="{$node->alias}" class="menuparent"><a class="menuparent" 
{elseif $node->type == 'sectionheader'}
        <li class="sectionheader"><span> {$node->menutext} </span>
{elseif $node->type == 'separator'}
        <li style="list-style-type: none;"> <hr class="separator" />
{else}
	<li id="{$node->alias}"><a 
{/if}
{if $node->type != 'sectionheader' and $node->type != 'separator'}
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'}
><dfn>{$node->hierarchy}: </dfn>{$node->menutext}</a>
{/if}

{/foreach}

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

That will give you some code to hang the css on. What follows is just a snippet of what you'll need, but should be enough to get you going:

Code: Select all

#home		{left: 0px; width: 250px;}
#about-smhs	{left: 250px; width: 200px;}

Keep in mind that the ids assigned will be taken from the page alias, so code accordingly.

Good luck, and let me know if this helps or just makes things more confusing!

[elkman]

Tophers, thanks so much for the help.  I'll try this and let you know how it works for me!

Elkman

[elkman]

I have tried placing the suggested code but instead of a top menu drop down, all menu items are displayed at once. 

Here is my modified code using the Top simple navigation + left subnavigation template:

{process_pagedata}



{* Change lang="en" to the language of your site *}



{sitename} - {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}

=b){nw=b+"px";}if(w



#pagewrapper {width:expression(P7_MinMaxW(720,960));}
#container {height: 0%;}


{/literal}
{* The min and max page width for Internet Explorer is set here. For other browsers it's in the stylesheet "Layout: Top menu + 2 columns" *}








    {* start accessibility skip links *}
   
      {anchor anchor='menu_vert' title='Skip to navigation' accesskey='n' text='Skip to navigation'}
      {anchor anchor='main' title='Skip to content' accesskey='s' text='Skip to content'}
   
    {* end accessibility skip links *}


   
    {* Horizontal ruler that is hidden for visual browsers by CSS *}


  {* Start Header, with logo image that links to the default start page. Logo image is changed in the stylesheet  "For template: Top menu + left submenu + 1 column" *}
 
          {cms_selflink dir="start" text="$sitename"}
 
 
  {* End Header *}


{* Start Navigation *}
 
      Navigation
      {menu template='cssmenu.tpl'}
     
   
  {* End Navigation *}


  {* Start Search *}
 
          {search}
  -->
  {* End Search *}

  {* Start Breadcrumbs *}
 
        {breadcrumbs starttext='You are here' root='Home' delimiter='»'}
 
  -->
  {* End Breadcrumbs *}


  {* Start Content (Navigation and Content columns) *}
 

      {* Start Sidebar *}
     

      {* Start Sub Navigation *}
     
        Sub Navigation

          {* NB! The below is only added because several default templates use the same menu stylesheet, to "force" the subnavigation to act as if it's the second level in a list *}
          {menu template='simple_navigation.tpl' start_level='2' collapse='1'}
     
     
      {* End Sub Navigation *}

     
      {* End Sidebar *}


      {* Start Content Area *}
     
        {print showbutton=true script=true}
        {title}-->
        {content}


        {* Start relational links *}


{anchor anchor='main' text='^ Top'}

       
            {cms_selflink dir="previous" label="Previous page: "}

            {cms_selflink dir="next"}
        -->
        {* 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 *}

     
     
  {* End Content Area *}


 
  {* End Content *}


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


{* end pagewrapper *}



You can view my results here:  http://www.smhscs.org/newweb/index.php?page=about-smhs

Perhaps you can see where I have made an error?

Elkman

[tophers]

Hi elkman,

It looks like you've implemented the menus properly, and both are showing up on your site. The issue appears to be with the stylesheets for the css horizontal drop-down menu. I won't post all of the code here, but it looks like you've used a simple modification of your vertical menu for the top nav, and are missing the chunk that controls the actual drop-down portion. The result is that all of the children of your dropdowns are not hidden, and I'm guessing that the result is not quite you were expecting!

The default sheet to start with is 'Navigation: CSSMenu - Horizontal'. I would attach that one to your template (and remove the one you are currently using that references div#menu_horiz), and start editing from there.

I just finished moving a client over to CMSMS over the weekend, and it used the exact menu system you're looking at. You take a look at it here (it's a simple port to CMSMS at this point - we're working on a new design now, but they needed the functionality of the CMS right away): http://www.energynavigator.com/

I'll keep an eye on the Forum in case you have any more questions. Good luck!

[Dr.CSS]

tophers, any reason you have height and width declared in #primary-nav ul, it makes my browser have a scrollbar at the bottom when I hover...

[tophers]

Thanks for that Mark - it'll teach me to start testing in smaller browser windows more often (on my monitor there was no such scrollbar, but I'm running at 1900 x 1200!). I threw that one together fairly quickly (the client wanted to get into the CMS BEFORE we did a site redesign), so I just did some minor tweaks to the template to get it working. I'll take a look at that as I look at the redesign.

[elkman]

tophers,

Thanks for all of your help