[Solved] Need some help customizing my menu

[The Shadow]

I want to add a greater than sign to all of the parent items that have children, but only on the drop-down menu; not on the main menu.  This string of CSS I that I want to add, >  

This is how I would like the menu to look like.  I just don't know what the main menu items are called.



My menu template looks like this:

Code: Select all

{if $count > 0}
<ul id="nav" class="sf-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}</li>
{/if}


{if $node->parent == true or ($node->current == true and $node->haschildren == true)}
<li><a href="{$node->url}" {if $node->target}onclick="target='newwindow'" {/if}>{$node->menutext}</a>

{elseif $node->haschildren == true and $node->type != 'sectionheader' and $node->type != 'separator'}
<li><a href="{$node->url}" {if $node->target}onclick="target='newwindow'" {/if}>{$node->menutext}</a>

{elseif $node->current == true}
<li><a href="{$node->menutext}">{$node->menutext}</a>

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

{else}
<li><a href="{$node->url}" {if $node->target}onclick="target='newwindow'" {/if}>{$node->menutext}</a>

{/if}

{/foreach}
{repeat string="</li></ul>" times=$node->depth-1}</li>
</ul>
{/if}

[The Shadow]

So there's no way how to this via the Menu Manager?

If making my menu template look like this:

Code: Select all

{elseif $node->haschildren == true and $node->type != 'sectionheader' and $node->type != 'separator'}
<li><a href="{$node->url}" {if $node->target}onclick="target='newwindow'" {/if}>{$node->menutext} ></a>

Then my menu will like like this:



But when if I were to add >

Then my menu will like this (which is not what I want):

[uniqu3]

Not tested but you could try

Code: Select all

{elseif $node->haschildren == true and $node->depth == 2}
<li><a href="{$node->url}" {if $node->target}onclick="target='newwindow'" {/if}>{$node->menutext} <span style="float:right;">></span></a>

But it can also be done with CSS

for example

Code: Select all

.yourmenuclass li a span.classforspan /*First level */{
 visibility:hidden;
 float:right;}

.yourmenuclass li li a span.classforspan /*Second level*/ {
 visibility:visible;}

[The Shadow]

Code: Select all

{elseif $node->haschildren == true and $node->depth >= 2}
<li><a href="{$node->url}" {if $node->target}onclick="target='newwindow'" {/if}>{$node->menutext} <span style="float:right;">></span></a>

Worked perfectly!!!  I changed the $node->depth == 2 to $node->depth >= 2 that way if I do another level depth, then it will have a > sign.  If I just left it as $node->depth == 2 then only the second level would have a > sign.

Major thanks!

My web site is located here

[The Shadow]

I thought that my menu was finished, but when I tried my site in IE6 and IE7 the menu looks like this:



My menu looks great in IE8, FireFox 3.6.4, Safari 5, Opera 10.60, and Chrome 5; just not in IE6 (figures) and IE7.  So what is the best way to resolve this issue?

[Ziggywigged]

You might have to add those as images for best results.

[uniqu3]

Actually IE6 is the only one showing this correctly by logic.

For example:

li is styled to wrap link -->
link has display:block means width100% and no float --> Tuition
means span element gets pushed by display block property --> >

You gave width to element, not sure didn't test it but you could try placing outside and play with width.

[owr_bgld]

You might have to add those as images for best results.

I also think it's the best solution.
make the '>' as picture and background. no-repeat and position right center should work

but maybe you chould think about the different colors (for hover pe.)

But maybe also this works:
>Tuition

I had someimes success by putting the right before the left. but don't aksk me why

[Dr.CSS]

When floating right the thing after it will go left everything on the web starts in the left top corner, and clear the right side...

I would have gone with an image first before trying the >, you can make it a transparent png but ie6 won't like it, so I would make 2 one for normal state and one for hover/active...

[The Shadow]

But maybe also this works:
>Tuition

Thanks everyone, and especially owr_web!  Your suggestion worked perfectly in all of the browsers that I checked. 

Thanks again everyone!