Help with Custom Menu

[maksum]

I feel like I'm getting really close on this, but can't figure out this last part...

So, here's an example of a hard-coded menu that I want to implement in CMSMS:

Code: Select all

  <div id='main-nav'>
    <ul>
      <li class='nav1' ><a class='nav1' href='#'><span>Welcome</span></a></li>
      <li class='nav2'><a class='nav2' href='#' onmouseover="ypSlideOutMenu.showMenu('menu2');" onmouseout="ypSlideOutMenu.hideMenu('menu2')"><span>About</span></a>
        <div id='menu2Container'>
          <div id='menu2Content'>
            <a href='#'>About Link One</a>
            <a href='#'>About Link Two</a>
            <a href='#'>About Link Three</a>
            <a href='#'>About Link Four</a>
          </div>
        </div>
      </li>
    </ul>
  </div>

It's a dynamic menu and as long as I have the classes and IDs on there right, it works great with the included .js file.  I don't think there's a need to include that, because as long as it will output what you see above, it will work.  Anyway, you can see above that there are two cases for top level links.  It will have children or not.  If it does, then I bring the "onmouseover" and "onmouseout" calls into the anchor tag.  In the example above, "Welcome" does not have children, while "About" does.

So here's what I have so far:

Code: Select all

{if $count > 0}
  <div id='main-nav'>
    <ul>
      {foreach from=$nodelist item=node}
        {counter assign="top_level_num"}
        {if $node->depth == 1 && $node->haschildren == false}
          <li class='nav{$top_level_num}' >
            <a class="nav{$top_level_num}" href="{$node->url}" {if $node->target ne ""} target="{$node->target}"{/if}><span>{$node->menutext}</span></a>
          </li>
        {elseif $node->depth == 1 && $node->haschildren == true}
          <li class='nav{$top_level_num}' >
            <a class="nav{$top_level_num}" href="{$node->url}" {if $node->target ne ""} target="{$node->target}"{/if} onmouseover="ypSlideOutMenu.showMenu('menu{$top_level_num}');" onmouseout="ypSlideOutMenu.hideMenu('menu{$top_level_num}')"><span>{$node->menutext}</span></a>
            <div id='menu{$top_level_num}Container'>
              <div id='menu{$top_level_num}Content'>
                <a href='#'>Sub Link One</a>
                <a href='#'>Sub Link Two</a>
                <a href='#'>Sub Link Three</a>
                <a href='#'>Sub Link Four</a>
              </div>
            </div>
          </li>
        {/if}
      {/foreach}
    </ul>
  </div>
{/if}

It's working great in that it distinguishes between those nodes that have children and those that don't, AND it assigns subsequent  numbers to each top level link.  This "top_level_num" is placed in the classes for the containers that will hold the sub-level links also.  However, you can see that I still have these sub-level links hard-coded.  Anyone have any ideas on how I can adjust the code to list only the children of the node that the "top_level_num" is currently referring to?

I would very much appreciate any help.

Mike

[maksum]

Been working through it.  As it stands now I'm REALLY close.  The only problem is I need to end each sub-nav set of links with two closing div tags.  I'm currently accomplishing that with STARTING a top-level nav link by placing those tags.  However, that only works if the last page to have a link is a top-level link.  If it ends with a sub-page, then they simply never close.

So all I have to figure out is how to count the children, and if I know I just placed the last one THEN close up those divs, as opposed to waiting until the next link is called in... here's what I have:

Code: Select all

{if $count > 0}
<div id='main-nav'>
	<ul>
		{foreach from=$nodelist item=node}
      {if $node->depth == 1}
        {if $node->depth == 1 &&  $node->depth < $node->prevdepth}
            </div>
			    </div>
          <!-- end sub -->
        {/if}
        {counter assign="top_level_num"}
        {if $node->haschildren == false}
          <li class='nav{$top_level_num}' >
            <a class="nav{$top_level_num}" href="{$node->url}" {if $node->target ne ""} target="{$node->target}"{/if}><span>{$node->menutext}</span></a>
        {elseif $node->haschildren == true}
          <li class='nav{$top_level_num}' >
            <a class="nav{$top_level_num}" href="{$node->url}" {if $node->target ne ""} target="{$node->target}"{/if} onmouseover="ypSlideOutMenu.showMenu('menu{$top_level_num}');" onmouseout="ypSlideOutMenu.hideMenu('menu{$top_level_num}')"><span>{$node->menutext}</span></a>
        {/if}
      {elseif $node->depth == 2}
        {if $node->depth > $node->prevdepth}
          <!-- start sub -->
          <div id='menu{$top_level_num}Container'>
  				  <div id='menu{$top_level_num}Content'>
              <a href="{$node->url}" {if $node->target ne ""} target="{$node->target}"{/if}>{$node->menutext}</a>
        {elseif  $node->depth == $node->prevdepth}
              <a href="{$node->url}" {if $node->target ne ""} target="{$node->target}"{/if}>{$node->menutext}</a>
        {/if}
      {/if}
      {if $node->depth == 1}
        </li>
      {/if}
    {/foreach}
	</ul>
</div>
{/if}

So you can disregard the first post, and look over it just to get the history of the issue.  My problem now if figuring out how to figure out if I'm on the last of the children links.

Thanks,

Mike

[maksum]

Well, never got a response on this, but I finally figured it out.  Here is the final code below.  Perhaps someone else will benefit from it down the road:

Code: Select all

{if $count > 0}
<div id='main-nav'>
	<ul>
		{foreach from=$nodelist item=node}
      {if $node->depth == 1}
        {if $node->depth == 1 &&  $node->depth < $node->prevdepth}
            </div>
			    </div>
          <!-- end sub -->
        {/if}
        {counter assign="top_level_num"}
        {if $node->haschildren == false}
          <li class='nav{$top_level_num}' >
            <a class="nav{$top_level_num}" href="{$node->url}" {if $node->target ne ""} target="{$node->target}"{/if}><span>{$node->menutext}</span></a>
        {elseif $node->haschildren == true}
          <li class='nav{$top_level_num}' >
            <a class="nav{$top_level_num}" href="{$node->url}" {if $node->target ne ""} target="{$node->target}"{/if} onmouseover="ypSlideOutMenu.showMenu('menu{$top_level_num}');" onmouseout="ypSlideOutMenu.hideMenu('menu{$top_level_num}')"><span>{$node->menutext}</span></a>
        {/if}
      {elseif $node->depth == 2}
        {if $node->depth > $node->prevdepth}
          <!-- start sub -->
          <div id='menu{$top_level_num}Container'>
  				  <div id='menu{$top_level_num}Content'>
              <a href="{$node->url}" {if $node->target ne ""} target="{$node->target}"{/if}>{$node->menutext}</a>    
        {elseif  $node->depth == $node->prevdepth}
              <a href="{$node->url}" {if $node->target ne ""} target="{$node->target}"{/if}>{$node->menutext}</a>    
        {/if}
        {if $count == ($node->index+1)}
            </div>
			    </div>
          <!-- end sub -->
        {/if}
      {/if}
      {if $node->depth == 1}
        </li>
      {/if}
    {/foreach}
	</ul>
</div>
{/if}

this code will display if you're on the last link:

Code: Select all

{if $count == ($node->index+1)}

and I placed it within the IF statement of a subnav item, so it will only show up then... otherwise, if it's a top-level link there is the same code above.