Image-based Navigation - help needed

[jashur1]

Greetings all. I'm currently working on my first CMSMS site (the first of many). I've scoured the documentation and the forums for help on image based navigation and have gone over the tutorial at http://themes.cmsmadesimple.org/Image_menu.html. Just to give you some background info, i'm a web developer and am very comfortable with CSS and PHP, etc. What I'm having trouble with is writing and configuring the .tpl file in menumanager. I've attempted to follow the tutorial just as it says to do and have no trouble with getting the image based navigation to work locally. I'm just a little confused about configuring the file in menumanger. Before I show you what I've done with in menumanager, I'm trying to duplicate the image-based navigation exactly as shown on this site:

http://alliedblending-com.web06.winsvr.net/default.asp

Now, here's what I've done with in the .tpl file but I'm still having problems:

{* CSS classes used in this template:
#menuwrapper - The id for the that the menu is wrapped in. Sets the width, background etc. for the menu.
#primary-nav - The id for the
.menuparent - The class for each that has children.
.menuactive - The class for each that is active or is a parent (on any level) of a child that is active. *}
{if $count > 0}


{foreach from=$nodelist item=node}

{if $node->depth > $node->prevdepth}

{repeat string="" times=$node->depth-$node->prevdepth}
{elseif $node->depth prevdepth}

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

{elseif $node->index > 0}
{/if}
{if $node->parent == true or ($node->current == true and $node->haschildren == true)}

{elseif $node->haschildren == true}
id}">type == 'sectionheader'}
        {$node->menutext}
{elseif $node->type == 'separator'}
       
{else}
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}>{$node->hierarchy}: {$node->menutext}
{elseif $node->type == 'sectionheader'}
>{$node->hierarchy}: {$node->menutext}
{/if}

{/foreach}

{repeat string="" times=$node->depth-1}



{/if}

/******/

Any help would be greatly and immensely appreciated. This is my first go around with CMSMS and I certainly plan on doing more sites. If I can get this image-based navigation up and working, it would serve as a great springboard for additional sites. Thank you in advance for any help or advice!!!

jashur1

[10010110]

The important part ist this:

Code: Select all

<li id="i{$node->id}">

in that section:

Code: Select all

{elseif $node->haschildren == true}
   <li id="i{$node->id}"><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><a
{/if}

The {$node->id} code will add the number of the page (page ID) that you have in your page listing. So in order to add something you must have those pages in your CMS already.
Then in the code snippet above you might notice that there are more options as to when a list item appears with which attributes. But the regular list items are the last option and that’s where you’ve gotta add that node ID:

Code: Select all

{else}
   <li id="i{$node->id}"><a

In fact, it would be best to add that to all occurrences of list items in that section:

Code: Select all

{elseif $node->haschildren == true}
   <li id="i{$node->id}"><a class="menuparent"
{elseif $node->type == 'sectionheader'}
        <li id="i{$node->id}" class="sectionheader"><span> {$node->menutext} </span>
{elseif $node->type == 'separator'}
        <li id="i{$node->id}" style="list-style-type: none;"> <hr class="separator" />
{else}
   <li id="i{$node->id}"><a
{/if}

• So, to recapitulate in a nutshell:
  
  • Add your pages to the CMS
  • Modify the code in the MenuManager for your custom menu template as shown above
  • View your site’s source code to check whether the IDs were applied
  • Change your stylesheet to addresss the appropriate list item(s) by the IDs they got assigned
  • Come back here if you’ve got more question and/or didn’t understand (it’s not so easy to explain…)