Simple Vertical 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
mdcdeve
New Member
New Member
Posts: 2
Joined: Sun Jun 08, 2008 10:25 pm

Simple Vertical Menu

Post by mdcdeve »

Hi i've been trying to figure this out for a while now but there always seems to be problems. Would anyone be able to help me ? I wanted to create a simple vertical text menu which displays child while you are on the parent. I also wanted the child to be indented slightly. This code below seemed to work and it did in FireFox but then when i came to test it in IE7 it messes up mainly because of the div i'm using to indent the child, i've checked my div nesting and it all seems fine but no matter what i do IE7 takes that div close tag and cuts off the wrong divs before it. Does anyone know of a different way to create the small indent ? Or maybe a way that will work in both browsers ? Thanks in advance !

Code: Select all

{if $count > 0}
<ul>
{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}<div style="padding-left:20px">
{elseif $node->depth < $node->prevdepth}</div>
</li>
{elseif $node->index > 0}</li>
{/if}

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

{elseif $node->parent == true}
<li class="activeparent"><a class="activeparent" href="{$node->url}"{if $node->accesskey != ''} accesskey="{$node->accesskey}"{/if}{if $node->tabindex != ''} tabindex="{$node->tabindex}"{/if}{if $node->titleattribute != ''} title="{$node->titleattribute}"{/if}>{$node->menutext}</a>

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

{elseif $node->type == 'separator'}
<li class="separator" style="list-style-type: none;"> <hr />

{else}
<li><a 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 != ''} target="{$node->target}"{/if}>{$node->menutext}</a>

{/if}

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

Re: Simple Vertical Menu

Post by Dr.CSS »

I'm sorry I don't see any div tags in that menu template...

Does this look wrong in IE7?...

http://multiintech.com/cmsmsdemo/index. ... msms-works

Do you have a link?... Helps a lot...
mdcdeve
New Member
New Member
Posts: 2
Joined: Sun Jun 08, 2008 10:25 pm

Re: Simple Vertical Menu

Post by mdcdeve »

Hi Mark, thanks for your reply ! The div tag is in there right near the top

Hmm .. nope that looks fine in IE7, might have to look at that template if it would be possible to integrate that into mine though not sure which it is.

And here is the link, can see the problem between IE7 and FF

http://natalia-music.com/index.php?page=part-one

edit: Just going over the css again, think there may be a way to work around it there, maybe something conflicting will have to see. Probably won't go with the div idea and find a way with css. Also going over simple_navigation.tpl as you suggested, re-doing the menu template from there.

edit2: Seems to be working now if but with some crude css but hopefully alls ok for now will neaten it later but happy with it for now, thanks for the suggestion Mark.
Last edited by mdcdeve on Thu Jun 12, 2008 1:38 am, edited 1 time in total.
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12711
Joined: Thu Mar 09, 2006 5:32 am

Re: Simple Vertical Menu

Post by Dr.CSS »

Yea I see it now,sorry it was up near the top and thought it was mixed in with the rest of the calls...

If you import one of the menu template you will see a div call at the start of it and the closing div at the bottom, this is to wrap the ul li in a div...

You can just give it and ID or class and use CSS to call the styles instead of putting it in the HTML...

could be then put the style in the CSS...

#menu {position:relative; left:110px; top:50px;}

This separates the style from the content, more modern HTML compliant...
Post Reply

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