menu help

[hillick]

Hi all,

Im having trouble getting a menu to work. im also having a problem figuring out what i should be doing with my menu. My menu is this css code;

Code: Select all

table.topNav {
width: 778px;
/*height: 25px;*/
border-collapse: collapse;
text-align: center;
border-right: none;
border-bottom: 1px solid #5F5F5F;
border-left: none;
margin: 1px 0px 0px 0px;
padding: 0px;
clear: both;
float: none;
}

table.topNav tr {
background: #FFFFFF;
border-collapse: collapse;
border: 0px;
margin: 0px;
padding: 0px;
}

table.topNav td {
background: #b962a6;
border-collapse: collapse;
border: 0px;
margin: 0px;
padding: 0px;
}

table.topNav a:link {
font: 11px Verdana, sans-serif;
color: #FFFFFF;
text-decoration: none;
background: #b962a6;
display: block;
padding: 3px;
margin: 0px;
}

table.topNav a:visited{
font: 11px Verdana, sans-serif;
color: #FFFFFF;
text-decoration: none;
background: #b962a6;
display: block;
padding: 3px;
margin: 0px;
}

table.topNav a:hover {
background: #d9088a;
color: #333333;
}

on my page it should look like this

but in cms made simple, this happens

the error code i see when i preview in cms ms is this

Code: Select all

string(353) "Smarty error: [in module_db_tpl:MenuManager;nav line 1]: syntax error: unrecognized tag: width: 778px; /*height: 25px;*/ border-collapse: collapse; text-align: center; border-right: none; border-bottom: 1px solid #5F5F5F; border-left: none; margin: 1px 0px 0px 0px; padding: 0px; clear: both; float: none; (Smarty_Compiler.class.php, line 439)" string(128) "Smarty error: [in module_db_tpl:MenuManager;nav line 1]: syntax error: unrecognized tag '' (Smarty_Compiler.class.php, line 583)" string(219) "Smarty error: [in module_db_tpl:MenuManager;nav line 13]: syntax error: unrecognized tag: background: #FFFFFF; border-collapse: collapse; border: 0px; margin: 0px; padding: 0px; (Smarty_Compiler.class.php, line 439)" string(129) "Smarty error: [in module_db_tpl:MenuManager;nav line 13]: syntax error: unrecognized tag '' (Smarty_Compiler.class.php, line 583)" string(219) "Smarty error: [in module_db_tpl:MenuManager;nav line 19]: syntax error: unrecognized tag: background: #b962a6; border-collapse: collapse; border: 0px; margin: 0px; padding: 0px; (Smarty_Compiler.class.php, line 439)" string(129) "Smarty error: [in module_db_tpl:MenuManager;nav line 19]: syntax error: unrecognized tag '' (Smarty_Compiler.class.php, line 583)" string(268) "Smarty error: [in module_db_tpl:MenuManager;nav line 25]: syntax error: unrecognized tag: font: 11px Verdana, sans-serif; color: #FFFFFF; text-decoration: none; background: #b962a6; display: block; padding: 3px; margin: 0px; (Smarty_Compiler.class.php, line 439)" string(129) "Smarty error: [in module_db_tpl:MenuManager;nav line 25]: syntax error: unrecognized tag '' (Smarty_Compiler.class.php, line 583)" string(268) "Smarty error: [in module_db_tpl:MenuManager;nav line 33]: syntax error: unrecognized tag: font: 11px Verdana, sans-serif; color: #FFFFFF; text-decoration: none; background: #b962a6; display: block; padding: 3px; margin: 0px; (Smarty_Compiler.class.php, line 439)" string(129) "Smarty error: [in module_db_tpl:MenuManager;nav line 33]: syntax error: unrecognized tag '' (Smarty_Compiler.class.php, line 583)" string(165) "Smarty error: [in module_db_tpl:MenuManager;nav line 41]: syntax error: unrecognized tag: background: #d9088a; color: #333333; (Smarty_Compiler.class.php, line 439)" string(129) "Smarty error: [in module_db_tpl:MenuManager;nav line 41]: syntax error: unrecognized tag '' (Smarty_Compiler.class.php, line 583)" table.topNav table.topNav tr table.topNav td table.topNav a:link table.topNav a:visited table.topNav a:hover

so, firstly, what have i done wrong?
im calling the template to the page with {menu template='nav'}   (nav is the name of my template)
next, how do i add items to the menu? essentially how do i make my site look the way i want

[hillick]

bump- can anyone give me some help with this? i still havent figured it out.... 

[kermit]

you have the css for the menu IN the menu template?

if so, surround it (just the css} with {literal} {/literal} tags to prevent smarty from parsing it or move it out of the template and into a regular stylesheet (best option).

[hillick]

hi kermit, thanks for your reply...

what im doing currently, is going to menu manager and creating a template, i then use this code

Code: Select all

table.topNav {
width: 778px;
/*height: 25px;*/
border-collapse: collapse;
text-align: center;
border-right: none;
border-bottom: 1px solid #5F5F5F;
border-left: none;
margin: 1px 0px 0px 0px;
padding: 0px;
clear: both;
float: none;
}

table.topNav tr {
background: #FFFFFF;
border-collapse: collapse;
border: 0px;
margin: 0px;
padding: 0px;
}

table.topNav td {
background: #b962a6;
border-collapse: collapse;
border: 0px;
margin: 0px;
padding: 0px;
}

table.topNav a:link {
font: 11px Verdana, sans-serif;
color: #FFFFFF;
text-decoration: none;
background: #b962a6;
display: block;
padding: 3px;
margin: 0px;
}

table.topNav a:visited{
font: 11px Verdana, sans-serif;
color: #FFFFFF;
text-decoration: none;
background: #b962a6;
display: block;
padding: 3px;
margin: 0px;
}

table.topNav a:hover {
background: #d9088a;
color: #333333;
}

How do i make this work with menu manager?

You say 'move it out of the template and into a regular stylesheet (best option).'  if i do this, hoiw do i make items link to other pages? the way id do it if this wasnt a dynamic site would be

Code: Select all

 <table class="topNav" style="border-bottom:1px solid white">
  <tr>
    <!-- to add more items copy one td as needed -->
    <td><a href="hardware.htm">Hardware</a></td>
    <td><a href="software.htm">Software</a></td>
    <td><a href="websites.htm">Websites</a></td>
    <td><a href="networks.htm">Networks</a></td>
    <td><a href="hospitality.htm">Hospitality</a></td>
    <td><a href="security.htm">Security</a></td>
  </tr>
 </table>

but obviously these links wont work, how do i do it this way?

Any help is much appreciated!

[kermit]

right now, you have...

Code: Select all

table.topNav {
width: 778px;
/*height: 25px;*/
border-collapse: collapse;
text-align: center;
border-right: none;
border-bottom: 1px solid #5F5F5F;
border-left: none;
margin: 1px 0px 0px 0px;
padding: 0px;
clear: both;
float: none;
}

table.topNav tr {
background: #FFFFFF;
border-collapse: collapse;
border: 0px;
margin: 0px;
padding: 0px;
}

table.topNav td {
background: #b962a6;
border-collapse: collapse;
border: 0px;
margin: 0px;
padding: 0px;
}

table.topNav a:link {
font: 11px Verdana, sans-serif;
color: #FFFFFF;
text-decoration: none;
background: #b962a6;
display: block;
padding: 3px;
margin: 0px;
}

table.topNav a:visited{
font: 11px Verdana, sans-serif;
color: #FFFFFF;
text-decoration: none;
background: #b962a6;
display: block;
padding: 3px;
margin: 0px;
}

table.topNav a:hover {
background: #d9088a;
color: #333333;
}

in the MENU TEMPLATE. the { and } characters present in css is what is causing the smarty errors when smarty tries to generate the menu...

so, REMOVE the above from your menu template and put it in a stylesheet instead. (i.e. the stylesheet that is attached to the PAGE TEMPLATE... layout->stylesheets)

[hillick]

i get how it would work in a stylesheet (this is how it was developed) what i dont get is how to make the menu work with cms made simple.....

if i place this code back in my stylesheet, how will the menu work? how do i link to other pages? as mentioned above, if this was a static site it would be an easy process, i would just place this code back into my stylesheet and call it to my page with

Code: Select all

<table class="topNav" style="border-bottom:1px solid white">
  <tr>
    <!-- to add more items copy one td as needed -->
    <td><a href="hardware.htm">Hardware</a></td>
    <td><a href="software.htm">Software</a></td>
    <td><a href="websites.htm">Websites</a></td>
    <td><a href="networks.htm">Networks</a></td>
    <td><a href="hospitality.htm">Hospitality</a></td>
    <td><a href="security.htm">Security</a></td>
  </tr>
 </table>

now this obviously will not work with cmsmadesimple, each page will be dynamic when i create it hence will not have the above names....

i really dont get how this works i know on the front page of this website it says no question is to stupid to be asked but im starting to feel a bit baffled by this? any help would be most appreciated

[kermit]

Code: Select all

<table class="topNav" style="border-bottom:1px solid white">
  <tr>
    <!-- to add more items copy one td as needed -->
    <td><a href="hardware.htm">Hardware</a></td>
    <td><a href="software.htm">Software</a></td>
    <td><a href="websites.htm">Websites</a></td>
    <td><a href="networks.htm">Networks</a></td>
    <td><a href="hospitality.htm">Hospitality</a></td>
    <td><a href="security.htm">Security</a></td>
  </tr>
 </table>

you need to create a menu template that duplicates the above code.. although i would strongly urge you to consider using a standard list-based menu, such as those found in the default menu templates, and customize it through css... tables-based menus are worse than tables-based layouts, imho.  look at the default template "CSSMenu top + 2 columns" and the top navigation bar that it has.

a tables-based menu template would look something like this (see note below):

Code: Select all

{if $count > 0}

<table>
<tr>

{foreach from=$nodelist item=node}

	{if $node->depth > $node->prevdepth}
	{repeat string="<tr>" times=$node->depth-$node->prevdepth}

	{elseif $node->depth < $node->prevdepth}
	{repeat string="</td></tr>" times=$node->prevdepth-$node->depth}
	</td>
			
	{elseif $node->index > 0}
	</td>
			
	{/if}


	{if $node->current == true}
	<td class="current"><a href="{$node->url}" class="current"{if $node->target ne ""} target="{$node->target}"{/if}>{$node->menutext}</a>

	{elseif $node->parent == true && $node->depth == 1}
	<td class="activeparent"><a href="{$node->url}" class="activeparent"{if $node->target ne ""} target="{$node->target}"{/if}>{$node->menutext}</a>

	{elseif $node->type == 'sectionheader'}
	<td class="sectionheader">{$node->menutext}

	{elseif $node->type == 'separator'}
	<td class="separator"><hr class="separator" />

	{else}
	<td><a href="{$node->url}"{if $node->target ne ""} target="{$node->target}"{/if}>{$node->menutext}</a>

	{/if}

{/foreach}

{repeat string="</td></tr>" times=$node->depth-1}

</td>
</tr>
</table>

{/if}

I only hacked it (minimal_menu.tpl) up enough to work if your site only has ONE LEVEL in site hierarchy. it will NOT work if you have any "child" pages; as that requires a completely different logic than a list-based menu.. something my tired ol' brain cannot comprehend at 1AM....

1. home
2. products
3. services
4. about
5. contact

is ok

1. home
1.1 about
2. products
2.1 services
3. contact

NOT ok.

perhaps someone can finish the butcher job and come up with a fully working tables-based menu template.

[kermit]

this is good progress! i still have some problems however, firstly

If i create a new standard list based menu which looks like what i have now, how do i link to each of my pages?
i dont have to have a drop down menu to have children pages obviuosly, but can a child page have multiple child pages that maintain the menu?

next, can i link to static pages? and if so, how can i then link back to my dynamic pages from these static pages...?

thirdly, can i have more than one navigation menu? that is, on my site http://www.space95.sc/rtg i have two menus, maybe this wont be a problem however as im beginning to doubt the menu creation process with cms madesimple. Table based menu is not important, i can build a new one, but my top right menu is more important to the look of the site. humbug

1. pages are inserted into the menu automatically by the (correct ) code in the menu template. if you create a new page, and don't turn off 'show in menu', it will show up in the menus in the correct place, based on its position in the site hierarchy.

1 1/2. if you look at a default install with the default content and go to this page:
Default Templates Explained » CSSMenu top + 2 columns
you will see an example, under 'default extensions' of a child item having its own children.

the 'children' of a parent are in a nested list. i've tested the default drop down menu out to five levels total before i ran out of screen real estate.

if you don't have a default install handy, try the demo at opensourcecms.com (link goes directly to the above page... if it still exists with the monkeys that edit those demos. remember the demos there do refresh back to 'default' every couple hours)

2. you can link to static pages (add new content -> content type: link) that are outside of your cmsms site and templates, but if you link back to cmsms pages, you need to hand-code those links, because outside of cmsms you won't have the menu manager to build the menu for you 'on the fly'.

if you want the menus in the static pages to look the same, then just copy the menu output html from a cmsms page into your static pages.

3. you can have multiple menus. again, look at the default content:
Default Templates Explained » Top simple navigation + left subnavigation + 1 column
you will see a top navigation bar and a side submenu.


the menu manager module 'help' page has more information on customizing the output of menus.

creating your own menu template isn't what i'd call "easy" if you're unfamiliar with the syntax, logic, etc... but it can be done if you've got the patience to learn what you need to know and do a little (a lot, perhaps) trial-and-error until you get it "just right". you might find it easier, though, to modify the styling of the default drop down menu to fit your site design. you can use the drop down menu even if you only have one level in your site hierarchy.. it just won't "drop down"...

[hillick]

Thanks so much for your help kermit, you have been very helpful and your taking time to help me with this is massively appreciated.

I am now writing a new list based menu and will try again, you've given me a push in the right direction!

again, thank you