Help making 3 level menu

For discussion and questions related to CMS Specific templates and stylesheets (CSS), and themes. or layout issues. This is not a place for generic "I don't know CSS issues"
Post Reply
lacertus2
New Member
New Member
Posts: 7
Joined: Sun Oct 17, 2010 4:31 am

Help making 3 level menu

Post by lacertus2 »

Somehow my brain can't do menu design!

I have three levels of menus, but I only want sublevels shown if the current page has sublevels. The active page, and it's parent(s) should be marked.

But I can't figure out how to do this in the "menu-language" of CMSMS. Can anybody point me in the right direction?
Last edited by lacertus2 on Sun Oct 17, 2010 8:28 am, edited 1 time in total.
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12711
Joined: Thu Mar 09, 2006 5:32 am

Re: Help making 3 level menu

Post by Dr.CSS »

There is a very good chance I could help you if you can maybe explain it a little more...
lacertus2
New Member
New Member
Posts: 7
Joined: Sun Oct 17, 2010 4:31 am

Re: Help making 3 level menu

Post by lacertus2 »

I'm bad at explaining. Here's some examples for what I want:

When you are on a 1st level page (eg. About) and it has children

Code: Select all

	
<div class="menus" style="clear: both;">
		<ul>
			<li><a href="#">Front page</a></li>
			<li><a class="selected" href="#">About</a></li>
			<li><a href="#">Page3</a></li>
			<li><a href="#">Page4</a></li>
			<ul>
				<li><a href="#">More info</a></li>
				<li><a href="#">The Company</a></li>
				<li><a href="#">Staff</a></li>
				<li><a href="#">Link5</a></li>
			</ul>
		</ul>		
</div>
When you're at 1st level and there's no children (Eg. front page):

Code: Select all

	
<div class="menus" style="clear: both;">
		<ul>
			<li><a class="selected" href="#">Front page</a></li>
			<li><a href="#">About</a></li>
			<li><a href="#">Page3</a></li>
			<li><a href="#">Page4</a></li>
		</ul>		
	</div>
When you're at a page in the last level (eg. FAQ)

Code: Select all

	
<div class="menus" style="clear: both;">
		<ul>
			<li><a href="#">Front page</a></li>
			<li><a class="selected" href="#">About</a></li>
			<li><a href="#">Page3</a></li>
			<li><a href="#">Page4</a></li>
			<ul>
				<li><a href="#">More info</a></li>
				<li><a class="selected" href="#">The Company</a></li>
				<li><a href="#">Staff</a></li>
				<li><a href="#">Link5</a></li>
					<ul>
						<li><a href="#">Money</a></li>
						<li><a href="#">Other numbers</a></li>
						<li><a class="selected" href="#">FAQ</a></li>
					</ul>
			</ul>
		</ul>		
	</div>
I have tried this (wrote it myself):
(It repeats some pages over and over again, doesn't really work, see the next one)

Code: Select all

{foreach from=$nodelist item=node}
 	{if $node->depth == 1}
			{if $node->current == true}
				<li><a class="selected" href="{$node->url}">{$node->menutext}</a></li>
			{else}
				<li><a href="{$node->url}">{$node->menutext}</a></li>
			{/if}
	{/if}
	
		{foreach from=$nodelist item=node}
			{if $node->depth == 2}
				{if $node->current == true}
					<li><a class="selected" href="{$node->url}">{$node->menutext}</a></li>
				{else}
					<li><a href="{$node->url}">{$node->menutext}</a></li>
				{/if}
			{/if}
		
			{foreach from=$nodelist item=node}
				{if $node->depth == 3}
					{if $node->current == true}
						<li><a class="selected" href="{$node->url}">{$node->menutext}</a></li>
					{else}
						<li><a href="{$node->url}">{$node->menutext}</a></li>
					{/if}
				{/if}
			{/foreach}

		{/foreach}

{/foreach}
And this:
(Perfect, but it always shows all the children, I want only the children for the parent)

Code: Select all

<div class="menus">
{if $count > 0}
	<ul>
	{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="</ul>" times=$node->prevdepth-$node->depth}
			{elseif $node->index > 0}
			{/if}
	
	
			{if $node->parent == true or ($node->current == true and $node->haschildren == true)}
				<li class=bla1><a class="selected" href="{$node->url}">{$node->menutext}</a></li>
		
			{elseif $node->haschildren == true and $node->type != 'sectionheader' and $node->type != 'separator'}
				<li class=bla2><a href="{$node->url}">{$node->menutext}</a></li>
		
			{elseif $node->current == true}
				<li class bla3><a class="selected" href="{$node->url}">{$node->menutext}</a></li>
		
			{elseif $node->type == 'sectionheader'}
				<li class="sectionheader"><span>{$node->menutext}</span></li>
		
			{elseif $node->type == 'separator'}
				<li class="separator" style="list-style-type: none;"> <hr /></li>
		
			{elseif $node->parent == true}
			
				<li><a href="{$node->url}"><span>{$node->menutext}</span></a></li>
		
			{/if}

	{/foreach}
	{repeat string="</ul>" times=$node->depth-1} 
	</ul>
{/if}
</div>
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12711
Joined: Thu Mar 09, 2006 5:32 am

Re: Help making 3 level menu

Post by Dr.CSS »

That sounds just like the default menu used here...

Start on any page except ones in default templates and they all use this template...

http://multiintech.com/defaultcontent/i ... ge=modules
lacertus2
New Member
New Member
Posts: 7
Joined: Sun Oct 17, 2010 4:31 am

Re: Help making 3 level menu

Post by lacertus2 »

Where do I get the code for that menu?

Edit: The default menu does not do what I want.

1) It displays all subpages no matter what
2) The html is wrong: is inside of , not inside of

I've spent like 8 hours on getting this extremely simple thing to work, but no luck.

Edit2:

What does the default menu template even do???  I don't understand this code:

Code: Select all

{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}
Last edited by lacertus2 on Mon Oct 18, 2010 2:05 am, edited 1 time in total.
lacertus2
New Member
New Member
Posts: 7
Joined: Sun Oct 17, 2010 4:31 am

Re: Help making 3 level menu

Post by lacertus2 »

anybody out there?
Post Reply

Return to “Layout and Design (CSS & HTML)”