Menu help...

[Edwin_IandD]

Hello everybody,

I'm running into a problem with a menu on a website.

It all looked nice and not too complicated when I designed the site on paper, but for some odd reason I don't seem to get what I want coding the site.

I'd like the menu to look like the enclosed jpg. But for some odd reason I can't get to get either the html or the css right to make this happen.. I know I'm missing something but I can't lay my finger on it.

Just so you'll know:
The height of the blue bar is set in percentage together with a few other divs this will fill the browser's whole viewport (this works fine at different resolutions so far).
Ideally I would like to parent's to be clickable and changeable in the CMS, but if necessary we can hard code them into the template as they are not likely to change anyway. (we'll include the relevant menu with {menu childrenof=""})

If anybody has any ideas I'd be most grateful!

Have a nice day!
Edwin

[JohnnyB]

Here's how I approach this assuming that the parents are not actual pages and are Redirecting Links to the first child. For example, clicking on Parent 1 will open its immediate child.

The page structure in the Admin Console might look something like this:
Parent 1(redirecting link Child 1)
- Child 1.1 (page)
- Child 1.2 (page)
- Child 1.3 (page)
Parent 2 (redirecting link to Child1)
- Child 2.1 (page)
- Child 2.2 (page)
- Child 2.3 (page)
and etc.

HTML should be a simple list structure:

Code: Select all

<ul id="my_menu">
	<li class="parent">Parent 1
		<ul>
			<li class="child">Child</li>
			<li class="child">Child</li>
		</ul>
	</li>
	<li class="parent">Parent 2
		<ul>
			<li class="child">Child</li>
			<li class="child">Child</li>
		</ul>
	</li>
</ul>

Your CMSMS menu template can use this HTML structure and I think some of the default templates already do this. But, here is a simple one you can try:

Code: Select all

{if $count > 0}
<ul id="my_menu">
{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}{if $node->type != 'separator' and ($node->type != 'sectionheader' and $node->haschildren != true) or ($node->type =='sectionheader' and $node->haschildren == true)}</li>
	{elseif $node->type != 'separator'}</li>
	{/if}
	{/if}
	{if $node->depth == 1 and $node->type != 'separator' and $node->type !='sectionheader'}
	<li class="parent"><a class="{$node->alias}"{if $node->type != 'sectionheader' and $node->type != 'separator'} href="{$node->url}"{/if}{if $node->accesskey != ''} accesskey="{$node->accesskey}"{/if}{if $node->tabindex != ''} tabindex="{$node->tabindex}"{/if}{if $node->titleattribute != ''} title="{$node->titleattribute}"{/if}{if $node->titleattribute == ''} title="{$node->menutext}"{/if}{if $node->target ne ""} target="{$node->target}"{/if}>{$node->menutext}</a>
	{elseif $node->depth != 1 and $node->type != 'separator' and $node->type !='sectionheader'}
	<li class="child"><a class="{$node->alias}"{if $node->type != 'sectionheader' and $node->type != 'separator'} href="{$node->url}"{/if}{if $node->accesskey != ''} accesskey="{$node->accesskey}"{/if}{if $node->tabindex != ''} tabindex="{$node->tabindex}"{/if}{if $node->titleattribute != ''} title="{$node->titleattribute}"{/if}{if $node->titleattribute == ''} title="{$node->menutext}"{/if}{if $node->target ne ""} target="{$node->target}"{/if}>{$node->menutext}</a>
	{elseif $node->depth == 1 and $node->type =='sectionheader' and $node->children_exist == true}{* $node->haschildren  *}
	<li><a class="{$node->alias}" href="{$smarty.get.page}"{if $node->accesskey != ''} accesskey="{$node->accesskey}"{/if}{if $node->tabindex != ''} tabindex="{$node->tabindex}"{/if}>{$node->menutext}</a>
	{elseif $node->type =='sectionheader' and $node->children_exist != true}
{* do nothing if sectionheader with no children *}
	{/if}
{/foreach}
	{repeat string="</li></ul>" times=$node->depth-1}</li>
</ul>
{/if}

note: this template is designed for pages, not separators or sectionheaders


Now the fun part is the CSS!
The vertical text rotation can be handled with some trial and error by following: http://www.thecssninja.com/css/real-tex ... n-with-css

The other CSS would be straightforward rules to make a list-like menu work in your situation.

Hope that helps!

[Edwin_IandD]

Thank JohnnyB, That was exactly the way I was trying to do it and where I got stuck. But don't worry we'll keep trying.. I'm sure there is a way.

Have a nice day!
Edwin

[Edwin_IandD]

bump...

Back out of Christmas mode and this job really needs to get finished. If anybody has any ideas that would be most appreciated.

Many thanks,
Edwin

[velden]

Edwin, it's hard to help if we don't know what you made so far and what exactly does (not) work.

If you post an url to your site/page it might help.